Replace VideoPlayer with web player

2020-04-08 16:48:13 +00:00
parent 08ee3f3d80
commit e18b9ebe14
4 changed files with 74 additions and 79 deletions
--- a/assets/html/cameraLiveView.html
+++ b/assets/html/cameraLiveView.html
@ -0,0 +1,61 @@
+<html>
+<head>
+<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
+<style>
+    body {
+        padding: 0;
+        margin: 0;
+        widows: 100%;
+        height: 100%;
+    }
+
+    video {
+        width: 100%;
+    }
+</style>
+<script>
+    var messageChannel = '{{message_channel}}';
+</script>
+</head>
+<body>
+<video id="screen" width="100%" controls></video>
+<script>
+if (Hls.isSupported()) {
+    var video = document.getElementById('screen');
+    var hls = new Hls();
+    hls.on(Hls.Events.ERROR, function (event, data) {
+            if (data.fatal) {
+            switch(data.type) {
+            case Hls.ErrorTypes.NETWORK_ERROR:
+            // try to recover network error
+                console.log("fatal network error encountered, try to recover");
+                hls.startLoad();
+                break;
+            case Hls.ErrorTypes.MEDIA_ERROR:
+                console.log("fatal media error encountered, try to recover");
+                hls.recoverMediaError();
+                break;
+            default:
+            // cannot recover
+                hls.destroy();
+                break;
+            }
+            }
+        });
+    // bind them together
+    hls.attachMedia(video);
+    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+        console.log("video and hls.js are now bound together !");
+        hls.loadSource("{{stream_url}}");
+        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+            console.log("manifest loaded, found " + data.levels.length + " quality level");
+            video.play();
+            video.onloadedmetadata = function() {
+                window[messageChannel].postMessage(document.body.clientWidth / video.offsetHeight);
+            };
+        });
+    });
+}
+</script>
+</body>
+</html>