Yakalama Tutma Yeri ile daha iyi sekme paylaşımı

François Beaufort

Elad Alon

Web platformu artık, yakalama ve yakalanan web uygulamaları arasındaki işbirliğine yardımcı olan bir mekanizma olan Capture Handle ile birlikte geliyor. Capture Handle, yakalama yapan bir web uygulamasının yakalanan web uygulamasını ergonomik ve güvenli bir şekilde tanımlamasını sağlar (yakalanan web uygulaması özelliği etkinleştirmişse).

Aşağıdaki örnekler, avantajları göstermektedir.

1. örnek: Bir video konferans web uygulaması, sunum web uygulamasını yakalıyorsa video konferans web uygulaması, slaytlar arasında gezinmek için kullanıcının erişebileceği kontroller sunabilir. Kontroller doğrudan video konferans web uygulamasına yerleştirildiğinden kullanıcının video konferans sekmesi ile sunulan sekme arasında tekrar tekrar geçiş yapması gerekmez. Bu yükün kalkmasıyla kullanıcı, sunumunu yapmaya daha fazla odaklanabilir.

2. örnek: "Aynalar salonu" efekti, yakalanan bir yüzey yakalanan konuma geri işlendiğinde oluşur. Özellikle, kullanıcı video konferans görüşmesinin yapıldığı sekmeyi kaydetmeyi seçerse ve video konferans web uygulaması yerel bir önizleme oluşturursa bu korkunç efekt gözlemlenir. Kayıt tutma kolu kullanıldığında, kendi kendine kayıt tutma durumu algılanabilir ve azaltılabilir. Örneğin, web uygulaması yerel önizlemeyi bastırabilir.

Capture Handle hakkında

Capture Handle iki tamamlayıcı bölümden oluşur:

• Yakalanan web uygulamaları, navigator.mediaDevices.setCaptureHandleConfig() ile belirli bilgileri bazı kaynaklara göstermeyi etkinleştirebilir.
• Web uygulamalarını yakalayanlar, bu bilgileri MediaStreamTrack nesnelerinde getCaptureHandle() ile okuyabilir.

Alınan taraf

Web uygulamaları, bilgi yakalamaya çalışan web uygulamalarına bilgi verebilir. Bu işlem, aşağıdaki üyelerden oluşan isteğe bağlı bir nesneyle navigator.mediaDevices.setCaptureHandleConfig() çağrılarak yapılır:

• handle: En fazla 1.024 karakterlik herhangi bir dize olabilir.
• exposeOrigin: true ise yakalanan web uygulamasının kaynağı, yakalama web uygulamalarına maruz kalabilir.
• permittedOrigins: Geçerli değerler (i) boş bir dizi, (ii) tek öğeli "*" dizisi veya (iii) kaynak dizisidir. permittedOrigins, tek bir öğe olan "*"'den oluşuyorsa CaptureHandle, tüm yakalama web uygulamaları tarafından gözlemlenebilir. Aksi takdirde, yalnızca kaynağı permittedOrigins olan web uygulamaları tarafından gözlemlenebilir.

Aşağıdaki örnekte, rastgele oluşturulan bir UUID'nin nasıl herkese açık hale getirileceği ve herhangi bir yakalama web uygulamasına nasıl iletileceği gösterilmektedir.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Yakalanan web uygulamasının yakalanıp yakalanmadığını bilmediğini unutmayın. Ancak, yakalama web uygulaması, yakalanan web uygulamasıyla iletişim kurmak için CaptureHandle bilgilerini kullanmıyorsa (örneğin, bir çalışan aracılığıyla mesajlaşma veya paylaşılan bir bulut altyapısı kullanarak) bu durum geçerli değildir.

Kaydedilen taraf

Yakalama web uygulaması bir video MediaStreamTrack içerir ve bu MediaStreamTrack üzerinde getCaptureHandle() çağırarak yakalama işleyici bilgilerini okuyabilir. Bu çağrı, yakalama işleyeni yoksa veya yakalama yapan web uygulamasının bunu okumasına izin verilmiyorsa null değerini döndürür. Bir yakalama işleyici varsa ve yakalama web uygulaması permittedOrigins'ya eklenmişse bu işlev, aşağıdaki üyeleri içeren bir nesne döndürür:

• handle: navigator.mediaDevices.setCaptureHandleConfig() ile yakalanan web uygulaması tarafından ayarlanan dize değeri.
• origin: exposeOrigin, true olarak ayarlanmışsa yakalanan web uygulamasının kaynağı. Aksi takdirde tanımlanmamıştır.

Aşağıdaki örnekte, yakalama işleyici bilgilerinin bir video parçasından nasıl okunacağı gösterilmektedir.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

CaptureHandle nesnesindeki MediaStreamTrack etkinlikleri "capturehandlechange" dinleyerek değişiklikleri izleyin. Değişiklikler şu durumlarda gerçekleşir:

• Yakalanan web uygulaması çağrıları navigator.mediaDevices.setCaptureHandleConfig().
• Yakalanan web uygulamasında belgeler arası gezinme gerçekleşir.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Güvenlik ve gizlilik

Yakalanan ve yakalama yapan web uygulamaları arasında işbirliği yapmak, yakalanan web uygulamasına "sihirli pikseller" yerleştirerek veya video akışına QR kodları yerleştirerek teorik olarak mümkündür. Capture Handle, daha basit, daha güvenilir ve daha güvenli bir mekanizma sunar. Ayrıca, yakalanan web uygulamasının kitleyi (kaynakları veya web'in tamamını) seçmesine olanak tanır.

navigator.mediaDevices.setCaptureHandleConfig() yalnızca güvenli gezinme bağlamlarındaki (yalnızca HTTPS) üst düzey ana çerçevelerde kullanılabilir.

Örnek

Örnek çalıştırarak Capture Handle ile oynayabilirsiniz.

Demolar

Bazı demoları şu adreste bulabilirsiniz:

• Uzaktan Kumanda
• Kendi Kendine Kayıt Algılama (Self-Capture Detection)

Özellik algılama

getCaptureHandle() özelliğinin desteklenip desteklenmediğini kontrol etmek için:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

navigator.mediaDevices.setCaptureHandleConfig() özelliğinin desteklenip desteklenmediğini kontrol etmek için:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

Sırada ne var?

Web'de ekran paylaşımını iyileştirecek ve yakın gelecekte kullanıma sunulacak özelliklere dair önizlemeyi aşağıda bulabilirsiniz:

• Bölge yakalama, mevcut sekmenin ekran yakalama işleminden elde edilen bir video parçasının kırpılmasına olanak tanır.
• Koşullu Odak, yakalama web uygulamasının tarayıcıya odağı yakalanan ekran yüzeyine geçirmesi veya böyle bir odak değişikliğinden kaçınması talimatını vermesine olanak tanır.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, Capture Handle ile ilgili deneyimlerinizi öğrenmek istiyor.

Tasarım hakkında bilgi verin

Capture Handle ile ilgili beklentilerinizi karşılamayan bir durum var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

• GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun mu var?

Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?

• https://new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve yeniden üretme için basit talimatlar ekleyin.

Desteğinizi gösterme

Kayıt Kolu'nu kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına bu özelliklerin ne kadar önemli olduğunu gösterir.

@ChromiumDev adresine tweet göndererek nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

• Spesifikasyon
• Açıklayıcı
• TAG incelemesi
• Chromium hatası
• ChromeStatus.com girişi

Teşekkür

Bu makaleyi incelediği için Joe Medley'e teşekkür ederiz.