Bu kılavuzda, chrome.tabCapture
ya da getDisplayMedia()
gibi API'leri kullanarak bir sekme, pencere veya ekrandan ses ve video kaydetmeye yönelik farklı yaklaşımlar açıklanmaktadır.
Ekran kaydı
Ekran kaydı için getDisplayMedia()
numaralı telefonu çağırın. Bu işlem, aşağıda gösterilen iletişim kutusunu tetikler. Bu, kullanıcının paylaşmak istediği sekmeyi, pencereyi veya ekranı seçmesine olanak tanır ve kaydın gerçekleştiğini net bir şekilde belirtir.
![example.com için ekran paylaşımı iletişim kutusu](https://developer.chrome.com/static/docs/extensions/how-to/web-platform/screen-capture/image/screen-share-dialog-exam-659e9c8ddbf89.png?authuser=5&hl=tr)
Aşağıdaki örnekte hem ses hem de video kaydı için erişim izni istenir.
const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
İçerik komut dosyası içinde çağrılırsa, kullanıcı yeni bir sayfaya gittiğinde kayıt otomatik olarak sona erer. Arka planda ve gezinmelerde kayıt yapmak için DISPLAY_MEDIA
nedeni olan bir ekran dışı doküman kullanın.
Kullanıcı hareketine göre sekme yakalama
getDisplayMedia()
çağrıldığında tarayıcıda, kullanıcıya ne paylaşmak istediğini soran bir iletişim kutusu gösterilir. Ancak bazı durumlarda, kullanıcı belirli bir sekme için uzantınızı çağırmak üzere işlem düğmesini tıklamıştır ve siz de bu istem olmadan sekmeyi yakalamaya hemen başlamak istersiniz.
Arka planda ses ve video kaydedin
Chrome 116'dan itibaren, kullanıcı hareketini izleyen bir akış kimliği almak için Service Worker'da chrome.tabCapture
API'yi çağırabilirsiniz. Daha sonra bu veri, kaydı başlatmak için ekran dışı bir belgeye iletilebilir.
Hizmet çalışanınızda:
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
});
});
Ardından, ekran dışı dokümanınızda:
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.
}
});
Tam örnek için Sekme Yakalama - Kaydedici örneğine bakın.
Ses ve videoyu yeni bir sekmede kaydedin
Chrome 116'dan önce, chrome.tabCapture
API'yi bir hizmet çalışanında kullanmak veya bu API tarafından oluşturulan akış kimliğini ekran dışı bir dokümanda kullanmak mümkün değildi. Yukarıdaki yaklaşım için bunların her ikisi de gereklidir.
Bunun yerine, bir uzantı sayfasını yeni bir sekmede veya pencerede açabilir ve doğrudan bir akış elde edebilirsiniz. Doğru sekmeyi yakalamak için targetTabId
özelliğini ayarlayın.
Bir uzantı sayfası açarak başlayın (örneğin pop-up'ınızda veya hizmet çalışanınızda):
chrome.windows.create({ url: chrome.runtime.getURL("recorder.html") });
Ardından, uzantı sayfanızda:
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);
});
Alternatif olarak, ekran dışı bir dokümanı kullanarak arka planda kayıt yapmanıza olanak tanıyan ancak kullanıcıya kayıt yapılacak sekme, pencere veya ekran seçmesini sağlayan bir iletişim kutusu gösteren ekran kaydetme yaklaşımını kullanabilirsiniz.
Pop-up pencerede ses kaydedin
Yalnızca ses kaydetmeniz gerekiyorsa chrome.tabCapture.capture'ı kullanarak uzantı pop-up'ından doğrudan akışı alabilirsiniz. Pop-up kapandığında kayıt durdurulur.
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)
});
Kaydın tüm gezinmelerde de devam etmesi gerekiyorsa önceki bölümde açıklanan yaklaşımı kullanabilirsiniz.
Dikkat edilmesi gereken diğer noktalar
Akış kaydetme hakkında daha fazla bilgi için MediaRecorder API'ye bakın.