W tym przewodniku opisujemy różne podejścia do nagrywania dźwięku i obrazu z karty, okna lub
za pomocą interfejsów API takich jak chrome.tabCapture
lub
getDisplayMedia()
Nagrywanie ekranu
W przypadku nagrywania ekranu wywołaj getDisplayMedia()
, co spowoduje wyświetlenie okna.
poniżej. Dzięki temu użytkownik może wybrać, którą kartę, okno lub ekran chce.
i jednoznacznie wskazuje, że film jest nagrywany.
![Okno udostępniania ekranu dla domeny example.com](https://developer.chrome.com/static/docs/extensions/how-to/web-platform/screen-capture/image/screen-share-dialog-exam-659e9c8ddbf89.png?authuser=9&hl=pl)
Ten przykład wymaga dostępu do nagrywania dźwięku i obrazu.
const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
Jeśli zostanie wywołane w ramach skryptu treści, nagrywanie zakończy się automatycznie, gdy użytkownik przejdzie do nowego
stronę. Aby nagrywać w tle i w nawigacji, użyj
dokument poza ekranem z przyczyną: DISPLAY_MEDIA
.
Przechwytywanie kart w zależności od gestu użytkownika
Wywołanie getDisplayMedia()
powoduje wyświetlenie w przeglądarce okna z pytaniem
informacje o tym, co chce udostępnić. Jednak w niektórych przypadkach użytkownik po prostu kliknął
przycisk polecenia wywołujący rozszerzenie na określonej karcie. Chcesz
natychmiast rozpocznie przechwytywanie karty bez tego promptu.
Nagrywaj dźwięk i filmy w tle
Od Chrome 116 możesz wywoływać interfejs API chrome.tabCapture
w skrypcie service worker
aby uzyskać identyfikator strumienia. Te informacje można następnie przekazać do dokumentu poza ekranem, aby:
rozpocznij nagrywanie.
W mechanizmie Service Worker:
chrome.action.onClicked.addListener(async (tab) => {
const existingContexts = await chrome.runtime.getContexts({});
const offscreenDocument = existingContexts.find(
(c) => c.contextType === 'OFFSCREEN_DOCUMENT'
);
// If an offscreen document is not already open, create one.
if (!offscreenDocument) {
// Create an offscreen document.
await chrome.offscreen.createDocument({
url: 'offscreen.html',
reasons: ['USER_MEDIA'],
justification: 'Recording from chrome.tabCapture API',
});
}
// Get a MediaStream for the active tab.
const streamId = await chrome.tabCapture.getMediaStreamId({
targetTabId: tab.id
});
// Send the stream ID to the offscreen document to start recording.
chrome.runtime.sendMessage({
type: 'start-recording',
target: 'offscreen',
data: streamId
});
});
Następnie w dokumencie spoza ekranu:
chrome.runtime.onMessage.addListener(async (message) => {
if (message.target !== 'offscreen') return;
if (message.type === 'start-recording') {
const media = await navigator.mediaDevices.getUserMedia({
audio: {
mandatory: {
chromeMediaSource: "tab",
chromeMediaSourceId: message.data,
},
},
video: {
mandatory: {
chromeMediaSource: "tab",
chromeMediaSourceId: message.data,
},
},
});
// Continue to play the captured audio to the user.
const output = new AudioContext();
const source = output.createMediaStreamSource(media);
source.connect(output.destination);
// TODO: Do something to recording the MediaStream.
}
});
Pełny przykład znajdziesz tutaj: Tab Capture – Dyktafon.
Nagrywaj dźwięk i film w nowej karcie
W wersjach starszych niż Chrome 116 nie można było używać interfejsu API chrome.tabCapture
w
skrypt service worker albo użyć identyfikatora strumienia utworzonego przez ten interfejs API w dokumencie poza ekranem. Obie opcje
to wymagania dla powyższego podejścia.
Zamiast tego możesz otworzyć stronę rozszerzenia w nowej karcie lub nowym oknie i od razu uzyskać strumień. Ustaw
właściwość targetTabId
, aby zarejestrować właściwą kartę.
Najpierw otwórz stronę rozszerzenia (na przykład w wyskakującym okienku lub w skrypcie service worker):
chrome.windows.create({ url: chrome.runtime.getURL("recorder.html") });
Następnie na stronie rozszerzenia:
chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, async (id) => {
const media = await navigator.mediaDevices.getUserMedia({
audio: {
mandatory: {
chromeMediaSource: "tab",
chromeMediaSourceId: id,
},
},
video: {
mandatory: {
chromeMediaSource: "tab",
chromeMediaSourceId: id,
},
},
});
// Continue to play the captured audio to the user.
const output = new AudioContext();
const source = output.createMediaStreamSource(media);
source.connect(output.destination);
});
Możesz też skorzystać z metody nagrywania ekranu, która pozwala: nagrywać w tle za pomocą dokumentu poza ekranem, ale wyświetla użytkownikowi okno umożliwiające wybór karty; okno lub ekran, w którym chcesz nagrywać.
Nagrywaj dźwięk w wyskakującym okienku
Jeśli chcesz nagrać tylko dźwięk, możesz uzyskać strumień danych bezpośrednio w wyskakującym okienku rozszerzenia, Plik chrome.tabCapture.capture. Po zamknięciu wyskakującego okienka nagrywanie zostanie zatrzymane.
chrome.tabCapture.capture({ audio: true }, (stream) => {
// Continue to play the captured audio to the user.
const output = new AudioContext();
const source = output.createMediaStreamSource(stream);
source.connect(output.destination);
// TODO: Do something with the stream (e.g record it)
});
Jeśli chcesz, aby nagranie było zachowywane po różnych elementach nawigacyjnych, rozważ użycie opisanej metody. w poprzedniej sekcji.
Inne uwagi
Więcej informacji o nagrywaniu transmisji znajdziesz na stronie interfejsu API MediaRecorder.