src/content/capture/worker-process/index.html - external/webrtc-samples - Git at Google

 <!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 processing in a Worker</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>Processing video data with a Worker</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 MediaStreamTrack, which is turned into a
       WHATWG Stream of ImageData objects by means of a canvas, and a red
       square is added.</p>
     <p>The stream is sent to a Worker, which returns a new stream containing
       the same video data.</p>
     <p>This is then mapped back to a MediaStream using another canvas.</p>

     <p>The chief purpose of the demo is to demonstrate that this is doable,
       but that performance can be improved significantly.</p>
     <p>NOTE: This works only on Chrome 76 and above with experimental Web
       features enabled, since it depends on transferable Streams.</p>
     <p>A similar demo, without the worker process, is on the <a href="../canvas-filter/">canvas filter</a> demo.</p>
     <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/worker-process"
        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>
	<!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 processing in a Worker</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>Processing video data with a Worker</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 MediaStreamTrack, which is turned into a
	WHATWG Stream of ImageData objects by means of a canvas, and a red
	square is added.</p>
	<p>The stream is sent to a Worker, which returns a new stream containing
	the same video data.</p>
	<p>This is then mapped back to a MediaStream using another canvas.</p>

	<p>The chief purpose of the demo is to demonstrate that this is doable,
	but that performance can be improved significantly.</p>
	<p>NOTE: This works only on Chrome 76 and above with experimental Web
	features enabled, since it depends on transferable Streams.</p>
	<p>A similar demo, without the worker process, is on the <a href="../canvas-filter/">canvas filter</a> demo.</p>
	<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/capture/worker-process"
	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>