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. Yakalama tutma yeri kullanıldığında, kendi kendine yakalama algılanabilir ve azaltılabilir (ör. web uygulamasının yerel önizlemeyi engellemesi).

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 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, 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 öğesinde "*" tek öğesi varsa CaptureHandle tüm yakalanan web uygulamaları tarafından gözlemlenebilir. Aksi takdirde, yalnızca kaynağı permittedOrigins olan web uygulamalarını yakalayan kullanıcılar tarafından görülebilir.

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ı

Video yakalama uygulaması bir video (MediaStreamTrack) içerir ve söz konusu MediaStreamTrack cihazında getCaptureHandle() işlevini çağırarak yakalama herkese açık kullanıcı adı 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. Yakalama tutma yeri 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 olanak tanır.

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 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, 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 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 herkese açık kullanıcı adı ile ilgili olarak beklediğiniz gibi çalışmayan bir şey mi var? 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 özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik 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.