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, bu eksiklikleri giderir. 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 hizmeti sağlayıcıyla iş ortaklığı yaparak web uygulamasını kaynakta farklı bir iframe olarak yerleştirebilirsiniz. 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ırpın. 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 (muhtemelen <div>) 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 kutusu içinde kalan 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 takip eder.

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

Web uygulamanızda, giriş olarak seçtiğiniz öğeyi kullanarak CropTarget.fromElement()'u ç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);

Görüntülü görüşme 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.
}

CropTarget 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: Chrome 106'tan önce mainContentArea türü <div> veya iframe değilse CropTarget.fromElement(mainContentArea) 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() özelliğini 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 sonraki tüm video karelerinin mainContentArea sınır kutusu içinde kalan piksellerden oluşacağı garanti edildiğinde Promise çözülür.

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ş bir 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, Herkese Açık Kullanıcı Adını Al kullanılarak yapılabilir. preferCurrentTab kullanarak tarayıcının kullanıcıyı kendi fotoğrafını çekmeye yönlendirmesini de isteyebilirsiniz.

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

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

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

Engelleyen ve gizlenen içerik

Bölge yakalama için z-dizin değil, yalnızca hedefin konumu ve boyutu önemlidir. Hedefi örten 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, Öğe düzeyinde yakalamadır. Yani, engellemelerden bağımsız olarak yalnızca hedefle ilişkili pikseller yakalanı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 ancak konuşmacı notlarınızı paylaşmamak isteyebilirsiniz.

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ırpmasını kaldırabilir 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 özelliği, Chrome 104'ten itibaren yalnızca masaüstünde kullanılabilir.

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 görebilirsiniz:

• Bölge yakalama, diğer sekmelerin yakalanmasını destekler.
• 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.
• Öğe düzeyinde Capture API 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 özelliği beklediğiniz gibi çalışmıyor mu? 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

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

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

Teşekkür ederiz

Bu makaleyi inceleyen Joe Medley'e teşekkürler.