Merge branch 'gh-pages' into gss-again

haiweima · Dec 9, 2020 · 6b4c41d · 6b4c41d
2 parents 0c541c0 + e037d5e
commit 6b4c41d
Show file tree

Hide file tree

Showing 37 changed files with 2,150 additions and 146 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -29,5 +29,6 @@ module.exports = {
     "ga": true,
     "getPolicyFromBooleans": true,
     "TransformStream": true,
+    "VideoFrame": true,
   },
 };
diff --git a/index.html b/index.html
@@ -132,6 +132,8 @@ <h2 id="peerconnection"><a href="https://developer.mozilla.org/en-US/docs/Web/AP
         <ul>
             <li><a href="src/content/peerconnection/pc1/">Basic peer connection demo</a></li>
 
+            <li><a href="src/content/peerconnection/perfect-negotiation/">Peer connection using Perfect Negotiation</a></li>
+
             <li><a href="src/content/peerconnection/audio/">Audio-only peer connection demo</a></li>
 
             <li><a href="src/content/peerconnection/bandwidth/">Change bandwidth on the fly</a></li>
@@ -168,8 +170,6 @@ <h2 id="peerconnection"><a href="https://developer.mozilla.org/en-US/docs/Web/AP
             </li>
 
             <li><a href="src/content/peerconnection/webaudio-output/">Peer connection as input to Web Audio</a></li>
-            <li><a href="src/content/peerconnection/endtoend-encryption">End to end encryption using Insertable Streams</a></li> (Experimental)
-            <li><a href="src/content/peerconnection/video-analyzer">Video analyzer using Insertable Streams</a></li> (Experimental)
         </ul>
         <h2 id="datachannel"><a
                 href="https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel:</a></h2>
@@ -193,6 +193,15 @@ <h2 id="videoChat">Video chat:</h2>
             <li><a href="https://apprtc.appspot.com/params.html">AppRTC URL parameters</a></li>
 
         </ul>
+
+        <h2 id="capture">Insertable Streams:</h2>
+        <p class="description">API for processing media</p>
+        <ul>
+            <li><a href="src/content/insertable-streams/endtoend-encryption">End to end encryption using WebRTC Insertable Streams</a></li> (Experimental)
+            <li><a href="src/content/insertable-streams/video-analyzer">Video analyzer using WebRTC Insertable Streams</a></li> (Experimental)
+            <li><a href="src/content/insertable-streams/video-processing">Video processing using MediaStream Insertable Streams</a></li> (Experimental)            
+        </ul>
+
     </section>
 
 </div>

diff --git a/src/content/getusermedia/resolution/index.html b/src/content/getusermedia/resolution/index.html
@@ -33,7 +33,7 @@
 
         button {
             margin: 0 10px 20px 0;
-            width: 90px;
+            min-width: 90px;
         }
 
         div#buttons {
@@ -85,7 +85,8 @@ <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC
         <button id="vga">VGA</button>
         <button id="hd">HD</button>
         <button id="full-hd">Full HD</button>
-        <button id="fourK">4K</button>
+        <button id="televisionFourK">Television 4K (3840x2160)</button>
+        <button id="cinemaFourK">Cinema 4K (4096x2160)</button>
         <button id="eightK">8K</button>
     </div>
 

diff --git a/src/content/getusermedia/resolution/js/main.js b/src/content/getusermedia/resolution/js/main.js
@@ -16,7 +16,8 @@ const vgaButton = document.querySelector('#vga');
 const qvgaButton = document.querySelector('#qvga');
 const hdButton = document.querySelector('#hd');
 const fullHdButton = document.querySelector('#full-hd');
-const fourKButton = document.querySelector('#fourK');
+const cinemaFourKButton = document.querySelector('#cinemaFourK');
+const televisionFourKButton = document.querySelector('#televisionFourK');
 const eightKButton = document.querySelector('#eightK');
 
 const videoblock = document.querySelector('#videoblock');
@@ -46,8 +47,12 @@ fullHdButton.onclick = () => {
   getMedia(fullHdConstraints);
 };
 
-fourKButton.onclick = () => {
-  getMedia(fourKConstraints);
+televisionFourKButton.onclick = () => {
+  getMedia(televisionFourKConstraints);
+};
+
+cinemaFourKButton.onclick = () => {
+  getMedia(cinemaFourKConstraints);
 };
 
 eightKButton.onclick = () => {
@@ -70,7 +75,11 @@ const fullHdConstraints = {
   video: {width: {exact: 1920}, height: {exact: 1080}}
 };
 
-const fourKConstraints = {
+const televisionFourKConstraints = {
+  video: {width: {exact: 3840}, height: {exact: 2160}}
+};
+
+const cinemaFourKConstraints = {
   video: {width: {exact: 4096}, height: {exact: 2160}}
 };
 

diff --git a/...nnection/endtoend-encryption/css/main.css → ...-streams/endtoend-encryption/css/main.css b/...nnection/endtoend-encryption/css/main.css → ...-streams/endtoend-encryption/css/main.css
diff --git a/src/content/insertable-streams/endtoend-encryption/index.html b/src/content/insertable-streams/endtoend-encryption/index.html
@@ -0,0 +1,77 @@
+<!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>Peer connection end to end encryption</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>Peer connection end to end encryption</span>
+    </h1>
+    <span id="banner"></span>
+    <p>
+      <h2>Sender and receiver</h2>
+      <div id="videos">
+        Sender and receiver<br>
+        <video id="video1" playsinline autoplay muted></video>
+        <video id="video2" playsinline autoplay></video>
+      </div>
+      <br>
+      Crypto key: <input type="text" id="crypto-key">
+      Encrypt first bytes: <input type="checkbox" id="crypto-offset">
+    </p>
+    <p>
+      <h2>Middlebox</h2>
+      <div id="monitor">
+        <video id="video-monitor" playsinline autoplay muted></video>
+        Switch audio to middlebox: <input type="checkbox" id="mute-middlebox">
+      </div>
+    </p>
+
+    <div id="buttons">
+        <button id="start">Start</button>
+        <button id="call" disabled>Call</button>
+        <button id="hangup" disabled>Hang Up</button>
+    </div>
+    <div id="status"></div>
+
+    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/insertable-streams/endtoend-encryption"
+       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/videopipe.js"></script>
+<script src="js/main.js" async></script>
+
+<script src="../../../js/lib/ga.js"></script>
+
+</body>
+</html>
diff --git a/...connection/endtoend-encryption/js/main.js → ...le-streams/endtoend-encryption/js/main.js b/...connection/endtoend-encryption/js/main.js → ...le-streams/endtoend-encryption/js/main.js
diff --git a/...ction/endtoend-encryption/js/videopipe.js → ...reams/endtoend-encryption/js/videopipe.js b/...ction/endtoend-encryption/js/videopipe.js → ...reams/endtoend-encryption/js/videopipe.js
diff --git a/...nnection/endtoend-encryption/js/worker.js → ...-streams/endtoend-encryption/js/worker.js b/...nnection/endtoend-encryption/js/worker.js → ...-streams/endtoend-encryption/js/worker.js
diff --git a/...eerconnection/video-analyzer/css/main.css → ...table-streams/video-analyzer/css/main.css b/...eerconnection/video-analyzer/css/main.css → ...table-streams/video-analyzer/css/main.css
diff --git a/src/content/insertable-streams/video-analyzer/index.html b/src/content/insertable-streams/video-analyzer/index.html
@@ -0,0 +1,77 @@
+<!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 Analyzer</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>Insertable Streams Video Analyzer</span></h1>
+
+    <h3><span id="banner"></span></h3>
+    <p>This sample shows how Insertable Streams can be used to analyze
+      the encoded form of a video track.
+    </p>
+
+    <video id="localVideo" playsinline autoplay muted></video>
+    <video id="remoteVideo" playsinline autoplay></video>
+
+    <div class="box">
+        <button id="startButton">Start</button>
+        <button id="callButton">Call</button>
+        <button id="hangupButton">Hang Up</button>
+        <br><br>
+        <button id="size-small" disabled>Small</button>
+        <button id="size-vga" disabled>VGA</button>
+        <button id="size-hd" disabled>HD</button>
+    </div>
+
+    <p>View the console to see logging.
+    </p>
+    <div class="analyzer">
+      Video size: <span id="video-size"></span><br>
+      Keyframe count: <span id="keyframe-count"></span><br>
+      Interframe count: <span id="interframe-count"></span><br>
+      Last keyframe size: <span id="keyframe-size"></span><br>
+      Last interframe size: <span id="interframe-size"></span><br>
+      Duplicate count: <span id="duplicate-count"></span><br>
+    </div>
+
+    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/insertable-streams/video-analyzer"
+       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/main.js" async></script>
+
+<script src="../../../js/lib/ga.js"></script>
+</body>
+</html>
diff --git a/.../peerconnection/video-analyzer/js/main.js → ...ertable-streams/video-analyzer/js/main.js b/.../peerconnection/video-analyzer/js/main.js → ...ertable-streams/video-analyzer/js/main.js
diff --git a/src/content/insertable-streams/video-processing/css/main.css b/src/content/insertable-streams/video-processing/css/main.css
@@ -0,0 +1,39 @@
+/*
+ *  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.
+ */
+
+.video {
+  --width: 45%;
+  width: var(--width);
+  height: calc(var(--width) * 0.75);
+  vertical-align: top;
+}
+
+.sourceVideo {
+  margin: 0 20px 20px 0;
+}
+
+.sinkVideo {
+  margin: 0 0 20px 0;
+}
+
+div.box {
+  margin: 1em;
+}
+
+@media screen and (max-width: 400px) {
+  .video {
+    height: 90px;
+    width: calc(50% - 7px);
+  }
+  .sourceVideo {
+    margin: 0 10px 20px 0;
+  }
+  .sinkVideo {
+    margin: 0 0 10px 0;
+  }
+}
diff --git a/src/content/insertable-streams/video-processing/index.html b/src/content/insertable-streams/video-processing/index.html
@@ -0,0 +1,103 @@
+<!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="drop">Drop frames at random</option>
+            <option value="delay">Delay all frames by 100ms</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/webgl-transform.js" async></script>
+<script src="js/main.js" async></script>
+
+<script src="../../../js/lib/ga.js"></script>
+</body>
+</html>