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.
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 üzerindegetCaptureHandle()
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 varsaCaptureHandle
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.