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

Furkan
François Beaufort
GitHub
Elif Alon
Elad Alon
GitHub

Tarayıcı Desteği

  • 102
  • 102
  • x
  • x

Web platformu artık yakalama ve yakalanan web uygulamaları arasında ortak çalışmaya yardımcı olan bir mekanizma olan Capture Handle kullanılmaktadır. 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 bu ürünün avantajlarını göstermektedir.

1. Örnek: Bir video konferans web uygulaması bir sunu web uygulaması yakalıyorsa video konferans web uygulaması, kullanıcıya slaytlar arasında gezinmeyle ilgili denetimler sunabilir. Denetimler doğrudan video konferans web uygulamasına yerleştirilmiş olduğundan kullanıcının video konferans sekmesi ile sunulan sekme arasında sürekli geçiş yapması gerekmez. Bu yük ortadan kalktığında, kullanıcı artık sunumunun tamamlanmasına daha tam olarak odaklanabilir.

2. Örnek: "Aynalar salonu" efekti, yakalanan bir yüzey yakalanan konuma geri döndürüldüğünde ortaya çıkar. Kullanıcı, video konferans görüşmesinin gerçekleştiği sekmeyi yakalamayı seçerse ve video konferans web uygulaması yerel bir önizleme oluşturursa bu korkunç bir etki olacaktır. Yakalama Tutma Yeri'ni kullanarak; örneğin, web uygulamasının yerel önizlemeyi engellemesi gibi otomatik çekimlerin algılanması ve azaltılması yapılabilir.

Aynalar salonu efekti çizimi

Yakalama Tutma Yeri hakkında

Yakalama tutma adı iki tamamlayıcı bölümden oluşur:

  • Yakalanan web uygulamaları, navigator.mediaDevices.setCaptureHandleConfig() ile belirli bilgilerin bazı kaynaklarda gösterilmesini etkinleştirebilir.
  • Web uygulamaları yakalandığında, bu bilgiler MediaStreamTrack nesneleri üzerinde getCaptureHandle() ile okunabilir.

Yakalanan taraf

Web uygulamaları, web uygulamalarını yakalama söz konusu olduğunda bilgileri açığa çıkarabilir. Bunu, şu üyelerden oluşan isteğe bağlı bir nesneyle navigator.mediaDevices.setCaptureHandleConfig() yöntemini çağırarak yapar:

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

Aşağıdaki örnekte, rastgele oluşturulmuş bir UUID'nin herkese açık kullanıcı adı olarak ve kaynağın, yakalanan herhangi bir web uygulamasına nasıl açılacağı 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. Diğer bir deyişle, yakalama web uygulaması, yakalanan web uygulamasıyla iletişim kurmak için (örneğin, bir çalışan aracılığıyla mesajlaşma veya paylaşılan bir bulut altyapısı kullanılarak) CaptureHandle bilgilerini kullanmaz.

Yakalanan taraf

Yakalama web uygulaması bir video (MediaStreamTrack) barındırır ve ilgili MediaStreamTrack üzerinde getCaptureHandle() çağrısı yaparak yakalama herkese açık kullanıcı adını okuyabilir. Bu çağrı, yakalama işleyicisi yoksa veya yakalama web uygulamasının okumasına izin verilmiyorsa null değerini döndürür. Bir yakalama işleyicisi varsa ve yakalama web uygulaması permittedOrigins öğesine eklenirse 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ımlanmamıştır.

Aşağıdaki örnekte, video parçasından yakalama herkese açık kullanıcı 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ı navigator.mediaDevices.setCaptureHandleConfig() işlevini çağırıyor.
  • 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

Yakalanan web uygulamalarına "sihirli pikseller" veya video akışına QR kodları yerleştirerek günümüzde teorik olarak ortak çalışma yapmak mümkün. 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 (kaynakları veya web'in tamamını) de olanak tanır.

navigator.mediaDevices.setCaptureHandleConfig() işlevinin yalnızca güvenli tarama bağlamlarındaki üst düzey ana çerçeveler için kullanılabildiğini (yalnızca HTTPS) unutmayın.

Örnek

Glitch'te örnek çalıştırarak Yakalama Tutma Yeri ile oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.

Demolar

Bazı demoları şurada bulabilirsiniz:

Özellik algılama

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

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

navigator.mediaDevices.setCaptureHandleConfig() hizmetinin 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'deki ekran paylaşımını iyileştirecek özelliklere kısaca göz atalım:

  • Bölge Yakalama, geçerli sekmenin ekran görüntüsünden alınan video kanalının kırpılmasına olanak tanır.
  • Koşullu Odak, yakalama web uygulamasının tarayıcıya, odağı yakalanan görüntü yüzeyine geçirmesi veya böyle bir odak değişikliğinden kaçınması için talimat vermesine olanak tanır.

Geri bildirim

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

Bize tasarım hakkında bilgi verin

Yakalama tutma yeri konusunda beklediğiniz gibi çalışmayan bir özellik mi var? Ya da fikrinizi uygulamak için ihtiyacınız olan eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

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

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulamasında 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 yeniden oluşturma işlemiyle ilgili basit talimatları eklediğinizden emin olun. Glitch hızlı ve kolay yeniden oluşturma paylaşımı için idealdir.

Desteği göster

Yakalama tutma adını kullanmayı düşünü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 özellikleri desteklemenin ne kadar kritik olduğunu gösterir.

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

Teşekkür

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