Bu kılavuzda; sekme, pencere veya cihazlardan ses ve video kaydına yönelik farklı yaklaşımlar açıklanmaktadır.
chrome.tabCapture
veya
getDisplayMedia()
.
Ekran kaydı
Ekran kaydı için getDisplayMedia()
çağrısı yapın. Bu durumda iletişim kutusu açılır.
aşağıda gösterilmiştir. Bu, kullanıcıya istediği sekmeyi, pencereyi veya ekranı seçme olanağı tanır
belirten bir uyarı verir ve kaydın devam ettiğine dair net bir gösterge sunar.
![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=9&hl=tr)
Aşağıdaki örnekte hem ses hem de video kaydı için erişim istenmektedir.
const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });
Kayıt bir içerik komut dosyası içinde çağrılırsa kullanıcı yeni bir
sayfasını ziyaret edin. Arka planda ve gezinmeler arasında kayıt yapmak için
ekran dışı belgeyi DISPLAY_MEDIA
nedeniyle iptal edin.
Kullanıcı hareketine dayalı sekme yakalama
getDisplayMedia()
çağrıldığında, tarayıcıda şu bilgileri içeren bir iletişim kutusu gösterilir:
paylaşmak istediklerini gösterebilir. Ancak bazı durumlarda, kullanıcı yeni
işlem düğmesini kullanarak uzantınızı belirli bir sekme için çağırdıysanız ve
sekmesini yakalamaya hemen başlayabilirsiniz.
Arka planda ses ve video kaydedin
Chrome 116 sürümünden itibaren hizmet çalışanında chrome.tabCapture
API'yi çağırabilirsiniz.
kullanıcı hareketinin ardından akış kimliğini almak için. Bu daha sonra ekran dışındaki bir dokümana geçirilebilir ve
kaydı başlat.
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ışındaki 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 bir örnek için Sekme Yakalama - Kaydedici örneğine bakın.
Yeni bir sekmede ses ve video kaydedin
Chrome 116'dan önce chrome.tabCapture
API'yi bir tarayıcıda kullanmak mümkün değildi.
hizmet çalışanı veya söz konusu API tarafından oluşturulan akış kimliğini ekran dışı bir dokümanda kullanma Bu iki
yukarıdaki yaklaşımın şartlarıdır.
Bunun yerine, bir uzantı sayfasını yeni bir sekmede veya pencerede açabilir ve doğrudan bir akış alabilirsiniz. Ayarla
doğru sekmeyi yakalamak için targetTabId
özelliğini kullanı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, şunları yapmanıza olanak tanıyan ekran kaydı yaklaşımını kullanabilirsiniz: Ekran dışı bir doküman kullanarak arka planda kaydediyor ancak kullanıcıya sekme seçmesi için bir iletişim kutusu gösteriyor pencere veya ekrandan seçim yapın.
Pop-up pencerede ses kaydedin
Yalnızca ses kaydetmeniz gerekiyorsa uzantı pop-up'ından doğrudan ses kaydı elde etmek için şu komutu kullanabilirsiniz: chrome.tabCapture.capture sayfasına gidin. 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 gezinmeler arasında devam etmesini istiyorsanız açıklanan yaklaşımı kullanabilirsiniz. önceki bölümde görebilirsiniz.
Dikkat edilmesi gereken diğer noktalar
Akışı kaydetme hakkında daha fazla bilgi için MediaRecorder API'sine bakın.