Add a demo for video->pixel data->video (webrtc#1195)

* Add a demo for video->pixel data->video This demonstrates how to access raw data in a video pipeline, and allows us to measure the performance of that solution. Also adds the .js file for running a local webserver, and makes some .gitignore extensions. * Review comments, lint * Another lint message
huningxin · Jun 6, 2019 · 298645b · 298645b
1 parent 85ec449
commit 298645b
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,6 @@ validation-status.json
 .idea
 firefox_profile/*
 tests_output
-*.log
+*.log
+*~
+\#*#
diff --git a/src/content/capture/canvas-filter/css/main.css b/src/content/capture/canvas-filter/css/main.css
@@ -0,0 +1,24 @@
+/*
+*  Copyright (c) 2016 The WebRTC project authors. All Rights Reserved.
+*
+*  Use of this source code is governed by a BSD-style license
+*  that can be found in the LICENSE file in the root of the source
+*  tree.
+*/
+
+canvas {
+    background-color: #ccc;
+    --width: calc(45%);
+    width: var(--width);
+    height: calc(var(--width) * 0.75);
+    margin: 1em;
+    vertical-align: top;
+}
+
+video {
+    --width: calc(45%);
+    width: var(--width);
+    height: calc(var(--width) * 0.75);
+    margin: 1em;
+    object-fit: cover;
+}
diff --git a/src/content/capture/canvas-filter/index.html b/src/content/capture/canvas-filter/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ *  Copyright (c) 2019 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+-->
+<html>
+<head>
+
+    <meta charset="utf-8">
+    <meta name="description" content="WebRTC code samples">
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+    <meta itemprop="description" content="Client-side WebRTC code samples">
+    <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
+    <meta itemprop="name" content="WebRTC code samples">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta id="theme-color" name="theme-color" content="#ffffff">
+
+    <base target="_blank">
+
+    <title>Video to Canvas to video</title>
+
+    <link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
+    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="../../../css/main.css"/>
+    <link rel="stylesheet" href="css/main.css"/>
+
+</head>
+
+<body>
+
+<div id="container">
+
+    <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>Stream camera via a canvas to a video element</span>
+    </h1>
+
+    <video id="source" autoplay></video>
+    <canvas id="canvas-source" style="display:none"></canvas>
+    <canvas id="canvas-result" style="display:none"></canvas>
+
+    <video id="result" autoplay></video>
+
+    <p>The camera is captured to a video element, which is mapped onto a
+      canvas, and a red square is added.</p>
+    <p>The canvas is then captured to an ImageData object, and painted
+      onto a second canvas.</p>
+    <p>A stream is captured from the second canvas element using its
+        <code>captureStream()</code> method and set as the <code>srcObject</code> of the video element.</p>
+
+    <p>The <code>inputStream</code>, <code>source</code>,
+      <code>canvasIn</code>, <code>canvasOut</code>,
+      <code>result</code>, and <code>stream</code> variables are in global
+      scope, so you can
+      inspect them from the browser console.</p>
+
+    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/canvas-filter"
+       title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
+
+</div>
+
+<script src="js/main.js"></script>
+
+<script src="../../../js/lib/ga.js"></script>
+</body>
+</html>
diff --git a/src/content/capture/canvas-filter/js/main.js b/src/content/capture/canvas-filter/js/main.js
@@ -0,0 +1,49 @@
+/*
+*  Copyright (c) 2019 The WebRTC project authors. All Rights Reserved.
+*
+*  Use of this source code is governed by a BSD-style license
+*  that can be found in the LICENSE file in the root of the source
+*  tree.
+*/
+
+'use strict';
+
+const source = document.querySelector('#source');
+// TODO(hta): Use OffscreenCanvas for the intermediate canvases.
+const canvasIn = document.querySelector('#canvas-source');
+const canvasOut = document.querySelector('#canvas-result');
+const result = document.querySelector('#result');
+
+const stream = canvasOut.captureStream();
+let inputStream = null;
+let imageData = null;
+
+result.srcObject = stream;
+
+function loop() {
+  if (source.videoWidth > 0 && source.videoHeight > 0) {
+    canvasIn.width = source.videoWidth;
+    canvasIn.height = source.videoHeight;
+    let ctx = canvasIn.getContext('2d');
+    ctx.drawImage(source, 0, 0);
+    // Put a red square into the image, to mark it as "processed".
+    ctx.fillStyle = '#FF0000';
+    ctx.fillRect(10, 10, 80, 80);
+    imageData = ctx.getImageData(0, 0, canvasIn.width, canvasIn.height);
+    // At this point, we have data that can be transferred.
+    // We paint it on the second canvas.
+    canvasOut.width = source.videoWidth;
+    canvasOut.height = source.videoHeight;
+    let outCtx = canvasOut.getContext('2d');
+    outCtx.putImageData(imageData, 0, 0);
+  }
+  window.requestAnimationFrame(loop);
+}
+
+(async () => {
+  inputStream = await navigator.mediaDevices.getUserMedia({video: true});
+  source.srcObject = inputStream;
+  source.play();
+  result.play();
+  window.requestAnimationFrame(loop);
+})();
diff --git a/web_server/server.js b/web_server/server.js
@@ -0,0 +1,30 @@
+/*
+ *  Copyright (c) 2017 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+ /* eslint-env node */
+
+'use strict';
+
+var express = require('express');
+var https = require('https');
+var pem = require('pem');
+
+pem.createCertificate({days: 1, selfSigned: true}, function(err, keys) {
+  var options = {
+    key: keys.serviceKey,
+    cert: keys.certificate
+  };
+
+  var app = express();
+
+  app.use(express.static('../'));
+
+  // Create an HTTPS service.
+  https.createServer(options, app).listen(8080);
+
+  console.log('serving on https://localhost:8080');
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,6 @@ validation-status.json @@
     .idea
     firefox_profile/*
     tests_output
-    *.log
+    *.log
+    *~
+    \#*#