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

François Beaufort

Elad Alon

Web platformu, web uygulamalarının mevcut sekmenin video parçasını yakalamasına zaten izin veriyor. Artık bu video parçalarını kırpmak için kullanılan bir mekanizma olan Bölge Yakalama ile birlikte geliyor. 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 kendi adına çalışmasını söyleyebilir.

Bölge Yakalama hakkında

Dynamic Content™ ile bir web sitesi oluşturdunuz. Bu web uygulaması, kullanıcıların işbirliği içinde sık sık kullandığı, şimdiye kadar oluşturulmuş en iyi web uygulaması. Bir sonraki adım olarak sanal konferans özelliklerini yerleştirebilirsiniz. Bu seçeneği kullanmaya karar verirsiniz. Mevcut bir video konferans hizmeti sağlayıcısıyla iş ortaklığı yapıp web uygulamasını kaynaklar arası bir iFrame olarak yerleştiriyorsunuz. Video konferans web uygulaması, mevcut sekmeyi video parçası olarak yakalar ve uzaktaki katılımcılara iletir.

Bir dakika… Kullanıcıların kendi videolarını onlara geri göndermek istemezsiniz, değil mi? O kısmı kırpmanız daha iyi olur. Peki nasıl? Yerleştirilmiş iFrame, hangi içeriği nerede gösterdiğinizi bilmediği için biraz yardıma ihtiyaç duymadan kırpma işlemi yapamaz. Teorik olarak, amaçlanan koordinatları iletebilirsiniz. Ancak kullanıcı pencereyi yeniden boyutlandırırsa ne olur? Görüntü alanını kaydırıyor mu? Yakınlaştırma veya uzaklaştırma mı yapıyor? Sayfayla, düzende değişikliğe neden olacak şekilde etkileşimde bulunuyor mu? Yeni koordinatları yakalama iFrame'ine gönderdiğinizde bile zamanlama sorunları nedeniyle bazı kareler yanlış kırpılabilir.

O zaman bölge yakalama özelliğini kullanalım. Sayfanızda Element (ör. <div>) bulunuyor ve bu öğe ana içeriği barındırıyor. Bu işleme mainContentArea adını verelim. Video konferans web uygulamasının, bu öğenin sınırlayıcı kutusu ile tanımlanan alanı uzaktan yakalamasını ve paylaşmasını istiyorsunuz. Bu nedenle, mainContentArea öğesinden CropTarget türetirsiniz. Bu CropTarget değerini video konferans web uygulamasına iletirsiniz. Video parçası bu CropTarget değeri kullanılarak kırpıldıktan sonra, bu parçadaki kareler artık yalnızca mainContentArea sınırlayıcı kutusunun içinde kalan piksellerden oluşur. mainContentArea boyutu, şekli veya konumu değişirse video parçası, her iki web uygulamasından da ek giriş yapılmasına gerek kalmadan bu değişikliği takip eder.

Bu adımları tekrar inceleyelim:

Web uygulamanızda CropTarget tanımlamak için CropTarget.fromElement() işlevini istediğiniz öğeyi giriş olarak kullanarak çağırırsı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, video konferans web uygulamasına iletilir.

// 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 birlikte kendi kendine çekim video parçasında cropTo() işlevini çağırarak tarayıcıdan parçayı CropTarget ile 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à! İşlem tamamlandı.

Ayrıntılı inceleme

Özellik algılama

CropTarget.fromElement() öğesinin 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. Bundan CropTarget elde etmek için CropTarget.fromElement(mainContentArea) işlevini çağırın. Başarılı olursa döndürülen Promise, yeni bir CropTarget nesnesiyle çözümlenir. Aksi takdirde, makul olmayan sayıda CropTarget nesnesi oluşturduysanız reddedilir.

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

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

Kırpma

Sekme yakalama sırasında video parçası, MediaStreamTrack sınıfının alt sınıfı olan BrowserCaptureMediaStreamTrack olarak oluşturulur. Bu alt sınıf cropTo() öğesini kullanıma sunar. Kırpma işlemini mainContentArea'ın (cropTarget'ın türetildiği öğe) konturlarına göre başlatmak için track.cropTo(cropTarget) işlevini çağırın.

İşlem başarılı olursa sonraki tüm video karelerinin mainContentArea sınırlayıcı kutusunun içinde kalan piksellerden oluşacağı garanti edildiğinde Promise çözülür.

İşlem başarısız olursa Promise reddedilir. Bu durum aşağıdaki koşullarda meydana gelir:

• CropTarget başka bir sekmede oluşturulmuş. (Şimdilik - bizi takip etmeye devam edin.)
• CropTarget, artık mevcut olmayan bir öğeden türetildi.
• Parçada klonlar var. (1509418 numaralı soruna bakın.)
• Mevcut parça, kendi çekiminiz olan bir video parçası değildir. Aşağıya bakın.

cropTo() yöntemi, yalnızca kendi kaydınız için değil, herhangi bir sekme kaydı video parçasında kullanılabilir. Bu nedenle, parçayı kırpmayı denemeden ö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. Tarayıcıdan, preferCurrentTab kullanarak 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 geri dönmek için cropTo() işlevini null ile çağırın.

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

Kapatma ve kapatılan içerik

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

Bu, Bölge Yakalama özelliğinin esasen kırpma işlemine dayanmasının bir sonucudur. Gelecekte kendi API'si olacak bir alternatif ise öğe düzeyinde yakalamadır. Bu, hedefle ilişkili pikselleri, tıkanmalardan bağımsız olarak yakalamak anlamına gelir. Bu tür bir API, basit kırpma işlemine kıyasla farklı bir güvenlik ve gizlilik şartları kümesine sahiptir.

Güvenlik ve gizlilik

Bölge Yakalama, sekmedeki tüm pikselleri zaten gözlemleyen bir web uygulamasının bu piksellerden bazılarını isteğe bağlı olarak kaldırmasına olanak tanır. Yeni bilgi edinilemediği için açıkça güvenlidir.

Bölge Yakalama, uzak katılımcılara gönderilen bilgileri sınırlamak için kullanılabilir. Örneğin, bazı slaytları paylaşmak ancak konuşmacı notlarınızı paylaşmamak isteyebilirsiniz.

Bölge Yakalama'nın yerel olarak herhangi bir güvenlik garantisi sağlamadığını unutmayın. Bir parçayı başka bir dokümana aktarırken, 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. Kırpma işlemi sırasında Chrome genellikle kırpılan hedefin etrafına mavi bir kenarlık çizer.

Demo

Demoyu çalıştırarak Bölge Yakalama özelliğini deneyebilirsiniz.

Tarayıcı desteği

Bölge Yakalama yalnızca masaüstünde Chrome 104 ve sonraki sürümlerde kullanılabilir.

Sırada ne var?

Yakın gelecekte web'de ekran paylaşımını iyileştirecek yeniliklere dair önizlemeyi aşağıda bulabilirsiniz:

• Bölge Yakalama, diğer sekmelerin yakalanmasını destekleyecek.
• Koşullu Odak, yakalama web uygulamasının tarayıcıya odağı yakalanan ekran yüzeyine geçirmesini veya böyle bir odak değişikliğinden kaçınmasını söylemesine 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ğiyle ilgili olarak beklediğiniz gibi çalışmayan bir durum var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

• GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna 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 bildirin. Mümkün olduğunca fazla ayrıntı ve yeniden üretmeyle ilgili basit talimatlar ekleyin.

Desteğinizi gösterme

Bölge Yakalama'yı kullanmayı planlı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 özelliklerin desteklenmesinin ne kadar önemli olduğunu gösterir.

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

Faydalı bağlantılar

• Spesifikasyon
• Açıklama
• TAG review
• Chromium hatası
• ChromeStatus.com girişi

Teşekkür

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