From 6b2754c4ccc2439cd2898a06c7999b6d1fe1c35a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 10 Jun 2020 10:59:23 +0200
Subject: [PATCH] Prefer native hls support

---
 src/components/ha-camera-stream.ts | 34 ++++++++++++++++++------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts
index 90330b04cd..73c79ac5b8 100644
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -125,19 +125,23 @@ class HaCameraStream extends LitElement {
   }
 
   private async _startHls(): Promise<void> {
-    // eslint-disable-next-line
-    const Hls = ((await import(
-      /* webpackChunkName: "hls.js" */ "hls.js"
-    )) as any).default as HLSModule;
-    let hlsSupported = Hls.isSupported();
     const videoEl = this._videoEl;
 
-    if (!hlsSupported) {
-      hlsSupported =
-        videoEl.canPlayType("application/vnd.apple.mpegurl") !== "";
+    const nativeHlsSupported =
+      !!videoEl.canPlayType &&
+      (videoEl.canPlayType("application/vnd.apple.mpegURL") !== "" ||
+        videoEl.canPlayType("audio/mpegurl") !== "");
+
+    let hlsSupported = false;
+    let Hls: HLSModule | undefined;
+
+    if (!nativeHlsSupported) {
+      Hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
+        .default as HLSModule;
+      hlsSupported = Hls.isSupported();
     }
 
-    if (!hlsSupported) {
+    if (!nativeHlsSupported && !hlsSupported) {
       this._forceMJPEG = this.stateObj!.entity_id;
       return;
     }
@@ -148,10 +152,10 @@ class HaCameraStream extends LitElement {
         this.stateObj!.entity_id
       );
 
-      if (Hls.isSupported()) {
-        this._renderHLSPolyfill(videoEl, Hls, url);
-      } else {
+      if (nativeHlsSupported) {
         this._renderHLSNative(videoEl, url);
+      } else {
+        this._renderHLSPolyfill(videoEl, Hls!, url);
       }
       return;
     } catch (err) {
@@ -176,7 +180,11 @@ class HaCameraStream extends LitElement {
     Hls: HLSModule,
     url: string
   ) {
-    const hls = new Hls();
+    const hls = new Hls({
+      liveSyncDurationCount: 3,
+      liveBackBufferLength: 0,
+      liveDurationInfinity: true,
+    });
     this._hlsPolyfillInstance = hls;
     hls.attachMedia(videoEl);
     hls.on(Hls.Events.MEDIA_ATTACHED, () => {