From 7bc16703827cf34ec7da97f1673c3b2072f7e0f7 Mon Sep 17 00:00:00 2001
From: deflax <daniel@deflax.net>
Date: Mon, 11 Oct 2021 18:50:37 +0000
Subject: [PATCH] attempt to use hls.js instead

---
 frontend/Dockerfile                           |  5 +--
 frontend/app/templates/default/player.html.j2 | 36 ++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index a7ffbd4..93db403 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -14,8 +14,9 @@ RUN chmod 644 /code/static/flv.min.js
 RUN mkdir -p /tmp/hls.js && \
     cd /tmp/hls.js && \
     wget -O hls.js.zip https://github.com/video-dev/hls.js/releases/download/v1.0.11/release.zip && \
-    unzip hls.js.zip
-ADD /tmp/hls.js/dist/hls.min.js /code/static/hls.min.js
+    unzip hls.js.zip && \
+    cp dist/hls.min.js /code/static/hls.min.js
+RUN chmod 644 /code/static/hls.min.js
 
 USER nobody
 WORKDIR /code
diff --git a/frontend/app/templates/default/player.html.j2 b/frontend/app/templates/default/player.html.j2
index 281e365..faa1781 100644
--- a/frontend/app/templates/default/player.html.j2
+++ b/frontend/app/templates/default/player.html.j2
@@ -15,18 +15,30 @@
     <video id="player" controls>
     </video>
 </div>
-<script src="{{ url_for('static', filename='flv.min.js') }}"></script>
-<script type="application/javascript">
-    if (flvjs.isSupported()) {
-        var videoElement = document.getElementById('player');
-        var flvPlayer = flvjs.createPlayer({
-            type: 'flv',
-            url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
-        });
-        flvPlayer.attachMediaElement(videoElement);
-        flvPlayer.load();
-        flvPlayer.play();
-    }
+<script src="{{ url_for('static', filename='hls.min.js') }}"></script>
+<script>
+  var video = document.getElementById('video');
+  if (Hls.isSupported()) {
+    var hls = new Hls({
+      debug: true,
+    });
+    hls.loadSource("{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8');
+    hls.attachMedia(video);
+    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+      video.muted = true;
+      video.play();
+    });
+  }
+  // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
+  // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
+  // This is using the built-in support of the plain video element, without using hls.js.
+  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = "{{ configuration['web_proto'] }}://{{ configuration['base_url'] }}/hls/{{ streamname }}/index.m3u8'";
+    video.addEventListener('canplay', function () {
+      video.play();
+    });
+  }
+//url: '{{ configuration["web_proto"] }}://{{ configuration["base_url"] }}/flv?app={{ appname }}&stream={{ streamname }}'
 </script>
 </body>
 </html>