Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

François Beaufort

Elad Alon

Tarayıcı desteği

Web platformu artık, yakalama ve yakalanan web uygulamaları arasında ortak çalışmaya yardımcı olan bir mekanizma olan Capture Handle ile birlikte gönderiliyor. Yakalama kolu, yakalama yapan web uygulamasının yakalanan web uygulamasını ergonomik ve güvenilir bir şekilde tanımlamasına olanak tanır. (Yakalanan web uygulaması etkinleştirildiyse.)

Aşağıda, bu avantajları gösteren birkaç örnek verilmiştir.

1. Örnek: Bir video konferans web uygulaması, bir sunu web uygulamasını yakalamaktaysa video konferans web uygulaması, kullanıcıya slaytlar arasında gezinmek için kontroller sunabilir. Kontroller doğrudan görüntülü konferans web uygulamasına yerleştirildiğinden kullanıcının görüntülü konferans sekmesi ile sunulan sekme arasında sürekli geçiş yapması gerekmez. Bu yükten kurtulan kullanıcı, artık sunumunu sunmaya daha fazla odaklanabilir.

2. Örnek: "Aynalı koridor" efekti, çekilen bir yüzey, çekildiği konuma geri oluşturulduğunda ortaya çıkar. Özellikle, kullanıcı video konferans görüşmesinin yapıldığı sekmeyi yakalamayı seçerse ve video konferans web uygulaması yerel bir önizleme oluşturursa bu korkunç etki gözlemlenir. Kayıt kolu kullanılarak kendi kendini çekme tespit edilebilir ve azaltılabilir. Örneğin, web uygulaması yerel önizlemeyi bastırarak bunu yapabilir.

Ayna salonu efektinin resmi

Yakalama kolu hakkında

Yakalama herkese açık kullanıcı adı 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ı yakalama işlemi, bu bilgileri MediaStreamTrack nesnelerindeki getCaptureHandle() ile okuyabilir.

Yakalanan taraf

Web uygulamaları, bilgileri yakalamaya çalışan web uygulamalarına gösterebilir. Bunu, navigator.mediaDevices.setCaptureHandleConfig() işlevini aşağıdaki üyelerden oluşan isteğe bağlı bir nesneyle çağırarak yapar:

handle: 1.024 karaktere kadar herhangi bir dize olabilir.
exposeOrigin: true ise yakalanan web uygulamasının kaynağı, web uygulamalarını yakalamaya açık olabilir.
permittedOrigins: Geçerli değerler (i) boş bir dizi, (ii) tek öğe "*" içeren bir dizi veya (iii) kaynak dizisidir. permittedOrigins tek bir "*" öğesinden oluşuyorsa CaptureHandle, tüm yakalama web uygulamaları tarafından gözlemlenebilir. Aksi takdirde, yalnızca kaynağı permittedOrigins olan web uygulamalarını yakalayan kullanıcılar tarafından gözlemlenebilir.

Aşağıdaki örnekte, rastgele oluşturulan bir UUID'nin, yakalama yapan web uygulamalarına nasıl bir herkese açık kullanıcı adı ve kaynak olarak gösterileceğ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, yakalayan web uygulaması, yakalanan web uygulamasıyla iletişim kurmak için CaptureHandle bilgilerini kullanmamalıdır (ör. bir işleyici aracılığıyla mesajlaşma veya paylaşılan bulut altyapısı kullanılarak).

Yakalama tarafı

Yakalama web uygulaması bir video MediaStreamTrack içerir ve bu MediaStreamTrack üzerinde getCaptureHandle() çağrısı yaparak yakalama işleyici bilgilerini okuyabilir. Yakalama işleyicisi yoksa veya yakalama web uygulamasının bunu okumasına izin verilmiyorsa bu çağrı null değerini döndürür. Bir yakalama herkese açık kullanıcı adı varsa ve yakalama web uygulaması permittedOrigins'e eklenmişse bu çağrı aşağıdaki üyeleri içeren bir nesne döndürür:

handle: Yakalanan web uygulaması tarafından navigator.mediaDevices.setCaptureHandleConfig() ile ayarlanan dize değeri.
origin: exposeOrigin, true olarak ayarlandıysa yakalanan web uygulamasının kaynağı. Aksi takdirde, bu değer tanımlanmaz.

Aşağıdaki örnekte, bir video kanalındaki yakalama kolu bilgilerinin 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...
}

Bir MediaStreamTrack nesnesinde "capturehandlechange" etkinliklerini dinleyerek CaptureHandle değişikliklerini izleyin. Değişiklikler aşağıdaki durumlarda gerçekleşir:

Yakalanan web uygulaması navigator.mediaDevices.setCaptureHandleConfig()'ü çağırır.
Yakalanan web uygulamasında belge içi gezinme gerçekleşir.

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

Güvenlik ve gizlilik

Yakalanan web uygulamaları ile yakalanan web uygulamaları arasında işbirliği, yakalanan web uygulamasına "sihirli pikseller" yerleştirilerek veya video akışına QR kodları yerleştirilerek günümüzde 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 (belirli kökleri veya web'in tamamını) seçmesine de olanak tanır.

navigator.mediaDevices.setCaptureHandleConfig() öğesinin yalnızca güvenli tarama bağlamlarında (yalnızca HTTPS) üst düzey ana çerçeveler tarafından kullanılabileceğini unutmayın.

Örnek

Glitch'te örnek dosyasını çalıştırarak yakalama tutamacıyla oynayabilirsiniz. Kaynak koduna göz atın.

Demolar

Bazı demoları şu adreslerde bulabilirsiniz:

Özellik algılama

getCaptureHandle() değerinin desteklenip desteklenmediğini kontrol etmek için:

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

navigator.mediaDevices.setCaptureHandleConfig() değerinin desteklenip desteklenmediğini kontrol etmek için:

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

Sırada ne var?

Yakında web'de ekran paylaşımını iyileştirecek yeni özellikler kullanıma sunulacak. Bu özelliklerden bazılarını aşağıda bulabilirsiniz:

Bölge yakalama, mevcut sekmenin ekran görüntüsünden elde edilen bir video kanalını kırpmaya olanak tanır.
Koşullu Odak, yakalama yapan web uygulamasının tarayıcıya, odağı yakalanan ekran yüzeyine geçirmesi veya bu tür bir odak değişikliğinden kaçınması yönünde talimat 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

Yakalama kolu beklediğiniz gibi çalışmıyor mu? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

GitHub deposunda spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili sorun mu yaşıyorsunuz?

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

https://new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için idealdir.

Destek gösterme

Yakalama kolunu kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

@ChromiumDev hesabına tweet göndererek bu özelliği nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür ederiz

Bu makaleyi inceleyen Joe Medley'e teşekkürler.