Bölge Yakalama ile daha iyi sekme paylaşımı

François Beaufort

Elad Alon

Web platformu, bir web uygulamasının mevcut sekmenin video kaydını almasına zaten izin vermektedir. Artık bu video parçalarını kırpmaya yarayan bir mekanizma olan Bölge Yakalama ile birlikte sunulmaktadır. Web uygulaması, geçerli sekmenin bir bölümünü ilgi alanı olarak belirler ve tarayıcı bu alanın dışındaki tüm pikselleri kırpar.

Web uygulamaları daha önce video parçalarını "manuel olarak" kırpabiliyordu. Yani web uygulamaları her bir kareyi doğrudan değiştirebiliyordu. Bu yöntem ne sağlam ne de performanslıydı. Bölge Yakalama özelliği, bu eksiklikleri gidermektedir. Web uygulaması artık tarayıcıya işi kendi adına yapmasını talimat verebilir.

Bölge yakalama hakkında

Dinamik İçerik™ ile bir web sitesi oluşturdunuz. Bu, gelmiş geçmiş en iyi web uygulaması. Kullanıcılar genellikle ortak çalışmayla bu uygulamayı kullanmaya doyamıyor. Sonraki adımda, sanal konferans özelliklerini yerleştirebiliriz. Bu seçeneği tercih edersiniz. Mevcut bir video konferans servis sağlayıcısıyla işbirliği yaparak bu sağlayıcının web uygulamasını kaynaklar arası iframe olarak yerleştiriyorsunuz. Video konferans web uygulaması, mevcut sekmeyi video parçası olarak yakalar ve uzak katılımcılara iletir.

Ana içerik alanı mavi, çapraz kaynaklı iframe ise kırmızı renktedir.

Biraz yavaşlayın… Kullanıcıların kendi videolarını onlara geri göndermek istemezsiniz, değil mi? Bu kısmı kırpsan iyi olur. Peki nasıl? Yerleşik iFrame, hangi içeriği nerede gösterdiğinizi bilmediği için yardım almadan kırpamaz. Teorik olarak, istenen koordinatları iletebilirsiniz. Peki kullanıcı pencereyi yeniden boyutlandırırsa ne olur? Görüntü alanını kaydırıyor mu? Yakınlaştırıyor mu yoksa uzaklaştırıyor mu? Sayfayla düzen değişikliğine neden olacak şekilde etkileşim kurar mı? Yeni koordinatları yakalama iFrame'ine gönderseniz bile zamanlama sorunları nedeniyle bazı kareler yanlış kırpılabilir.

O zaman bölge yakalama özelliğini kullanalım. Sayfanızda ana içeriği barındıran bir Element (<div> olabilir) vardır. Bu dosyayı mainContentArea olarak adlandıralım. Video konferans web uygulamasının, bu öğenin sınırlayıcı kutusu tarafından tanımlanan alanı uzaktan yakalayıp paylaşmasını istiyorsunuz. Böylece mainContentArea'ten CropTarget elde edersiniz. Bu CropTarget değerini görüntülü konferans web uygulamasına iletirsiniz. Bu CropTarget değeri kullanılarak video parçası kırpıldıktan sonra, söz konusu parçadaki kareler yalnızca mainContentArea sınır kutusuna giren piksellerden oluşur. mainContentArea boyut, şekil veya konum değiştirirse video parçası, iki web uygulamasından da ek giriş gerektirmeden bu değişiklikleri izler.

Bu adımları tekrar gözden geçirelim:

Web uygulamanızda, giriş olarak seçtiğiniz öğeyi kullanarak CropTarget.fromElement()'ı çağırarak bir CropTarget tanımlarsınız.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

CropTarget öğesini video konferans web uygulamasına iletirsiniz.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

Video konferans web uygulaması, ana web uygulamasından alınan kırpma hedefiyle kendi kendine çekim video parçasında cropTo() çağrısı yaparak tarayıcıdan parçayı CropTarget tarafından tanımlanan alana kırpmasını ister.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Et voilà! Hepsi bu kadar.

Ayrıntılı inceleme

Özellik algılama

CropTarget.fromElement() değerinin desteklenip desteklenmediğini kontrol etmek için:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Kırpma Hedefi Türetme

mainContentArea adlı öğeye odaklanalım. Bu değerden CropTarget türetmek için CropTarget.fromElement(mainContentArea) işlevini çağırın. Döndürülen Promise, başarılı olursa yeni bir CropTarget nesnesi ile çözülür. Aksi takdirde, makul olmayan sayıda CropTarget nesnesi bastıysanız reddedilir.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Element'ün aksine CropTarget nesnesi serileştirilebilir. Örneğin, Window.postMessage() kullanılarak başka bir dokümana aktarılabilir.

Not: mainContentArea için tür, <div> veya iframe değilse CropTarget.fromElement(mainContentArea), Chrome 106'dan önce bunu reddediyordu.

Kırpma

Sekme yakalama sırasında video kanalı, MediaStreamTrack alt sınıfı olan bir BrowserCaptureMediaStreamTrack olarak örneklenir. Bu alt sınıf, cropTo() değerini gösterir. mainContentArea (cropTarget öğesinin türetildiği öğe) dış hatlarına göre kırpma işlemini başlatmak için track.cropTo(cropTarget) işlevini çağırın.

Başarılı olursa Vaat, sonraki tüm video karelerinin mainContentArea sınırlayıcı kutusunda yer alan piksellerden olacağı garanti edildiğinde çözüme kavuşturulur.

Başarısız olursa Taahhüt reddedilir. Bu durum aşağıdaki durumlarda yaşanır:

• CropTarget başka bir sekmede basılmış. (Şimdilik bu kadar. Gelişmeleri takip edin.)
• CropTarget, artık mevcut olmayan bir öğeden türetilmiştir.
• Parçanın klonları var. (1509418 numaralı soruna bakın.)
• Mevcut kanal, kendi kendine çekilmiş video kanalı değildir. Aşağıya bakın.

cropTo() yöntemi, yalnızca kendi kendinizi kaydetmek için değil, sekme yakalama video kanallarında da kullanılabilir. Bu nedenle, parçayı kırpmaya çalışmadan önce, kullanıcının geçerli sekmeyi seçip seçmediğini kontrol etmeniz önerilir. Bu işlem, Capture Handle kullanılarak yapılabilir. preferCurrentTab kullanarak tarayıcıdan kullanıcıyı kendi fotoğrafını çekmeye yönlendirmesini istemek de mümkündür.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Kırpılmamış duruma geri dönmek için null ile cropTo() çağrısı yapın.

// Stop cropping.
await track.cropTo(null);

Engelleyen ve gizlenen içerik

Bölge yakalama için Z-endeksi değil, yalnızca hedefin konumu ve boyutu önemlidir. Hedefi kapatan pikseller yakalanır. Hedefin gizlenen kısımları yakalanmaz.

Bu, Alan Yakalama'nın temelde kırpma işlemi olmasından kaynaklanır. Gelecekte kendi API'si olacak bir alternatif olan Öğe Düzeyinde Yakalama da kapatılmadan bağımsız olarak yalnızca hedefle ilişkilendirilen pikselleri yakalayacaktır. Bu tür bir API'nin, basit kırpma işlemine kıyasla farklı güvenlik ve gizlilik koşulları vardır.

Bölge yakalamanın, içeriği gizleyen nesnelerle ilgili davranışı.

Güvenlik ve gizlilik

Bölge yakalama, sekmedeki tüm pikselleri gözlemleyen bir web uygulamasının bu piksellerin bir kısmını gönüllü olarak kaldırmasına olanak tanır. Yeni bilgi edinilemediği için bu yöntem kesinlikle güvenlidir.

Bölge yakalama, uzak katılımcılara hangi bilgilerin gönderileceğini sınırlamak için kullanılabilir. Örneğin, bazı slaytları paylaşmak istiyor ancak konuşmacı notlarınızı paylaşmak istemiyorsunuz.

Slaytlar ve konuşmacı notları içeren bir web uygulaması.
Notları uzaktan paylaşmak istenmez. İşaret bölgesi yakalama.

Bölge yakalama özelliğinin yerel olarak herhangi bir güvenlik garantisi sunmadığını unutmayın. Bir parça başka bir dokümana aktarıldığında, alıcı doküman parçanın kırpma işlemini geri alabilir ve yakalanan sekmenin tüm piksellerine erişebilir.

Chrome, yakalanan sekmelerin kenarlarına mavi bir çerçeve çizer. Chrome, kırpma işlemi sırasında genellikle kırpılan hedefin etrafında mavi bir kenarlık çizer.

Demo

Glitch'te demoyu çalıştırarak Bölge Yakalama özelliğini deneyebilirsiniz. Kaynak koduna göz atın.

Tarayıcı desteği

Tarayıcı desteği

• 104
• 104
• x
• x

Bölge Yakalama, yalnızca masaüstünde Chrome 104'ten kullanılabilir.

Sırada ne var?

Yakın gelecekte web'de ekran paylaşımını iyileştirecek yeniliklere göz atın:

• Bölge yakalama, diğer sekmelerin yakalanmasını destekler.
• Koşullu Odak, yakalama 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.
• Öğe Düzeyinde Yakalama API'si sağlanabilir.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, Bölge Yakalama ile ilgili deneyimlerinizi öğrenmek istiyor.

Tasarım hakkında bilgi verin

Bölge Yakalama ile ilgili 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 bir sorunuz veya yorumunuz mu var?

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

Uygulamayla ilgili bir sorun mu var?

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

Alan yakalama özelliğini 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

• Spesifikasyon
• Açıklayıcı
• TAG incelemesi
• Chromium hatası
• ChromeStatus.com girişi

Teşekkür

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