yehor/ha_client
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Camera stream web view improvements

Browse Source
This commit is contained in:
Yegor Vialov 2020-02-21 11:23:39 +00:00
parent fba4459977
commit 86a19eeec2
3 changed files with 68 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/html/cameraView.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
widows: 100%;
height: 100%;
}
img {
width: 100%;
}
</style>
<script>
var messageChannel = '{{message_channel}}';
window.onload = function() {
var img = document.getElementById('screen');
if (img) {
window[messageChannel].postMessage(document.body.clientWidth / img.offsetHeight);
}
};
</script>
</head>
<body>
<img id="screen" src="{{stream_url}}">
</body>
</html>

60
lib/entities/camera/widgets/camera_stream_view.dart
View File

@ -17,24 +17,42 @@ class _CameraStreamViewState extends State<CameraStreamView> {
Timer monitorTimer; Timer monitorTimer;
bool started = false; bool started = false;
double aspectRatio = 1.33; double aspectRatio = 1.33;
String htmlView;
String messageChannelName = 'unknown';
@override @override
void initState() { void initState() {
super.initState(); super.initState();
} }
void loadStreamUrl() { void loadResources() {
Logger.d("[Camera Player] Loading stream url"); Logger.d("[Camera Player] Loading resources");
HomeAssistant().getCameraStream(_entity.entityId) if (_entity.supportStream) {
.then((data) { HomeAssistant().getCameraStream(_entity.entityId)
Logger.d("[Camera Player] Stream url: ${ConnectionManager().httpWebHost}${data["url"]}"); .then((data) {
if (videoPlayerController != null) { Logger.d("[Camera Player] Stream url: ${ConnectionManager().httpWebHost}${data["url"]}");
videoPlayerController.dispose().then((_) => createPlayer(data)); if (videoPlayerController != null) {
} else { videoPlayerController.dispose().then((_) => createPlayer(data));
createPlayer(data); } else {
} createPlayer(data);
}) }
.catchError((e) => Logger.e("[Camera Player] $e")); })
.catchError((e) => Logger.e("[Camera Player] $e"));
} else {
streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
.entityId}?token=${_entity.attributes['access_token']}';
messageChannelName = 'HA_${_entity.entityId.replaceAll('.', '_')}';
rootBundle.loadString('assets/html/cameraView.html').then((file) {
htmlView = Uri.dataFromString(
file.replaceFirst('{{stream_url}}', streamUrl).replaceFirst('{{message_channel}}', messageChannelName),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString();
setState((){
started = true;
});
});
}
} }
void createPlayer(data) { void createPlayer(data) {
@ -48,7 +66,7 @@ class _CameraStreamViewState extends State<CameraStreamView> {
startMonitor(); startMonitor();
}).catchError((e) { }).catchError((e) {
Logger.e("[Camera Player] Error player init. Retrying"); Logger.e("[Camera Player] Error player init. Retrying");
loadStreamUrl(); loadResources();
}); });
} }
@ -80,12 +98,12 @@ class _CameraStreamViewState extends State<CameraStreamView> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
_entity = EntityModel if (!started) {
_entity = EntityModel
.of(context) .of(context)
.entityWrapper .entityWrapper
.entity; .entity;
if (_entity.supportStream && !started) { loadResources();
loadStreamUrl();
return buildLoading(); return buildLoading();
} else if (_entity.supportStream) { } else if (_entity.supportStream) {
if (videoPlayerController.value.initialized) { if (videoPlayerController.value.initialized) {
@ -97,19 +115,17 @@ class _CameraStreamViewState extends State<CameraStreamView> {
return buildLoading(); return buildLoading();
} }
} else { } else {
streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
.entityId}?token=${_entity.attributes['access_token']}';
return AspectRatio( return AspectRatio(
aspectRatio: aspectRatio, aspectRatio: aspectRatio,
child: WebView( child: WebView(
initialUrl: streamUrl, initialUrl: htmlView,
initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow, initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
debuggingEnabled: Logger.isInDebugMode, debuggingEnabled: Logger.isInDebugMode,
gestureNavigationEnabled: false, gestureNavigationEnabled: false,
javascriptMode: JavascriptMode.unrestricted, javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: { javascriptChannels: {
JavascriptChannel( JavascriptChannel(
name: 'HA_${_entity.entityId.replaceAll('.', '_')}', name: messageChannelName,
onMessageReceived: ((message) { onMessageReceived: ((message) {
setState((){ setState((){
aspectRatio = double.tryParse(message.message) ?? 1.33; aspectRatio = double.tryParse(message.message) ?? 1.33;
@ -121,9 +137,9 @@ class _CameraStreamViewState extends State<CameraStreamView> {
webViewController = controller; webViewController = controller;
}, },
onPageStarted: (url) { onPageStarted: (url) {
rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){ /*rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){
webViewController.evaluateJavascript(js.replaceFirst('entity_id_placeholder', _entity.entityId.replaceAll('.', '_'))); webViewController.evaluateJavascript(js.replaceFirst('entity_id_placeholder', _entity.entityId.replaceAll('.', '_')));
}); });*/
}, },
), ),
); );

3
pubspec.yaml
View File

@ -5,7 +5,7 @@ version: 0.8.0+880
environment: environment:
sdk: ">=2.0.0-dev.68.0 <3.0.0" sdk: ">=2.2.0 <3.0.0"
dependencies: dependencies:
flutter: flutter:
@ -52,6 +52,7 @@ flutter:
- images/hassio-192x192.png - images/hassio-192x192.png
- assets/js/externalAuth.js - assets/js/externalAuth.js
- assets/js/cameraImgViewHelper.js - assets/js/cameraImgViewHelper.js
- assets/html/cameraView.html
fonts: fonts:
- family: "Material Design Icons" - family: "Material Design Icons"