Initial commit

2022-08-18 09:19:00 +03:00
commit 3e77835583
65 changed files with 6372 additions and 0 deletions
@@ -0,0 +1,49 @@
+# HTML5
+
+**1. Autoplay video tag**
+
+[Video auto play is not working](https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser)
+
+> Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too
+
+```html
+
+<video id="video" autoplay controls playsinline muted></video>
+```
+
+**2. [Safari] pc.createOffer**
+
+Don't work in Desktop Safari:
+
+```js
+pc.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true})
+```
+
+Should be replaced with:
+
+```js
+pc.addTransceiver('video', {direction: 'recvonly'});
+pc.addTransceiver('audio', {direction: 'recvonly'});
+pc.createOffer();
+```
+
+**3. pc.ontrack**
+
+TODO
+
+```js
+pc.ontrack = ev => {
+    const video = document.getElementById('video');
+
+    // when audio track not exist in Chrome
+    if (ev.streams.length === 0) return;
+
+    // when audio track not exist in Firefox
+    if (ev.streams[0].id[0] === '{') return;
+
+    // when stream already init
+    if (video.srcObject !== null) return;
+
+    video.srcObject = ev.streams[0];
+}
+```
@@ -0,0 +1,59 @@
+<!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%;
+        }
+    </style>
+</head>
+<body>
+<div id="out"></div>
+<script>
+    const out = document.getElementById("out");
+
+    const print = (name, caps) => {
+        out.innerText += name + "\n";
+        caps.codecs.forEach((codec) => {
+            out.innerText += [codec.mimeType, codec.channels, codec.clockRate, codec.sdpFmtpLine] + "\n";
+        });
+        out.innerText += "\n";
+    }
+
+    if (RTCRtpReceiver.getCapabilities) {
+        print("receiver video", RTCRtpReceiver.getCapabilities("video"));
+        print("receiver audio", RTCRtpReceiver.getCapabilities("audio"));
+        print("sender video", RTCRtpSender.getCapabilities("video"));
+        print("sender audio", RTCRtpSender.getCapabilities("audio"));
+    }
+
+    const types = [
+        'video/mp4; codecs="avc1.42401E"',
+        'video/mp4; codecs="avc1.42C01E"',
+        'video/mp4; codecs="avc1.42E01E"',
+        'video/mp4; codecs="avc1.42001E"',
+        'video/mp4; codecs="avc1.4D401E"',
+        'video/mp4; codecs="avc1.4D001E"',
+        'video/mp4; codecs="avc1.640032"',
+        'video/mp4; codecs="avc1.640C32"',
+        'video/mp4; codecs="avc1.F4001F"',
+        'video/mp4; codecs="hvc1.016000"',
+    ];
+
+    const video = document.createElement("video");
+    out.innerText += "video.canPlayType\n";
+    types.forEach(type => {
+        out.innerText += type + "=" + (video.canPlayType(type) ? "true" : "false") + "\n";
+    })
+
+</script>
+</body>
+</html>
@@ -0,0 +1,43 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>go2rtc</title>
+</head>
+<body>
+<div id="header"></div>
+<table id="items"></table>
+<script>
+    const baseUrl = location.origin + location.pathname.substr(
+        0, location.pathname.lastIndexOf("/")
+    );
+
+    const header = document.getElementById('header');
+    header.innerHTML = `<a href="api/stats">stats</a>` +
+        `<a href="webcam.html?url=webcam">webcam</a>`;
+
+    const links = [
+        '<a href="webrtc-async.html?url={name}">webrtc-async</a>',
+        '<a href="webrtc-sync.html?url={name}">webrtc-sync</a>',
+        '<a href="mse.html?url={name}">mse</a>',
+    ];
+
+    fetch(`${baseUrl}/api/stats`).then(r => {
+        r.json().then(data => {
+            const content = document.getElementById('items');
+
+            for (let name in data.streams) {
+                let html = `<tr><td>${name || 'default'}</td>`;
+                links.forEach(link => {
+                    html += `<td>${link.replace('{name}', name)}</td>`
+                })
+                html += `</tr>`;
+                content.innerHTML += html
+            }
+        });
+    })
+</script>
+</body>
+</html>
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>go2rtc - MSE</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html, body {
+            height: 100%;
+            width: 100%;
+        }
+
+        #video {
+            width: 100%;
+            height: 100%;
+            background: black;
+        }
+    </style>
+</head>
+<body>
+<!-- muted is important for autoplay -->
+<video id="video" autoplay controls playsinline muted></video>
+<script>
+    const video = document.querySelector('#video');
+
+    // support api_path
+    const baseUrl = location.origin + location.pathname.substr(
+        0, location.pathname.lastIndexOf("/")
+    );
+    const ws = new WebSocket(`ws${baseUrl.substr(4)}/api/ws${location.search}`);
+    ws.binaryType = "arraybuffer";
+
+    let mediaSource;
+
+    ws.onopen = () => {
+        console.log("Start WS");
+
+        // https://web.dev/i18n/en/fast-playback-with-preload/#manual_buffering
+        // https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API
+        mediaSource = new MediaSource();
+        video.src = URL.createObjectURL(mediaSource);
+        mediaSource.onsourceopen = () => {
+            console.debug("mediaSource.onsourceopen");
+
+            mediaSource.onsourceopen = null;
+            URL.revokeObjectURL(video.src);
+            ws.send(JSON.stringify({"type": "mse"}));
+        };
+    };
+
+    let sourceBuffer, queueBuffer = [];
+
+    ws.onmessage = ev => {
+        if (typeof ev.data === 'string') {
+            const data = JSON.parse(ev.data);
+            console.debug("ws.onmessage", data);
+
+            if (data.type === "mse") {
+                sourceBuffer = mediaSource.addSourceBuffer(
+                    `video/mp4; codecs="${data.value}"`
+                );
+                // important: segments supports TrackFragDecodeTime
+                // sequence supports only TrackFragRunEntry Duration
+                sourceBuffer.mode = "segments";
+                sourceBuffer.onupdateend = () => {
+                    if (!sourceBuffer.updating && queueBuffer.length > 0) {
+                        sourceBuffer.appendBuffer(queueBuffer.shift());
+                    }
+                }
+            }
+        } else {
+            if (sourceBuffer.updating) {
+                queueBuffer.push(ev.data)
+            } else {
+                sourceBuffer.appendBuffer(ev.data);
+            }
+        }
+    }
+
+    let offsetTime = 1, noWaiting = 0;
+
+    setInterval(() => {
+        if (video.paused || video.seekable.length === 0) return;
+
+        if (noWaiting < 0) {
+            offsetTime = Math.min(offsetTime * 1.1, 5);
+            console.debug("offset time up:", offsetTime);
+        } else if (noWaiting >= 30) {
+            noWaiting = 0;
+            offsetTime = Math.max(offsetTime * 0.9, 0.5);
+            console.debug("offset time down:", offsetTime);
+        }
+        noWaiting += 1;
+
+        const endTime = video.seekable.end(video.seekable.length - 1);
+        let playbackRate = (endTime - video.currentTime) / offsetTime;
+        if (playbackRate < 0.1) {
+            // video.currentTime = endTime - offsetTime;
+            playbackRate = 0.1;
+        } else if (playbackRate > 10) {
+            // video.currentTime = endTime - offsetTime;
+            playbackRate = 10;
+        }
+        // https://github.com/GoogleChrome/developer.chrome.com/issues/135
+        video.playbackRate = playbackRate;
+    }, 1000);
+
+    video.onwaiting = () => {
+        const endTime = video.seekable.end(video.seekable.length - 1);
+        video.currentTime = endTime - offsetTime;
+        noWaiting = -1;
+    }
+</script>
+</body>
+</html>
@@ -0,0 +1,124 @@
+<!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>
+    <!-- Fix bugs for example with Safari... -->
+<!--    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>-->
+</head>
+<body>
+<!-- muted is important for autoplay -->
+<video id="video" autoplay controls playsinline muted></video>
+<script>
+    function init(stream) {
+        // support api_path
+        const baseUrl = location.origin + location.pathname.substr(
+            0, location.pathname.lastIndexOf("/")
+        );
+
+        const ws = new WebSocket(`ws${baseUrl.substr(4)}/api/ws${location.search}`);
+        ws.onopen = () => {
+            console.debug('ws.onopen');
+
+            pc.createOffer({
+                // this is adds two media to SDP with recvonly direction
+                // offerToReceiveAudio: true,
+                // offerToReceiveVideo: true,
+            }).then(offer => {
+                pc.setLocalDescription(offer).then(() => {
+                    console.log(offer.sdp);
+                    const msg = {type: 'webrtc/offer', value: pc.localDescription.sdp};
+                    ws.send(JSON.stringify(msg));
+                });
+            });
+        }
+        ws.onmessage = ev => {
+            const msg = JSON.parse(ev.data);
+            console.debug('ws.onmessage', msg);
+
+            if (msg.type === 'webrtc/candidate') {
+                pc.addIceCandidate({candidate: msg.value, sdpMid: ''});
+            } else if (msg.type === 'webrtc/answer') {
+                pc.setRemoteDescription({type: 'answer', sdp: msg.value});
+                pc.getTransceivers().forEach(t => {
+                    if (t.receiver.track.kind === 'audio') {
+                        t.currentDirection
+                    }
+                })
+            }
+        }
+
+        const pc = new RTCPeerConnection({
+            iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
+        });
+        pc.onicecandidate = ev => {
+            console.debug("pc.onicecandidate", ev.candidate);
+
+            if (ev.candidate !== null) {
+                ws.send(JSON.stringify({
+                    type: 'webrtc/candidate', value: ev.candidate.toJSON().candidate
+                }));
+            }
+        }
+        pc.ontrack = ev => {
+            const video = document.getElementById('video');
+            console.debug('pc.ontrack', video.srcObject !== null);
+
+            // when audio track not exist in Chrome
+            if (ev.streams.length === 0) return;
+
+            // when audio track not exist in Firefox
+            if (ev.streams[0].id[0] === '{') return;
+
+            // when stream already init
+            if (video.srcObject !== null) return;
+
+            video.srcObject = ev.streams[0];
+        }
+
+        // Safari don't support "offerToReceiveVideo"
+        // so need to create transeivers manually
+        pc.addTransceiver('video', {direction: 'recvonly'});
+        pc.addTransceiver('audio', {direction: 'recvonly'});
+
+        if (stream) {
+            stream.getTracks().forEach(track => {
+                const sender = pc.addTrack(track, stream)
+                // track.stop();
+                // setTimeout(() => {
+                //     navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
+                //         stream.getTracks().forEach(track => {
+                //             sender.replaceTrack(track);
+                //         });
+                //     });
+                // }, 10000);
+            });
+        }
+    }
+
+    if (navigator.mediaDevices) {
+        navigator.mediaDevices.getUserMedia({audio: true}).then(init).catch(() => init());
+    } else {
+        init();
+    }
+</script>
+</body>
+</html>
@@ -0,0 +1,64 @@
+<!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>
+<!-- muted is important for autoplay -->
+<video id="video" autoplay controls playsinline muted></video>
+<script>
+    // support api_path
+    let baseUrl = location.origin + location.pathname.substr(
+        0, location.pathname.lastIndexOf("/")
+    );
+
+    let pc = new RTCPeerConnection({
+        iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
+    });
+    pc.onicegatheringstatechange = async () => {
+        if (pc.iceGatheringState !== 'complete') return;
+
+        let r = await fetch(`${baseUrl}/api/webrtc${location.search}`, {
+            method: 'POST', body: pc.localDescription.sdp,
+        });
+        await pc.setRemoteDescription({
+            type: 'answer', sdp: await r.text()
+        });
+    }
+    pc.ontrack = ev => {
+        let video = document.getElementById('video');
+        if (video.srcObject === null) {
+            video.srcObject = ev.streams[0];
+        }
+    }
+
+    pc.addTransceiver('video');
+    pc.addTransceiver('audio');
+
+    pc.createOffer({
+        offerToReceiveVideo: true, offerToReceiveAudio: true
+    }).then(offer => {
+        pc.setLocalDescription(offer);
+    });
+</script>
+</body>
+</html>