Panduan ini menjelaskan berbagai pendekatan untuk merekam audio dan video dari tab, jendela, atau
layar menggunakan API seperti chrome.tabCapture
atau
getDisplayMedia()
.
Perekaman layar
Untuk perekaman layar, panggil getDisplayMedia()
, yang memicu kotak dialog
yang ditunjukkan di bawah. Dengan begitu, pengguna dapat memilih tab, jendela, atau layar yang ingin
dibagikan dan memberikan indikasi yang jelas bahwa perekaman sedang berlangsung.
Contoh berikut meminta akses untuk merekam audio dan video.
const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
Jika dipanggil dalam skrip konten, perekaman akan otomatis berakhir saat pengguna membuka halaman
baru. Untuk merekam di latar belakang dan di seluruh navigasi, gunakan
dokumen offscreen dengan alasan DISPLAY_MEDIA
.
Tangkapan tab berdasarkan gestur pengguna
Memanggil getDisplayMedia()
akan membuat browser menampilkan dialog yang menanyakan
kepada pengguna apa yang ingin mereka bagikan. Namun, dalam beberapa kasus, pengguna baru saja mengklik tombol tindakan untuk memanggil ekstensi untuk tab tertentu, dan Anda ingin segera mulai merekam tab tanpa perintah ini.
Merekam audio dan video di latar belakang
Mulai Chrome 116, Anda dapat memanggil chrome.tabCapture
API dalam pekerja layanan
untuk mendapatkan ID streaming dengan mengikuti gestur pengguna. Selanjutnya, nilai ini dapat diteruskan ke dokumen di luar layar untuk
mulai merekam.
Dalam pekerja layanan Anda:
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
});
});
Kemudian, dalam dokumen di luar layar:
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.
}
});
Untuk contoh lengkapnya, lihat contoh Tab Capture - Perekam Suara.
Rekam audio dan video di tab baru
Sebelum Chrome 116, Anda tidak dapat menggunakan chrome.tabCapture
API dalam
pekerja layanan atau menggunakan ID aliran data yang dibuat oleh API tersebut dalam dokumen di luar layar. Keduanya
adalah persyaratan untuk pendekatan di atas.
Sebagai gantinya, Anda dapat membuka halaman ekstensi di tab atau jendela baru, dan langsung mendapatkan streaming. Tetapkan
properti targetTabId
untuk mengambil tab yang benar.
Mulai dengan membuka halaman ekstensi (mungkin di pop-up atau pekerja layanan):
chrome.windows.create({ url: chrome.runtime.getURL("recorder.html") });
Kemudian, di halaman ekstensi Anda:
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);
});
Atau, pertimbangkan untuk menggunakan pendekatan perekaman layar yang memungkinkan Anda merekam di latar belakang menggunakan dokumen di luar layar, tetapi menampilkan dialog kepada pengguna untuk memilih tab, jendela, atau layar yang akan digunakan untuk merekam.
Merekam audio dalam pop-up
Jika hanya perlu merekam audio, Anda dapat langsung mendapatkan streaming di pop-up ekstensi menggunakan chrome.tabCapture.capture. Saat pop-up ditutup, perekaman akan dihentikan.
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)
});
Jika Anda memerlukan rekaman agar tetap ada di seluruh navigasi, pertimbangkan untuk menggunakan pendekatan yang dijelaskan di bagian sebelumnya.
Pertimbangan lainnya
Untuk informasi selengkapnya tentang cara merekam streaming, lihat MediaRecorder API.