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>
This commit is contained in:
Xuezhou Dai
GitHub
Родитель
ee2c6fcad0
Коммит
961028b1bf
|
|
@ -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.
|
||||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 3.0 KiB |
|
|
@ -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"]
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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
|
||||||
|
});
|
||||||
|
});
|
||||||
Загрузка…
Ссылка в новой задаче