Update to latest webrtc sample page sets

Pull latest from https://github.com/webrtc/samples. In particular, this
includes
https://github.com/webrtc/samples/commit/583fc1a6efacd19d9485be381a8698d12748b671
which is a followup to
https://chromium.googlesource.com/chromium/src/+/4eab15e1d4e2c0c9e4a6369c9d65ac2f543d489a
to resolve the perf regressions in bug 1167426.

PS1 has all manual changes. PS3 is the result of:
$ ./tools/perf/page_sets/update_webrtc_cases
$ git restore tools/perf/page_sets/webrtc_cases/datatransfer.js
(Necessary because
https://chromium-review.googlesource.com/c/chromium/src/+/2579968 is not
present in the upstream yet.)

Tested locally on Mac with:
./tools/perf/run_benchmark run webrtc --browser=system
./tools/perf/run_benchmark run webrtc --browser=canary
./tools/perf/run_benchmark run webrtc --browser=exact --browser-executable=/Applications/Google\ Chrome\ Beta.app/Contents/MacOS/Google\ Chrome\ Beta

Bug: 1167426
Change-Id: I9d4605e8149dc5dafcfcee13cbfd3a7cd6d7b92c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2642360
Commit-Queue: Mirko Bonadei <mbonadei@chromium.org>
Auto-Submit: Ben Wagner aka dogben <benjaminwagner@google.com>
Reviewed-by: Dan Sanders <sandersd@chromium.org>
Reviewed-by: Mirko Bonadei <mbonadei@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845784}

tools/perf/page_sets/update_webrtc_cases

@@ -33,7 +33,7 @@ TEST_PAGES_LOCATION_BY_REPO = {
             'src/content/getusermedia/resolution',
             'src/content/insertable-streams/video-processing',
         ],
-        'revision': 'bcccf04dcbbb1c1061c76712b0f501e117d8a1bd',
+        'revision': '583fc1a6efacd19d9485be381a8698d12748b671',
     },
 }
 

tools/perf/page_sets/webrtc_cases/resolution.html

@@ -22,7 +22,7 @@
 
         button {
             margin: 0 10px 20px 0;
-            width: 90px;
+            min-width: 90px;
         }
 
         div#buttons {
@@ -74,7 +74,8 @@
         <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>
 

tools/perf/page_sets/webrtc_cases/resolution.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}}
 };
 

tools/perf/page_sets/webrtc_cases/video-processing.html

@@ -47,8 +47,10 @@
         <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">

tools/perf/page_sets/webrtc_cases/video-processing.js

@@ -103,7 +103,7 @@ class CanvasTransform { // eslint-disable-line no-unused-vars
   async transform(frame, controller) {
     const ctx = this.ctx_;
     if (!this.canvas_ || !ctx) {
-      frame.destroy();
+      frame.close();
       return;
     }
     const width = frame.displayWidth;
@@ -116,7 +116,7 @@ class CanvasTransform { // eslint-disable-line no-unused-vars
     // non-optional.
     const timestamp = /** @type {number} */ (frame.timestamp);
     const inputBitmap = await frame.createImageBitmap();
-    frame.destroy();
+    frame.close();
 
     ctx.drawImage(inputBitmap, 0, 0);
     inputBitmap.close();
@@ -156,15 +156,21 @@ if (typeof MediaStreamTrackProcessor === 'undefined' ||
       'page.');
 }
 
+// In Chrome 88, VideoFrame.close() was called VideoFrame.destroy()
+if (VideoFrame.prototype.close === undefined) {
+  VideoFrame.prototype.close = VideoFrame.prototype.destroy;
+}
+
 /* global CameraSource */ // defined in camera-source.js
 /* global CanvasTransform */ // defined in canvas-transform.js
 /* global PeerConnectionSink */ // defined in peer-connection-sink.js
 /* global PeerConnectionSource */ // defined in peer-connection-source.js
 /* global Pipeline */ // defined in pipeline.js
-/* global DropTransform, DelayTransform */ // defined in simple-transforms.js
+/* global NullTransform, DropTransform, DelayTransform */ // defined in simple-transforms.js
 /* global VideoSink */ // defined in video-sink.js
 /* global VideoSource */ // defined in video-source.js
 /* global WebGLTransform */ // defined in webgl-transform.js
+/* global WebCodecTransform */ // defined in webcodec-transform.js
 
 /**
  * Allows inspecting objects in the console. See console log messages for
@@ -177,7 +183,7 @@ let debug = {};
  * FrameTransformFn applies a transform to a frame and queues the output frame
  * (if any) using the controller. The first argument is the input frame and the
  * second argument is the stream controller.
- * The VideoFrame should be destroyed as soon as it is no longer needed to free
+ * The VideoFrame should be closed as soon as it is no longer needed to free
  * resources and maintain good performance.
  * @typedef {function(
  *     !VideoFrame,
@@ -342,6 +348,9 @@ function initUI() {
    * UI element.
    */
   function updatePipelineTransform() {
+    if (!pipeline) {
+      return;
+    }
     const transformType =
         transformSelector.options[transformSelector.selectedIndex].value;
     console.log(`[UI] Selected transform: ${transformType}`);
@@ -356,10 +365,18 @@ function initUI() {
         // Defined in simple-transforms.js.
         pipeline.updateTransform(new DropTransform());
         break;
+      case 'noop':
+        // Defined in simple-transforms.js.
+        pipeline.updateTransform(new NullTransform());
+        break;
       case 'delay':
         // Defined in simple-transforms.js.
         pipeline.updateTransform(new DelayTransform());
         break;
+      case 'webcodec':
+        // Defined in webcodec-transform.js
+        pipeline.updateTransform(new WebCodecTransform());
+        break;
       default:
         alert(`unknown transform ${transformType}`);
         break;
@@ -886,6 +903,21 @@ class Pipeline { // eslint-disable-line no-unused-vars
 
 'use strict';
 
+/**
+ * Does nothing.
+ * @implements {FrameTransform} in pipeline.js
+ */
+class NullTransform { // eslint-disable-line no-unused-vars
+  /** @override */
+  async init() {}
+  /** @override */
+  async transform(frame, controller) {
+    controller.enqueue(frame);
+  }
+  /** @override */
+  destroy() {}
+}
+
 /**
  * Drops frames at random.
  * @implements {FrameTransform} in pipeline.js
@@ -898,7 +930,7 @@ class DropTransform { // eslint-disable-line no-unused-vars
     if (Math.random() < 0.5) {
       controller.enqueue(frame);
     } else {
-      frame.destroy();
+      frame.close();
     }
   }
   /** @override */
@@ -1171,6 +1203,73 @@ class VideoSource { // eslint-disable-line no-unused-vars
   }
 }
 
+/*
+ *  Copyright (c) 2021 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';
+
+/**
+ * Encodes and decodes frames using the WebCodec API.
+ * @implements {FrameTransform} in pipeline.js
+ */
+class WebCodecTransform { // eslint-disable-line no-unused-vars
+  constructor() {
+    // Encoder and decoder are initialized in init()
+    this.decoder_ = null;
+    this.encoder_ = null;
+    this.controller_ = null;
+  }
+  /** @override */
+  async init() {
+    console.log('[WebCodecTransform] Initializing encoder and decoder');
+    this.decoder_ = new VideoDecoder({
+      output: frame => this.handleDecodedFrame(frame),
+      error: this.error
+    });
+    this.encoder_ = new VideoEncoder({
+      output: frame => this.handleEncodedFrame(frame),
+      error: this.error
+    });
+    this.encoder_.configure({codec: 'vp8', width: 640, height: 480});
+    this.decoder_.configure({codec: 'vp8', width: 640, height: 480});
+  }
+
+  /** @override */
+  async transform(frame, controller) {
+    if (!this.encoder_) {
+      frame.close();
+      return;
+    }
+    this.controller_ = controller;
+    this.encoder_.encode(frame);
+  }
+
+  /** @override */
+  destroy() {}
+
+  /* Helper functions */
+  handleEncodedFrame(encodedFrame) {
+    this.decoder_.decode(encodedFrame);
+  }
+
+  handleDecodedFrame(videoFrame) {
+    if (!this.controller_) {
+      videoFrame.close();
+      return;
+    }
+    this.controller_.enqueue(videoFrame);
+  }
+
+  error(e) {
+    console.log('[WebCodecTransform] Bad stuff happened: ' + e);
+  }
+}
+
 /*
  *  Copyright (c) 2020 The WebRTC project authors. All Rights Reserved.
  *
@@ -1326,7 +1425,7 @@ class WebGLTransform { // eslint-disable-line no-unused-vars
   async transform(frame, controller) {
     const gl = this.gl_;
     if (!gl || !this.canvas_) {
-      frame.destroy();
+      frame.close();
       return;
     }
     const width = frame.displayWidth;
@@ -1342,7 +1441,7 @@ class WebGLTransform { // eslint-disable-line no-unused-vars
     // non-optional.
     const timestamp = /** @type {number} */ (frame.timestamp);
     const inputBitmap = await frame.createImageBitmap();
-    frame.destroy();
+    frame.close();
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, this.texture_);
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);