Rewrite WS+MP4 format to keyframes stream

cmd/mp4/ws.go

@@ -68,7 +68,7 @@ func handlerWSMP4(tr *api.Transport, msg *api.Message) error {
 		return errors.New(api.StreamNotFound)
 	}
 
-	cons := &mp4.Segment{}
+	cons := &mp4.Segment{OnlyKeyframe: true}
 
 	if codecs, ok := msg.Value.(string); ok {
 		log.Trace().Str("codecs", codecs).Msgf("[mp4] new WS/MP4 consumer")

www/video-rtc.js

@@ -228,16 +228,12 @@ export class VideoRTC extends HTMLElement {
         this.video.playsInline = true;
         this.video.preload = "auto";
 
-        this.appendChild(this.video);
-
-        // important for second video for mode MP4
-        this.style.display = "block";
-        this.style.position = "relative";
-
         this.video.style.display = "block"; // fix bottom margin 4px
         this.video.style.width = "100%";
         this.video.style.height = "100%"
 
+        this.appendChild(this.video);
+
         if (this.background) return;
 
         if ("hidden" in document && this.visibilityCheck) {
@@ -547,46 +543,42 @@ export class VideoRTC extends HTMLElement {
 
     onmjpeg() {
         this.ondata = data => {
+            this.video.controls = false;
             this.video.poster = "data:image/jpeg;base64," + VideoRTC.btoa(data);
         };
 
         this.send({type: "mjpeg"});
-        this.video.controls = false;
     }
 
     onmp4() {
-        /** @type {HTMLVideoElement} */
-        let video2;
+        /** @type {HTMLCanvasElement} **/
+        const canvas = document.createElement("canvas");
+        /** @type {CanvasRenderingContext2D} */
+        let context;
 
-        this.ondata = data => {
-            // first video with default position (set container size)
-            // second video with position=absolute and top=0px
-            if (video2) {
-                this.removeChild(this.video);
-                this.video.src = "";
-                this.video = video2;
-                video2.style.position = "";
-                video2.style.top = "";
+        /** @type {HTMLVideoElement} */
+        const video2 = document.createElement("video");
+        video2.autoplay = true;
+        video2.muted = true;
+
+        video2.addEventListener("loadeddata", ev => {
+            if (!context) {
+                canvas.width = video2.videoWidth;
+                canvas.height = video2.videoHeight;
+                context = canvas.getContext('2d');
             }
 
-            video2 = this.video.cloneNode();
-            video2.style.position = "absolute";
-            video2.style.top = "0px";
-            this.appendChild(video2);
+            context.drawImage(video2, 0, 0, canvas.width, canvas.height);
 
-            video2.src = "data:video/mp4;base64," + VideoRTC.btoa(data);
-            video2.play().catch(() => console.log);
-        };
-
-        this.ws.addEventListener("close", () => {
-            if (!video2) return;
-
-            this.removeChild(video2);
-            video2.src = "";
+            this.video.controls = false;
+            this.video.poster = canvas.toDataURL("image/jpeg");
         });
 
+        this.ondata = data => {
+            video2.src = "data:video/mp4;base64," + VideoRTC.btoa(data);
+        };
+
         this.send({type: "mp4", value: this.codecs("mp4")});
-        this.video.controls = false;
     }
 
     static btoa(buffer) {

www/video-stream.js

@@ -22,6 +22,9 @@ class VideoStream extends VideoRTC {
 
         this.innerHTML = `
         <style>
+        video-stream {
+            position: relative;
+        }
         .info {
             position: absolute;
             top: 0;