From 3e254b724de872bb921182bcdb4b579ca0d15bc3 Mon Sep 17 00:00:00 2001
From: jeromewu <jeromewus@gmail.com>
Date: Sun, 10 Nov 2019 03:57:05 +0000
Subject: [PATCH] Add webcam example

---
 examples/browser/run.html       |  2 +-
 examples/browser/transcode.html |  2 +-
 examples/browser/webcam.html    | 75 +++++++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 examples/browser/webcam.html
diff --git a/examples/browser/run.html b/examples/browser/run.html
index 40ac972..dbb0c97 100644
--- a/examples/browser/run.html
+++ b/examples/browser/run.html
@@ -18,7 +18,7 @@
     <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
     <video id="output-video" controls></video><br/>
     <input type="file" id="uploader">
-    <p id="message" />
+    <p id="message"></p>
     <script>
       const { createWorker } = FFmpeg;
       const worker = createWorker({
diff --git a/examples/browser/transcode.html b/examples/browser/transcode.html
index 55febb4..3fa215f 100644
--- a/examples/browser/transcode.html
+++ b/examples/browser/transcode.html
@@ -18,7 +18,7 @@
     <h3>Upload a video to transcode to mp4 (x264) and play!</h3>
     <video id="output-video" controls></video><br/>
     <input type="file" id="uploader">
-    <p id="message" />
+    <p id="message"></p>
     <script>
       const { createWorker } = FFmpeg;
       const worker = createWorker({
diff --git a/examples/browser/webcam.html b/examples/browser/webcam.html
new file mode 100644
index 0000000..db348d3
--- /dev/null
+++ b/examples/browser/webcam.html
@@ -0,0 +1,75 @@
+<html>
+  <head>
+    <script src="/dist/ffmpeg.dev.js"></script>
+    <style>
+      html, body {
+        margin: 0;
+        width: 100%;
+        height: 100%
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Record video from webcam and transcode to mp4 (x264) and play!</h3>
+    <div>
+      <video id="webcam" width="320px" height="180px"></video>
+      <video id="output-video" width="320px" height="180px" controls></video>
+    </div>
+    <button id="record" disabled>Start Recording</button>
+    <p id="message"></p>
+    <script>
+      const { createWorker } = FFmpeg;
+      const worker = createWorker({
+        corePath: '../../node_modules/@ffmpeg/core/ffmpeg-core.js',
+        logger: ({ message }) => console.log(message),
+      });
+
+      const webcam = document.getElementById('webcam');
+      const recordBtn = document.getElementById('record');
+      const startRecording = () => {
+        const rec = new MediaRecorder(webcam.srcObject);
+        const chunks = [];
+        
+        recordBtn.textContent = 'Stop Recording';
+        recordBtn.onclick = () => {
+          rec.stop();
+          recordBtn.textContent = 'Start Recording';
+          recordBtn.onclick = startRecording;
+        }
+
+        rec.ondataavailable = e => chunks.push(e.data);
+        rec.onstop = async () => {
+          transcode(new Uint8Array(await (new Blob(chunks)).arrayBuffer()));
+        };
+        rec.start();
+      };
+
+      (async () => {
+        webcam.srcObject = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+        await webcam.play();
+        recordBtn.disabled = false;
+        recordBtn.onclick = startRecording;
+      })();
+
+      const transcode = async (webcamData) => {
+        const message = document.getElementById('message');
+        const name = 'record.webm';
+        message.innerHTML = 'Loading ffmpeg-core.js';
+        await worker.load();
+        message.innerHTML = 'Start transcoding';
+        await worker.write(name, webcamData);
+        await worker.transcode(name,  'output.mp4');
+        message.innerHTML = 'Complete transcoding';
+        const { data } = await worker.read('output.mp4');
+
+        const video = document.getElementById('output-video');
+        video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
+      }
+    </script>
+  </body>
+</html>
