fix auth for HLS

mrlt8 · Jun 14, 2024 · 589f334 · 589f334
1 parent 9d6a1be
commit 589f334
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/app/static/site.js b/app/static/site.js
@@ -336,8 +336,9 @@ document.addEventListener("DOMContentLoaded", () => {
   document.querySelectorAll(".update-preview[data-cam]").forEach((button) => {
     button.addEventListener("click", async () => {
       let img = document.querySelector(`.refresh_img[data-cam=${button.getAttribute("data-cam")}]`);
-      if (img && img.getAttribute("src")) {
-        await update_img(img.getAttribute("src"));
+      let imgSrc = img.getAttribute(img.nodeName === "IMG" ? "src" : "poster");
+      if (img && imgSrc) {
+        await update_img(imgSrc);
       }
     });
   });
@@ -617,11 +618,17 @@ document.addEventListener("DOMContentLoaded", () => {
   })
   toggleFullscreen()
   function loadHLS(videoElement) {
-    const videoSrc = `${videoElement.dataset.src}stream.m3u8`;
+    const videoSrc = videoElement.dataset.src;
     videoElement.controls = true;
     videoElement.classList.remove("placeholder");
     if (Hls.isSupported()) {
-      const hls = new Hls({ maxLiveSyncPlaybackRate: 1.5 });
+      const hls = new Hls({ maxLiveSyncPlaybackRate: 1.5, liveDurationInfinity: true });
+      var parsedUrl = new URL(videoSrc);
+      if (parsedUrl.username && parsedUrl.password) {
+        hls.config.xhrSetup = function (xhr, url) {
+          xhr.setRequestHeader('Authorization', 'Basic ' + btoa(parsedUrl.username + ':' + parsedUrl.password));
+        };
+      }
       hls.on(Hls.Events.ERROR, (evt, data) => {
         if (data.fatal) { hls.destroy(); }
         if (data.type !== Hls.ErrorTypes.NETWORK_ERROR || videoElement.classList.contains("connected")) {

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -162,8 +162,10 @@
             <div class="card-image has-text-centered">
                 <figure class="image">
                     {% if show_video and (camera.on_demand or camera.enabled) %}
-                    {% set is_webrtc = webrtc and (video_format == "webrtc" or camera.webrtc and video_format == "kvs") %}
-                    <video data-cam="{{ cam_uri }}" {% if not is_webrtc %}data-src="{{ camera.hls_url }}" {% endif %}
+                    {% set is_webrtc = webrtc and (video_format == "webrtc" or camera.webrtc and video_format == "kvs")
+                    %}
+                    <video data-cam="{{ cam_uri }}" {% if not is_webrtc %}data-src="{{ camera.hls_url }}stream.m3u8" {%
+                        endif %}
                         class="{% if is_webrtc %}webrtc{% else %}hls{% endif %} loading-preview refresh_img placeholder {{ 'connected' if camera.connected }}"
                         muted playsinline {{ "autoplay" if autoplay and camera.connected else "preload=none" }}
                         poster="{{ camera.img_url or 'static/loading.svg' }}">
@@ -386,26 +388,27 @@
 {% endif %}
 {% endblock %}
 {% block javascript %}
-<script src="static/site.js"></script>
 {% if api %}
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
+    function addApiKey() {
         document.querySelectorAll('a.stream-link').forEach(function (link) {
             var href = link.getAttribute('href');
             var updatedHref = href.replace(/^(\w{4,5}):\/\//, function (match, protocol) {
                 return protocol + '://' + encodeURIComponent('wb') + ':' + encodeURIComponent('{{api}}') + '@';
             });
             link.setAttribute('href', updatedHref);
         });
-        document.querySelectorAll('source.hls-video').forEach(function (sourceElement) {
-            var updatedSrc = sourceElement.src.replace(/^https?:\/\//, function (match) {
+        document.querySelectorAll('video.hls').forEach(function (sourceElement) {
+            sourceElement.dataset.src = sourceElement.dataset.src.replace(/^https?:\/\//, function (match) {
                 return match + encodeURIComponent('wb') + ':' + encodeURIComponent('{{api}}') + '@';
             });
-            sourceElement.src = updatedSrc;
         });
-    });
+        document.removeEventListener('DOMContentLoaded', addApiKey);
+    }
+    document.addEventListener('DOMContentLoaded', addApiKey);
 </script>
 {% endif %}
+<script src="static/site.js"></script>
 {% if show_video %}
 {% if (webrtc and video_format == "webrtc") or video_format =="kvs" %}
 <script src="static/webrtc.js"></script>