Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add a demo for video->pixel data->video (#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
  • Loading branch information
alvestrand committed Jun 6, 2019
1 parent 85ec449 commit 298645b
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 1 deletion.
4 changes: 3 additions & 1 deletion .gitignore
Expand Up @@ -8,4 +8,6 @@ validation-status.json
.idea
firefox_profile/*
tests_output
*.log
*.log
*~
\#*#
24 changes: 24 additions & 0 deletions 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;
}
67 changes: 67 additions & 0 deletions 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>
49 changes: 49 additions & 0 deletions 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);
})();
30 changes: 30 additions & 0 deletions 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');
});

0 comments on commit 298645b

Please sign in to comment.