From 961028b1bf0a963717a84c83ba242fd49522d65c Mon Sep 17 00:00:00 2001
From: Xuezhou Dai <daidr@daidr.me>
Date: Thu, 1 Jun 2023 17:51:54 +0800
Subject: [PATCH] Add tabCapture sample (#933)

* Add tabCapture sample

* Add README

* Update receiver.html

* Fix variable loss caused by idle

* Use windows.create

* Remove unnecessary logs

* Update README

* Update api-samples/tabCapture/README.md

Co-authored-by: Oliver Dunk <oliver@oliverdunk.com>

* Update api-samples/tabCapture/README.md

Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>

* Update api-samples/tabCapture/README.md

Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>

* Update api-samples/tabCapture/README.md

Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>

* Rename background.js

* Remove unnecessary async function

* Move the script to the body

* Update api-samples/tabCapture/README.md

Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>

* Update README.md

* Update api-samples/tabCapture/manifest.json

Co-authored-by: Oliver Dunk <oliver@oliverdunk.com>

---------

Co-authored-by: Oliver Dunk <oliver@oliverdunk.com>
Co-authored-by: amysteamdev <37001393+AmySteam@users.noreply.github.com>
---
 api-samples/tabCapture/README.md         |  21 ++++++
 api-samples/tabCapture/icon.png          | Bin 0 -> 3041 bytes
 api-samples/tabCapture/manifest.json     |  13 ++++
 api-samples/tabCapture/receiver.html     |  15 ++++
 api-samples/tabCapture/receiver.js       |  91 +++++++++++++++++++++++
 api-samples/tabCapture/service-worker.js |  36 +++++++++
 6 files changed, 176 insertions(+)
 create mode 100644 api-samples/tabCapture/README.md
 create mode 100644 api-samples/tabCapture/icon.png
 create mode 100644 api-samples/tabCapture/manifest.json
 create mode 100644 api-samples/tabCapture/receiver.html
 create mode 100644 api-samples/tabCapture/receiver.js
 create mode 100644 api-samples/tabCapture/service-worker.js

diff --git a/api-samples/tabCapture/README.md b/api-samples/tabCapture/README.md
new file mode 100644
index 00000000..6f39d009
--- /dev/null
+++ b/api-samples/tabCapture/README.md
@@ -0,0 +1,21 @@
+# chrome.tabCapture
+
+A sample that demonstrates how to use the [`chrome.tabCapture`](https://developer.chrome.com/docs/extensions/reference/tabCapture/) API.
+
+## Overview
+
+In this sample, the `chrome.tabCapture` API captures the contents of the active tab. The captured stream is displayed in a new window.
+
+## Implementation Notes
+
+Use [`tabCapture.getMediaStreamId`](https://developer.chrome.com/docs/extensions/reference/tabCapture/#method-getMediaStreamId) to capture specific tabs.
+
+The `targetTabId` and `consumerTabId` are obtained in the Service Worker, and then passed to the receiver page through the [`tabs.sendMessage`](https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage) method.
+
+See the [Audio recording and Screen capture guide](https://developer.chrome.com/docs/extensions/mv3/screen_capture/#audio-and-video) for a more detailed implementation.
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+3. Click the extension's action icon.
diff --git a/api-samples/tabCapture/icon.png b/api-samples/tabCapture/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..a49189cf98722208000caa1a69795c2f036cb8bc
GIT binary patch
literal 3041
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

literal 0
HcmV?d00001

diff --git a/api-samples/tabCapture/manifest.json b/api-samples/tabCapture/manifest.json
new file mode 100644
index 00000000..857c18c8
--- /dev/null
+++ b/api-samples/tabCapture/manifest.json
@@ -0,0 +1,13 @@
+{
+  "name": "Tab Capture Example",
+  "description": "Capture a tab and play in a <video> element in a separate window.",
+  "version": "1",
+  "manifest_version": 3,
+  "action": {
+    "default_icon": "icon.png"
+  },
+  "background": {
+    "service_worker": "service-worker.js"
+  },
+  "permissions": ["tabs", "tabCapture"]
+}
diff --git a/api-samples/tabCapture/receiver.html b/api-samples/tabCapture/receiver.html
new file mode 100644
index 00000000..2656b6cb
--- /dev/null
+++ b/api-samples/tabCapture/receiver.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>receiver</title>
+  </head>
+
+  <body>
+    <p id="echo-msg"></p>
+    <video id="player" width="100%"></video>
+    <script src="./receiver.js"></script>
+  </body>
+</html>
diff --git a/api-samples/tabCapture/receiver.js b/api-samples/tabCapture/receiver.js
new file mode 100644
index 00000000..1d943849
--- /dev/null
+++ b/api-samples/tabCapture/receiver.js
@@ -0,0 +1,91 @@
+let currentStream = null;
+
+function printErrorMessage(message) {
+  const element = document.getElementById('echo-msg');
+  element.innerText = message;
+  console.error(message);
+}
+
+// Stop video play-out and stop the MediaStreamTracks.
+function shutdownReceiver() {
+  if (!currentStream) {
+    return;
+  }
+
+  const player = document.getElementById('player');
+  player.srcObject = null;
+  const tracks = currentStream.getTracks();
+  for (let i = 0; i < tracks.length; ++i) {
+    tracks[i].stop();
+  }
+  currentStream = null;
+}
+
+// Start video play-out of the captured MediaStream.
+function playCapturedStream(stream) {
+  if (!stream) {
+    printErrorMessage(
+      'Error starting tab capture: ' +
+        (chrome.runtime.lastError.message || 'UNKNOWN')
+    );
+    return;
+  }
+  if (currentStream != null) {
+    shutdownReceiver();
+  }
+  currentStream = stream;
+  const player = document.getElementById('player');
+  player.addEventListener(
+    'canplay',
+    function () {
+      this.volume = 0.75;
+      this.muted = false;
+      this.play();
+    },
+    {
+      once: true
+    }
+  );
+  player.setAttribute('controls', '1');
+  player.srcObject = stream;
+}
+
+function testGetMediaStreamId(targetTabId, consumerTabId) {
+  chrome.tabCapture.getMediaStreamId(
+    { targetTabId, consumerTabId },
+    function (streamId) {
+      if (typeof streamId !== 'string') {
+        printErrorMessage(
+          'Failed to get media stream id: ' +
+            (chrome.runtime.lastError.message || 'UNKNOWN')
+        );
+        return;
+      }
+
+      navigator.webkitGetUserMedia(
+        {
+          audio: false,
+          video: {
+            mandatory: {
+              chromeMediaSource: 'tab', // The media source must be 'tab' here.
+              chromeMediaSourceId: streamId
+            }
+          }
+        },
+        function (stream) {
+          playCapturedStream(stream);
+        },
+        function (error) {
+          printErrorMessage(error);
+        }
+      );
+    }
+  );
+}
+
+chrome.runtime.onMessage.addListener(function (request) {
+  const { targetTabId, consumerTabId } = request;
+  testGetMediaStreamId(targetTabId, consumerTabId);
+});
+
+window.addEventListener('beforeunload', shutdownReceiver);
diff --git a/api-samples/tabCapture/service-worker.js b/api-samples/tabCapture/service-worker.js
new file mode 100644
index 00000000..643a490a
--- /dev/null
+++ b/api-samples/tabCapture/service-worker.js
@@ -0,0 +1,36 @@
+async function closePrevReceiverTab() {
+  const tabs = await chrome.tabs.query({
+    url: chrome.runtime.getURL('receiver.html')
+  });
+
+  await Promise.all(tabs.map((tab) => chrome.tabs.remove(tab.id)));
+}
+
+chrome.action.onClicked.addListener(async (tab) => {
+  const currentTabId = tab.id;
+
+  await closePrevReceiverTab();
+
+  // Open a new tab with the receiver.html page
+  const { tabs } = await chrome.windows.create({
+    url: chrome.runtime.getURL('receiver.html')
+  });
+
+  const receiverTabId = tabs[0].id;
+
+  // Wait for the receiver tab to load
+  await new Promise((resolve) => {
+    chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
+      if (tabId === receiverTabId && info.status === 'complete') {
+        chrome.tabs.onUpdated.removeListener(listener);
+        resolve();
+      }
+    });
+  });
+
+  // Send a message to the receiver tab
+  chrome.tabs.sendMessage(receiverTabId, {
+    targetTabId: currentTabId,
+    consumerTabId: receiverTabId
+  });
+});