Add mediacapture-transform demos

guidou · Nov 19, 2024 · d46ae78 · d46ae78
1 parent c847b12
commit d46ae78
Show file tree

Hide file tree

Showing 6 changed files with 257 additions and 0 deletions.
diff --git a/mct/chrome-main.html b/mct/chrome-main.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>mediacapture-transform.html preview demo</title>
+  </head>
+  <body>
+    <table>
+      <tr>
+        <th>Before</th>
+        <th>After</th>
+      </tr>
+      <tr>
+        <td><video id='original-video'></video></td>
+        <td><video id='processed-video'></video></td>
+      </tr>
+    </table>
+    <br>
+    <button onclick='startCapture()'>StartCapture</button><br>
+    <button onclick='stopCapture()'>Stop capture</button><br>
+    <br>
+    <br>
+    <label id="message-label"></label><br>
+
+    <script>
+let originalVideo = null;
+let processedVideo = null;
+let messageLabel = null;
+let worker = null;
+let track = null;
+let processedTrack = null;
+
+window.onload = onLoad;
+
+function updateStatus(newStatus) {
+  messageLabel.innerHTML = newStatus;
+}
+
+function onLoad() {
+  originalVideo = document.getElementById("original-video");
+  processedVideo = document.getElementById("processed-video");
+  messageLabel = document.getElementById("message-label");
+  worker = new Worker("chrome-worker.js");
+}
+
+async function startCapture() {
+  try {
+    let stream = await navigator.mediaDevices.getUserMedia({video:true});
+    originalVideo.srcObject = stream;
+    await originalVideo.play();
+    track = stream.getVideoTracks()[0];
+    updateStatus("Capture successful");
+    let processor = new MediaStreamTrackProcessor({track});
+    processedTrack = new MediaStreamTrackGenerator('video');
+    worker.postMessage({readable: processor.readable, writable: processedTrack.writable}, [processor.readable, processedTrack.writable]);
+    processedVideo.srcObject = new MediaStream([processedTrack]);
+    await processedVideo.play();
+  } catch(e) {
+    updateStatus("startCapture failed: " + e.name + ' ' + e.message);
+  }
+}
+
+function stopCapture() {
+  track.stop();
+  processedTrack.stop();
+  updateStatus("Stopped track");
+}
+    </script>
+  </body>
+</html>
diff --git a/mct/chrome-worker.js b/mct/chrome-worker.js
@@ -0,0 +1,12 @@
+function GetTransform() {
+    return new TransformStream({
+        async transform(frame, controller) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            controller.enqueue(frame);
+        },
+   });
+}
+
+onmessage = event => {
+    event.data.readable.pipeThrough(GetTransform()).pipeTo(event.data.writable);
+}
diff --git a/mct/proposed-main.html b/mct/proposed-main.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>mediacapture-transform.html preview demo</title>
+  </head>
+  <body>
+    <table>
+      <tr>
+        <th>Before</th>
+        <th>After</th>
+      </tr>
+      <tr>
+        <td><video id='original-video'></video></td>
+        <td><video id='processed-video'></video></td>
+      </tr>
+    </table>
+    <br>
+    <button onclick='startCapture()'>StartCapture</button><br>
+    <button onclick='stopCapture()'>Stop capture</button><br>
+    <br>
+    <br>
+    <label id="message-label"></label><br>
+
+    <script>
+let originalVideo = null;
+let processedVideo = null;
+let messageLabel = null;
+let worker = null;
+let track = null;
+let processedTrack = null;
+
+window.onload = onLoad;
+
+function updateStatus(newStatus) {
+  messageLabel.innerHTML = newStatus;
+}
+
+function onLoad() {
+  originalVideo = document.getElementById("original-video");
+  processedVideo = document.getElementById("processed-video");
+  messageLabel = document.getElementById("message-label");
+  worker = new Worker("chrome-worker.js");
+}
+
+async function startCapture() {
+  try {
+    let stream = await navigator.mediaDevices.getUserMedia({video:true});
+    originalVideo.srcObject = stream;
+    await originalVideo.play();
+    track = stream.getVideoTracks()[0];
+    updateStatus("Capture successful");
+    processedTrack = MediaDevices.createVideoTrackGeneratorAndProcessor(worker, track);
+    processedVideo.srcObject = new MediaStream([processedTrack]);
+    await processedVideo.play();
+  } catch(e) {
+    updateStatus("startCapture failed: " + e.name + ' ' + e.message);
+  }
+}
+
+function stopCapture() {
+  track.stop();
+  processedTrack.stop();
+  updateStatus("Stopped track");
+}
+    </script>
+  </body>
+</html>
diff --git a/mct/proposed-worker.js b/mct/proposed-worker.js
@@ -0,0 +1,13 @@
+function GetTransform() {
+    return new TransformStream({
+        async transform(frame, controller) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            controller.enqueue(frame);
+        },
+    });
+}
+
+oncapturetransform = event => {
+    event.processor.readable.pipeThrough(GetTransform()).pipeTo(event.generator.writable);
+
+}
diff --git a/mct/spec-main.html b/mct/spec-main.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>mediacapture-transform.html preview demo</title>
+  </head>
+  <body>
+    <table>
+      <tr>
+        <th>Before</th>
+        <th>After</th>
+      </tr>
+      <tr>
+        <td><video id='original-video'></video></td>
+        <td><video id='processed-video'></video></td>
+      </tr>
+    </table>
+    <br>
+    <button onclick='startCapture()'>StartCapture</button><br>
+    <button onclick='stopCapture()'>Stop capture</button><br>
+    <br>
+    <br>
+    <label id="message-label"></label><br>
+
+    <script>
+let originalVideo = null;
+let processedVideo = null;
+let messageLabel = null;
+let worker = null;
+let track = null;
+
+window.onload = onLoad;
+
+function updateStatus(newStatus) {
+  messageLabel.innerHTML = newStatus;
+}
+
+function onLoad() {
+  originalVideo = document.getElementById("original-video");
+  processedVideo = document.getElementById("processed-video");
+  messageLabel = document.getElementById("message-label");
+  worker = new Worker("spec-worker.js");
+
+  worker.onmessage = async event => {
+    if (event.data.command == "processed-track") {
+      let stream = new MediaStream([event.data.param]);
+      processedVideo.srcObject = stream;
+      await processedVideo.play()
+      updateStatus("Processing track");
+    } else if (event.data.command == "stopped-track") {
+      track.stop();
+      updateStatus("Stopped track");
+    }
+  }
+}
+
+async function startCapture() {
+  try {
+    let stream = await navigator.mediaDevices.getUserMedia({video:{width:640, height:480}});
+    originalVideo.srcObject = stream;
+    await originalVideo.play()
+    track = stream.getVideoTracks()[0];
+    let cloneTrack = track.clone();
+    updateStatus("Capture successful");
+    worker.postMessage({command: "process-track", param: cloneTrack}, [cloneTrack]);
+  } catch(e) {
+    updateStatus("startCapture failed: " + e.name + ' ' + e.message);
+  }
+}
+
+function stopCapture() {
+  worker.postMessage({command: "stop-track"}, [track]);
+  updateStatus("Stopping capture");
+}
+    </script>
+  </body>
+</html>
diff --git a/mct/spec-worker.js b/mct/spec-worker.js
@@ -0,0 +1,20 @@
+let track = null;
+function GetTransform() {
+    return new TransformStream({
+        async transform(frame, controller) {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            controller.enqueue(frame);        },
+    });
+}
+onmessage = event => {
+    if (event.data.command == "process-track") {
+        track = event.data.param;
+        let processor = new MediaStreamTrackProcessor({track});
+        let generator = new VideoTrackGenerator();
+        processor.readable.pipeThrough(GetTransform()).pipeTo(generator.writable);
+        postMessage({command: "processed-track", param: generator.track}, [generator.track]);
+    } else if (event.data.command == "stop-track") {
+        track.stop();
+        postMessage({command: "stopped-track"});
+    }
+}