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ındaki ortak çalışmaya yardımcı olan Capture Handle (Yakalama Tutucu) mekanizmasını da içeriyor. Yakalama tutma yeri, yakalama web uygulamasının yakalanan web uygulamasını ergonomik ve güvenli bir şekilde tanımlamasına olanak tanır. (Yakalanan web uygulaması etkinleştirildiyse.)

Birkaç örnek Google Ads'in avantajlarını göstermektedir.

1. Örnek: Video konferans web uygulaması bir sunu web uygulamasını yakalıyorsa video konferans web uygulaması, kullanıcıya slaytlar arasında gezinme denetimlerini gösterebilir. Kontroller doğrudan video konferans web uygulamasına yerleştirilmiş olduğundan, kullanıcının video konferans sekmesi ile gösterilen sekme arasında sürekli geçiş yapması gerekmez. Bu yük kaldırılırken kullanıcı artık sunusunun sunulmasına daha fazla konsantre olabiliyor.

2. Örnek: "aynalardan oluşan salon" efekti, çekilen yüzey, yakalanan konuma geri döndürüldüğünde 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örülür. Yakalama tutma yeri kullanıldığında, kendi kendine çekim algılanabilir ve azaltılabilir; Örneğin, web uygulaması yerel önizlemeyi devre dışı bırakabilir.

Aynalar salonu efektinin çizimi

Yakalama herkese açık kullanıcı adı hakkında

Yakalama Adı, iki tamamlayıcı bölümden oluşur:

Yakalanan web uygulamaları, navigator.mediaDevices.setCaptureHandleConfig() ile belirli bilgilerin bazı kaynaklara gösterilmesini etkinleştirebilir.
Daha sonra yakalanan web uygulamaları, bu bilgileri MediaStreamTrack nesneler üzerinde getCaptureHandle() ile okuyabilir.

Yakalanan taraf

Web uygulamaları, yakalayacak olan bilgileri olası web uygulamalarına maruz bırakabilir. Bunu, şu üyelerden oluşan isteğe bağlı bir nesne ile navigator.mediaDevices.setCaptureHandleConfig() çağrısı yaparak yapar:

handle: En fazla 1.024 karakter uzunluğunda bir dize olabilir.
exposeOrigin: true ise yakalanan web uygulamasının kaynağı, web uygulamalarını yakalamaya maruz kalabilir.
permittedOrigins: Geçerli değerler, (i) boş bir dizi, (ii) "*" tek öğesine sahip bir dizi veya (iii) bir kaynak dizisidir. permittedOrigins öğesinde "*" tek öğesi varsa CaptureHandle tüm yakalanan web uygulamaları tarafından gözlemlenebilir. Aksi takdirde, yalnızca kaynağı permittedOrigins olan web uygulamalarının yakalanmasında gözlemlenebilir.

Aşağıdaki örnekte, rastgele oluşturulmuş bir UUID'nin herkese açık kullanıcı adı olarak ve herhangi bir yakalama web uygulamasına nasıl sunulacağı gösterilmektedir.

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

Yakalanan web uygulamasının, yakalamanın kaydedilip kaydedilmediğini bilmediğini unutmayın. Aksi takdirde, yakalama web uygulaması, yakalanan web uygulamasıyla iletişim kurmak için CaptureHandle bilgilerini kullanır (örneğin, bir çalışan üzerinden mesajlaşma veya paylaşılan bir bulut altyapısı kullanır).

Yakalama tarafı

Video yakalama uygulaması bir video (MediaStreamTrack) içerir ve söz konusu MediaStreamTrack cihazında getCaptureHandle() öğesini çağırarak yakalama herkese açık kullanıcı adı bilgilerini okuyabilir. Yakalama herkese açık kullanıcı adı yoksa veya yakalama web uygulamasının okuma izni yoksa bu çağrı null değerini döndürür. Yakalama tutma yeri varsa ve yakalama web uygulaması permittedOrigins bölümüne eklenmişse bu çağrı, aşağıdaki üyelere sahip 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ımlanmaz.

Aşağıdaki örnekte, bir video parçasındaki yakalama adı 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 nesnesindeki "capturehandlechange" etkinliklerini dinleyerek CaptureHandle değişikliklerini izleyin. Değişiklikler şu durumlarda gerçekleşir:

Yakalanan web uygulaması şunu çağırır: navigator.mediaDevices.setCaptureHandleConfig().
Yakalanan web uygulamasında dokümanlar arası gezinme gerçekleşir.

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

Güvenlik ve gizlilik

Yakalama ve yakalanan web uygulamaları arasında ortak çalışma, günümüzde "sihirli pikseller" yerleştirerek teorik olarak mümkündür veya video akışına QR kodları yerleştirebilirsiniz. Yakalama tutma yeri daha basit, daha güvenilir ve daha güvenli bir mekanizma sunar. Ayrıca, yakalanan web uygulamasının kitleyi seçmesine olanak tanır (kaynakları veya web'in tamamı).

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

Örnek

Glitch'te örneği çalıştırarak Yakalama Tutma Yeri ile oynayabilirsiniz. kaynak kodu kontrol etmeyi unutmayın.

Demolar

Bazı demoları şurada bulabilirsiniz:

Özellik algılama

getCaptureHandle() adlı uygulamanın desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

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

navigator.mediaDevices.setCaptureHandleConfig() adlı uygulamanın desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

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

Sırada ne var?

Yakın gelecekte web'de ekran paylaşımını geliştirecek yeniliklere bir göz atalım:

Bölge Yakalama, geçerli sekmenin görüntüleme yakalamasından türetilen 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ı için talimat vermesini sağlar.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, Capture Handle'la ilgili deneyimleriniz hakkında bilgi edinmek ister.

Bize tasarım hakkında bilgi verin

Yakalama herkese açık kullanıcı adı ile ilgili olarak beklediğiniz gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var?

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

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?

https://new.crbug.com adresinden hata bildiriminde bulunun. Mümkün olduğunca çok ayrıntı ve videonun tekrar üretilmesi için basit talimatlar eklediğinizden emin olun. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

Desteğinizi gösterin

Video Kayıt tutma yerini kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik olduğunu gösterir.

@ChromiumDev'e bir tweet göndererek uygulamanızı nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

Teşekkür

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