Add MediaRecorder tests

jyavenard · Oct 7, 2024 · 8f3696b · 8f3696b
1 parent 29acea7
commit 8f3696b
Show file tree

Hide file tree

Showing 2 changed files with 185 additions and 69 deletions.
diff --git a/tests/MediaRecorder/index.html b/tests/MediaRecorder/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>MediaRecorder test</title>
+  <script>
+    function log(msg)
+    {
+        divLog.innerHTML += msg + "<br>";
+    }
+
+    async function doEncode(mimeType, suffix)
+    {
+        try {
+        log("capturing");
+        let options = { };
+        if (!videocheck.checked && !audiocheck.checked)
+            videocheck.checked = true;
+        if (videocheck.checked)
+            options['video'] = true;
+        if (audiocheck.checked)
+            options['audio'] = true;
+        const stream = await navigator.mediaDevices.getUserMedia(options);
+        let blobs = [];
+        const recorder = new MediaRecorder(stream, { mimeType });
+        download.querySelector('button').disabled = true;
+        recorder.start();
+        recorder.ondataavailable = e => {
+            blobs.push(e.data);
+            log("resulting mime type: " + e.data.type);
+            console.log(e.data);
+        }
+        recorder.onstop = () => {
+            let url = URL.createObjectURL(new Blob(blobs, {type: mimeType}));
+            video.src = url;
+            download.href = url;
+            download.download = "file." + suffix;
+            download.querySelector('button').disabled = false;
+            log("playing video");
+        };
+        log("recording");
+        await new Promise(resolve => setTimeout(resolve, 5000));
+        log("stopping");
+        recorder.stop();    
+        } catch (e) {
+            log("error " + e);
+        }
+    }
+
+    window.onload = () => {
+        testH264.onclick = () => {
+            doEncode("video/mp4;codecs=avc1.42e01e", "mp4");
+        }
+
+        testH265.onclick = () => {
+            doEncode("video/mp4;codecs=hev1", "mp4");
+        }
+
+        testWebm.onclick = () => {
+            doEncode("video/webm", "webm");
+        } 
+        testWebmvp9.onclick = () => {
+            doEncode("video/webm; codecs=\"vp9.0\"", "webm");
+        }
+    }
+    </script>
+<body>
+    <h1>Media Recorder demo</h1>
+    <button id=testH264>test H264</button>
+    <br>
+    <button id=testH265>test H265</button>
+    <br>
+    <button id=testWebm>test webm vp8</button><button id=testWebmvp9>test webm vp9</button>
+
+    <br>
+    <input type="checkbox" id="videocheck" checked><label for="videocheck">video</label>
+    <input type="checkbox" id="audiocheck"><label for="audiocheck">audio</label>
+    <br>
+    <video id=video autoplay playsinline width=300px controls></video>
+    <br>
+    <a id="download"><button disabled>download</button></a>
+    <br>
+    <div id=divLog></div>
+</body>
+</html>