Resolves #420 Camera view on entity page

assets/js/cameraImgViewHelper.js

@@ -0,0 +1,18 @@
+function fixCameraImgView() {
+    var img = document.getElementsByTagName('img');
+
+    if (img && img.length) {
+        img[0].setAttribute('width', document.body.clientWidth);
+        img[0].setAttribute('style', 'margin-top: ' + ((document.body.clientHeight - img[0].offsetHeight) / 2));
+    }
+    var ovrl = document.getElementById('appOverlay');
+    if (ovrl) {
+        ovrl.remove();
+    }
+}
+
+window.bodyDetectInterval = setInterval(function() {
+    if (document.body != null) {
+        setTimeout(fixCameraImgView, 1000);
+    }
+}, 100);

lib/entities/camera/widgets/camera_stream_view.dart

@@ -16,8 +16,8 @@ class _CameraStreamViewState extends State<CameraStreamView> {
   }
 
   CameraEntity _entity;
-  bool started = false;
   String streamUrl = "";
+  WebViewController webViewController;
 
   launchStream() {
     Launcher.launchURLInCustomTab(
@@ -28,26 +28,28 @@ class _CameraStreamViewState extends State<CameraStreamView> {
 
   @override
   Widget build(BuildContext context) {
-    if (!started) {
-      _entity = EntityModel
+    _entity = EntityModel
           .of(context)
           .entityWrapper
           .entity;
-      started = true;
-    }
     streamUrl = '${ConnectionManager().httpWebHost}/api/camera_proxy_stream/${_entity
         .entityId}?token=${_entity.attributes['access_token']}';
-    return Column(
-      children: <Widget>[
-        Container(
-            padding: const EdgeInsets.all(20.0),
-            child: IconButton(
-              icon: Icon(MaterialDesignIcons.getIconDataFromIconName("mdi:monitor-screenshot"), color: Colors.amber),
-              iconSize: 50.0,
-              onPressed: () => launchStream(),
-            )
-        )
-      ],
+    return AspectRatio(
+      aspectRatio: 1.33,
+      child: WebView(
+        initialUrl: streamUrl,
+        initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
+        debuggingEnabled: Logger.isInDebugMode,
+        javascriptMode: JavascriptMode.unrestricted,
+        onWebViewCreated: (WebViewController controller) {
+          webViewController = controller;
+        },
+        onPageStarted: (url) {
+          rootBundle.loadString('assets/js/cameraImgViewHelper.js').then((js){
+            webViewController.evaluateJavascript(js);
+          });
+        },
+      ),
     );
   }
 

lib/main.dart

@@ -30,6 +30,7 @@ import 'package:geolocator/geolocator.dart';
 import 'package:battery/battery.dart';
 import 'package:firebase_crashlytics/firebase_crashlytics.dart';
 import 'package:flutter_webview_plugin/flutter_webview_plugin.dart' as standaloneWebview;
+import 'package:webview_flutter/webview_flutter.dart';
 
 import 'utils/logger.dart';
 

pubspec.yaml

@@ -22,6 +22,7 @@ dependencies:
   in_app_purchase: ^0.3.0+3
   flutter_custom_tabs: ^0.6.0
   flutter_webview_plugin: ^0.3.10+1
+  webview_flutter: ^0.3.19+7
   firebase_messaging: ^6.0.9
   flutter_secure_storage: ^3.3.1+1
   device_info: ^0.4.1+4
@@ -49,6 +50,7 @@ flutter:
   assets:
     - images/hassio-192x192.png
     - assets/js/externalAuth.js
+    - assets/js/cameraImgViewHelper.js
 
   fonts:
     - family: "Material Design Icons"