chromium/chrome/test/data/webrtc/capturing_page_main.html

<html>
  <head>
    <title>Capture Handle Test - Main Capturing Page</title>
    <link rel="icon" href="data:," />
    <script src="../result_queue.js"></script>
    <script>
      "use strict";

      let capturedStream;
      let capturedVideoTrack;

      let resultQueue = new ResultQueue();

      function captureOtherTab() {
        return navigator.mediaDevices
          .getDisplayMedia({ video: true, selfBrowserSurface: "include" })
          .then(handleCaptureSuccess)
          .catch(handleCaptureError);
      }

      function readLastEvent() {
        // Blocks until onCaptureHandleChange() unblocks.
        return resultQueue.pop();
      }

      function readLastEmbeddedEvent() {
        // Blocks until the embedded frame's onCaptureHandleChange() unblocks.
        return new Promise(resolve => {
          window.addEventListener('message', resolve, {once: true});
          document
            .getElementById("embedded_frame")
            .contentWindow.postMessage("last-embedded-event", "*");
        }).then((event) => {
          return event.data;
        });
      }

      function readCaptureHandle() {
        if (!capturedVideoTrack) {
          return "error-no-video-track";
        }

        let captureHandle = capturedVideoTrack.getCaptureHandle();
        if (captureHandle === null || captureHandle === undefined) {
          return String(captureHandle);
        } else if (!captureHandle) {
          return "error-unknown-capture-handle";
        }

        return JSON.stringify(captureHandle);
      }

      function startEmbeddingFrame(url) {
        return new Promise(resolve => {
          window.addEventListener('message', resolve, {once: true});
          document.getElementById("embedded_frame").src = url;
        }).then((event) => {
          return event.data;
        });
      }

      function captureOtherTabFromEmbeddedFrame() {
        return new Promise(resolve => {
          window.addEventListener('message', resolve, {once: true});
          document
            .getElementById("embedded_frame")
            .contentWindow.postMessage("start-capture", "*");
        }).then((event) => {
          return event.data;
        });
      }

      function readCaptureHandleInEmbeddedFrame() {
        return new Promise(resolve => {
          window.addEventListener('message', resolve, {once: true});
          document
            .getElementById("embedded_frame")
            .contentWindow.postMessage("read-capture-handle", "*");
        }).then((event) => {
          return event.data;
        });
      }

      function handleCaptureSuccess(stream) {
        if (capturedStream) {
          return "error-multiple-captures";
        }

        capturedStream = stream;
        capturedVideoTrack = stream.getVideoTracks()[0];

        capturedVideoTrack.oncapturehandlechange = onCaptureHandleChange;

        return "capture-success";
      }

      function handleCaptureError(error) {
        return "capture-failure";
      }

      function onCaptureHandleChange(event) {
        // Note that JSON.stringify(null) yields 'null'. On the other hand,
        // JSON.stringify(undefined) yields undefined (not the string).
        resultQueue.push(JSON.stringify(event.target.getCaptureHandle()));
      }

      function setTitle(title) {
        document.title = title;
        return "title-changed";
      }

      // Duplicated from the captured-page in order to test self-capture.
      function callSetCaptureHandleConfig(
        exposeOrigin,
        handle,
        permittedOrigins
      ) {
        navigator.mediaDevices.setCaptureHandleConfig({
          exposeOrigin: exposeOrigin,
          handle: handle,
          permittedOrigins: permittedOrigins,
        });
        return "capture-handle-set";
      }
    </script>
  </head>
  <body>
    <h1>Capture Handle Test - Main Capturing Page</h1>
    <br/>
    <iframe id="embedded_frame" allow="display-capture *"></iframe>
  </body>
</html>