Replace MP4 stream mode to HLS mode

www/README.md

@@ -11,6 +11,8 @@
 <video id="video" autoplay controls playsinline muted></video>
 ```
 
+- https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari/
+
 **2. [Safari] pc.createOffer**
 
 Don't work in Desktop Safari:

www/index.html

@@ -63,7 +63,7 @@
     <button>stream</button>
     <label><input type="checkbox" name="webrtc" checked>webrtc</label>
     <label><input type="checkbox" name="mse" checked>mse</label>
-    <label><input type="checkbox" name="mp4" checked>mp4</label>
+    <label><input type="checkbox" name="hls" checked>hls</label>
     <label><input type="checkbox" name="mjpeg" checked>mjpeg</label>
 </div>
 <table>

www/video-rtc.js

@@ -32,10 +32,10 @@ export class VideoRTC extends HTMLElement {
         ];
 
         /**
-         * [config] Supported modes (webrtc, mse, mp4, mjpeg).
+         * [config] Supported modes (webrtc, mse, hls, mp4, mjpeg).
          * @type {string}
          */
-        this.mode = "webrtc,mse,mp4,mjpeg";
+        this.mode = "webrtc,mse,hls,mjpeg";
 
         /**
          * [config] Run stream when not displayed on the screen. Default `false`.
@@ -324,6 +324,9 @@ export class VideoRTC extends HTMLElement {
         if (this.mode.indexOf("mse") >= 0 && "MediaSource" in window) { // iPhone
             modes.push("mse");
             this.onmse();
+        } else if (this.mode.indexOf("hls") >= 0 && this.video.canPlayType("application/vnd.apple.mpegurl")) {
+            modes.push("hls");
+            this.onhls();
         } else if (this.mode.indexOf("mp4") >= 0) {
             modes.push("mp4");
             this.onmp4();
@@ -554,6 +557,17 @@ export class VideoRTC extends HTMLElement {
         this.send({type: "mjpeg"});
     }
 
+    onhls() {
+        this.onmessage["hls"] = msg => {
+            const url = "http" + this.wsURL.substring(2, this.wsURL.indexOf("/ws")) + "/hls/";
+            const playlist = msg.value.replace("hls/", url);
+            this.video.src = "data:application/vnd.apple.mpegurl;base64," + btoa(playlist);
+            this.play();
+        }
+
+        this.send({type: "hls", value: this.codecs("hls")});
+    }
+
     onmp4() {
         /** @type {HTMLCanvasElement} **/
         const canvas = document.createElement("canvas");

www/video-stream.js

@@ -70,6 +70,7 @@ class VideoStream extends VideoRTC {
                     this.divError = msg.value;
                     break;
                 case "mse":
+                case "hls":
                 case "mp4":
                 case "mjpeg":
                     this.divMode = msg.type.toUpperCase();