src/content/insertable-streams/video-processing/index.html - external/webrtc-samples - Git at Google

 <!DOCTYPE html>
 <!--
  *  Copyright (c) 2020 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>Insertable Streams - 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>Video processing with insertable streams</span></h1>

     <p>This sample shows how to perform processing on a video stream using the experimental
         <a href="https://github.com/w3c/mediacapture-insertable-streams">insertable streams</a> API.
         There are options for the source of the input stream, the destination of the output stream,
         and the API used to transform the stream. There is also the option to duplicate the source
         stream to a video element on the page, which may affect the source FPS.
     </p>

     <span id="outputVideo"></span>

     <div class="box">
         <span>Source:</span>
         <select id="sourceSelector" disabled>
             <option selected value="">(stopped)</option>
             <option value="camera">Camera</option>
             <option value="video">Video</option>
             <option value="pc">Peer connection (from camera)</option>
         </select>
         <span>Add to page: <input type="checkbox" id="sourceVisible" disabled></span>
     </div>
     <div class="box">
         <span>Transform:</span>
         <select id="transformSelector" disabled>
             <option selected value="webgl">WebGL</option>
             <option value="canvas2d">Canvas2D</option>
             <option value="noop">Do nothing</option>
             <option value="drop">Drop frames at random</option>
             <option value="delay">Delay all frames by 100ms</option>
             <option value="webcodec">Run frames through WebCodec</option>
         </select>
     </div>
     <div class="box">
         <span>Destination:</span>
         <select id="sinkSelector" disabled>
             <option selected value="video">Video</option>
             <option value="pc">Peer connection</option>
         </select>
     </div>

     <p>View the console to see logging.</p>

     <p>
         <b>Note</b>: This sample is using an experimental API that has not yet been standardized. As
         of 2020-11-16, this API is available in Chrome M88 if the experimental code is enabled on
         the command line with
         <code>--enable-blink-features=WebCodecs,MediaStreamInsertableStreams</code>.
     </p>
     <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/insertable-streams/video-processing"
        title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

 </div>

 <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 <script src="js/camera-source.js" async></script>
 <script src="js/canvas-transform.js" async></script>
 <script src="js/peer-connection-pipe.js" async></script>
 <script src="js/peer-connection-sink.js" async></script>
 <script src="js/peer-connection-source.js" async></script>
 <script src="js/pipeline.js" async></script>
 <script src="js/simple-transforms.js" async></script>
 <script src="js/video-mirror-helper.js" async></script>
 <script src="js/video-sink.js" async></script>
 <script src="js/video-source.js" async></script>
 <script src="js/webcodec-transform.js" async></script>
 <script src="js/webgl-transform.js" async></script>
 <script src="js/main.js" async></script>

 <script src="../../../js/lib/ga.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<!--
	* Copyright (c) 2020 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>Insertable Streams - 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>Video processing with insertable streams</span></h1>

	<p>This sample shows how to perform processing on a video stream using the experimental
	<a href="https://github.com/w3c/mediacapture-insertable-streams">insertable streams</a> API.
	There are options for the source of the input stream, the destination of the output stream,
	and the API used to transform the stream. There is also the option to duplicate the source
	stream to a video element on the page, which may affect the source FPS.
	</p>

	<span id="outputVideo"></span>

	<div class="box">
	<span>Source:</span>
	<select id="sourceSelector" disabled>
	<option selected value="">(stopped)</option>
	<option value="camera">Camera</option>
	<option value="video">Video</option>
	<option value="pc">Peer connection (from camera)</option>
	</select>
	<span>Add to page: <input type="checkbox" id="sourceVisible" disabled></span>
	</div>
	<div class="box">
	<span>Transform:</span>
	<select id="transformSelector" disabled>
	<option selected value="webgl">WebGL</option>
	<option value="canvas2d">Canvas2D</option>
	<option value="noop">Do nothing</option>
	<option value="drop">Drop frames at random</option>
	<option value="delay">Delay all frames by 100ms</option>
	<option value="webcodec">Run frames through WebCodec</option>
	</select>
	</div>
	<div class="box">
	<span>Destination:</span>
	<select id="sinkSelector" disabled>
	<option selected value="video">Video</option>
	<option value="pc">Peer connection</option>
	</select>
	</div>

	<p>View the console to see logging.</p>

	<p>
	<b>Note</b>: This sample is using an experimental API that has not yet been standardized. As
	of 2020-11-16, this API is available in Chrome M88 if the experimental code is enabled on
	the command line with
	<code>--enable-blink-features=WebCodecs,MediaStreamInsertableStreams</code>.
	</p>
	<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/insertable-streams/video-processing"
	title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

	</div>

	<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
	<script src="js/camera-source.js" async></script>
	<script src="js/canvas-transform.js" async></script>
	<script src="js/peer-connection-pipe.js" async></script>
	<script src="js/peer-connection-sink.js" async></script>
	<script src="js/peer-connection-source.js" async></script>
	<script src="js/pipeline.js" async></script>
	<script src="js/simple-transforms.js" async></script>
	<script src="js/video-mirror-helper.js" async></script>
	<script src="js/video-sink.js" async></script>
	<script src="js/video-source.js" async></script>
	<script src="js/webcodec-transform.js" async></script>
	<script src="js/webgl-transform.js" async></script>
	<script src="js/main.js" async></script>

	<script src="../../../js/lib/ga.js"></script>
	</body>
	</html>