Adds mp4 module

2022-09-09 19:31:52 +03:00
parent 76b352d67f
commit 8b54444c89
17 changed files with 568 additions and 339 deletions
@@ -51,4 +51,5 @@ pc.ontrack = ev => {
 ## Useful links

 - https://www.webrtc-experiment.com/DetectRTC/
- https://divtable.com/table-styler/
+- https://divtable.com/table-styler/
+- https://www.chromium.org/audio-video/
@@ -66,7 +66,9 @@
    const links = [
        '<a href="webrtc.html?src={name}">webrtc</a>',
        '<a href="mse.html?src={name}">mse</a>',
-        '<a href="api/frame.mp4?src={name}">frame.mp4</a>',
+        // '<a href="video.html?src={name}">video</a>',
+        '<a href="api/stream.mp4?src={name}">mp4</a>',
+        '<a href="api/frame.mp4?src={name}">frame</a>',
        '<a href="api/streams?src={name}">info</a>',
    ];

@@ -60,9 +60,7 @@
            console.debug("ws.onmessage", data);

            if (data.type === "mse") {
-                sourceBuffer = mediaSource.addSourceBuffer(
-                    `video/mp4; codecs="${data.value}"`
-                );
+                sourceBuffer = mediaSource.addSourceBuffer(data.value);
                // important: segments supports TrackFragDecodeTime
                // sequence supports only TrackFragRunEntry Duration
                sourceBuffer.mode = "segments";
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>go2rtc - WebRTC</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
+
+        #video {
+            /* video "container" size */
+            width: 100%;
+            height: 100%;
+            background: black;
+        }
+    </style>
+</head>
+<body>
+<video id="video" autoplay controls playsinline muted></video>
+<!--<video id="video" preload="auto" controls playsinline muted></video>-->
+<script>
+    const baseUrl = location.origin + location.pathname.substr(
+        0, location.pathname.lastIndexOf("/")
+    );
+    const video = document.getElementById('video');
+
+    video.oncanplay = ev => console.log(ev.type, ev);
+    video.onplaying = ev => console.log(ev.type, ev);
+    video.onwaiting = ev => console.log(ev.type, ev);
+    video.onseeking = ev => console.log(ev.type, ev);
+    video.onloadeddata = ev => console.log(ev.type, ev);
+    video.oncanplaythrough = ev => console.log(ev.type, ev);
+    // video.ondurationchange = ev => console.log(ev.type, ev);
+    // video.ontimeupdate = ev => console.log(ev.type, ev);
+    video.onplay = ev => console.log(ev.type, ev);
+    video.onpause = ev => console.log(ev.type, ev);
+    video.onsuspended = ev => console.log(ev.type, ev);
+    video.onemptied = ev => console.log(ev.type, ev);
+    video.onstalled = ev => console.log(ev.type, ev);
+
+    console.log("start");
+
+    video.src = baseUrl + "/api/stream.mp4" + location.search;
+</script>
+</body>
+</html>