Web platformu, bir web uygulamasının mevcut sekmenin video kaydını yakalamasına zaten izin verir. Artık video kanallarını kırpmak için kullanılan bir mekanizma olan Region Capture ile birlikte gelir. Web uygulaması, geçerli sekmenin bir bölümünü ilgili alanı olarak belirler ve tarayıcı bu alanın dışındaki tüm pikselleri kırpar.
Web uygulamaları önceden video parçalarını "manuel olarak" kırpabiliyordu. Yani, web uygulamaları her bir kareyi doğrudan işleyebiliyordu. Bu ne güçlü ne de yüksek performanslıydı. Bölge Yakalama özelliği bu eksiklikleri giderir. Web uygulaması artık tarayıcıya, işi kendi adına yapması için talimat verebilir.
Bölge Yakalama hakkında
Dynamic ContentTM ile bir web sitesi oluşturdunuz. Bugüne kadarki en iyi web uygulaması ve kullanıcılar genellikle diğer kullanıcılarla ortak olarak onu kullanmaktan vazgeçemiyor. Bir sonraki olası adım, sanal konferans özelliklerini yerleştirmektir. Siz de bu yaklaşımı kullanmaya karar verdiniz. Mevcut bir video konferans servis sağlayıcısıyla birlikte çalışırken, sağlayıcının web uygulamasını kaynaklar arası iframe olarak yerleştiriyorsunuz. Video konferans web uygulaması, geçerli sekmeyi video kanalı olarak yakalar ve uzak katılımcılara iletir.
Pek de hızlı değil... İnsanların kendi videolarını onlara geri aktarmak istemezsiniz, değil mi? Bu kısmı kırpalım. Ama nasıl? Yerleştirilmiş iframe hangi içeriği nerede gösterdiğinizi bilmediğinden, yardım olmadan kırpılamaz. Teoride, istenen koordinatları aktarabilirsiniz. Peki kullanıcı pencereyi yeniden boyutlandırırsa ne olur? Görüntü alanı kaydırılsın mı? Yakınlaştırma mı uzaklaştırma mı yapıyorsunuz? Sayfayla bir düzen değişikliğine neden olacak şekilde etkileşime geçer mi? Yeni koordinatları yakalama iframe'ine gönderseniz bile, zamanlama sorunları bazı karelerin yanlış kırpılmasına neden olabilir.
O zaman Bölge Yakalama'yı kullanalım. Sayfanızda bir Element, belki de ana içeriğin bulunduğu bir <div> yer alıyor. mainContentArea diyelim. 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. Dolayısıyla, mainContentArea değerinden bir CropTarget elde edersiniz. Bu CropTarget öğesini video konferans web uygulamasına iletiyorsunuz. Bu CropTarget öğesini kullanarak video parçası kırpıldıktan sonra kanaldaki kareler artık yalnızca mainContentArea sınırlama kutusunun içinde kalan piksellerden oluşur. mainContentArea boyutu, şekli veya konumu değişirse video kanalı, her iki web uygulamasından ek giriş gerekmeden takip edilir.
Aşağıdaki adımların üzerinden tekrar geçelim:
Web uygulamanızda bir CropTarget öğesini, giriş olarak seçtiğiniz öğeyle CropTarget.fromElement() çağırarak 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 belgesini video konferans web uygulamasına iletiyorsunuz.
// 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 çekim video kanalında cropTo() çağrısı yaparak tarayıcıdan, kanalı 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.
İşte oldu! İşleminiz tamamlanmıştır.
Ayrıntılı inceleme
Özellik algılama
CropTarget.fromElement() hizmetinin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Kırpma Hedefi Türetme
mainContentArea adlı Öğeye odaklanalım. Bundan bir CropTarget elde etmek için CropTarget.fromElement(mainContentArea) işlevini çağırın. Döndürülen Söz başarılı olursa yeni bir CropTarget nesnesiyle çözümlenir. Aksi takdirde, makul olmayan sayıda CropTarget nesne bastıysanız reddedilir.
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Element öğesinin 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 kanalı, MediaStreamTrack alt sınıfı olan BrowserCaptureMediaStreamTrack olarak örneklenir. Bu alt sınıf, cropTo() öğesini açığa çıkarır. mainContentArea öğesinin (cropTarget'ın elde edildiği öğe) sınırlarına göre kırpmaya başlamak 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ı kutusunda yer alan piksellerden oluşacağı garanti edilebildiğinde söz konusu çözüme ulaştırılır.
Başarısız olursa söz reddedilir. Bu, aşağıdaki durumlarda gerçekleşir:
CropTargetbaşka bir sekmede basıldı. (Şu an için bizi takip etmeye devam edin.)CropTarget, artık mevcut olmayan bir öğeden türetildi.- Kanalda klonlar var. (1509418 numaralı sayıya bakın.)
- Mevcut parça, kendi kendini gösteren bir video parçası değil. Aşağıya bakın.
cropTo() yöntemi, yalnızca kendi kendini yakalamak için değil, sekmeyle yakalama yapılan tüm video kanallarında gösterilir. Dolayısıyla, kullanıcının kanalı kırpmaya çalışmadan önce geçerli sekmeyi seçip seçmediğini kontrol etmeniz önerilir. Bu işlem, Herkese açık kullanıcı adı kullanılarak yapılabilir. Tarayıcının, preferCurrentTab kullanarak kullanıcıyı kendisinin fotoğrafını çekmeye yönlendirmesi 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ın.
// Stop cropping.
await track.cropTo(null);
İçeriği kapatma
Bölge Yakalama için Z-endeksi değil, yalnızca hedefin konumu ve boyutu. Hedefi kapatan pikseller yakalanır. Hedefin gizlenmiş bölümleri yakalanmaz.
Bu, Bölge Yakalama özelliğinin kırpılmasından kaynaklanan bir durumdur. Kendi gelecekte API'si olacak bir alternatif de Öğe Düzeyinde Yakalama'dır. Yani, kapamalardan bağımsız olarak yalnızca hedefle ilişkilendirilen pikselleri yakalar. Böyle bir API'nin, basit kırpmadan farklı güvenlik ve gizlilik gereksinimleri vardır.
Güvenlik ve gizlilik
Bölge Yakalama, sekmedeki tüm pikselleri gözlemlemekte olan bir web uygulamasının bu piksellerden bazılarını gönüllü olarak kaldırmasına izin verir. Yeni bilgi edinilemeyeceği için, açık bir şekilde güvenlidir.
Bölge Yakalama, uzak katılımcılara hangi bilgilerin gönderileceğini sınırlamak için kullanılabilir. Örneğin, yalnızca birkaç slayt paylaşmak istiyor ancak konuşmacı notlarınızı paylaşmak isteyebilirsiniz.
Notları uzaktan paylaşmak son derece istenmeyen bir durumdur. Bölge Yakalama.
Region Capture'ın yerel olarak herhangi bir güvenlik garantisi eklemediğini unutmayın. Bir parkuru başka bir dokümana aktarırken, alıcı doküman parçanın kırpma işlemini geri alabilir ve yakalanan sekmenin tüm piksellerine erişim elde edebilir.
Chrome, yakalanan sekmelerin kenarlarına mavi bir kenarlık çizer. Kırpma işlemi sırasında Chrome genellikle kırpılan hedefin etrafına mavi kenarlığı çizer.
Demo
Glitch'te demo sürümünü çalıştırarak Region Capture ile oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.
Tarayıcı desteği
Tarayıcı Desteği
- 104
- 104
- x
- x
Bölge Yakalama, yalnızca masaüstündeki Chrome 104 sürümünde kullanılabilir.
Sırada ne var?
Yakın gelecekte web'de ekran paylaşımının iyileştirilmesine yardımcı olacak özelliklere 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 böyle bir odak değişikliğinden kaçınması için talimat vermesine olanak tanır.
- Öğe Düzeyinde Yakalama API'si sağlanabilir.
Geri bildirim
Chrome ekibi ve web standartları topluluğu, Region Capture deneyimlerinizle ilgili görüşlerinizi öğrenmek istemektedir.
Bize tasarım hakkında bilgi verin
Bölge Yakalama ile ilgili beklediğiniz gibi çalışmayan bir özellik var mı? Ya da fikrinizi uygulamak için ihtiyacınız olan eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?
- GitHub deposunda spesifikasyon sorunu kaydedin veya mevcut bir soruna düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorun mu var?
Chrome'un uygulamasında 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 yeniden oluşturma işlemiyle ilgili basit talimatları eklediğinizden emin olun. Glitch hızlı ve kolay yeniden oluşturma paylaşımı için idealdir.
Desteği göster
Bölge Yakalama özelliğini kullanmayı düşünü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 özellikleri desteklemenin ne kadar kritik olduğunu gösterir.
@ChromiumDev adresine tweet göndererek nerede ve nasıl kullandığınızı bize bildirin.
Faydalı bağlantılar
Teşekkür
Bu makaleyi incelediğiniz için Joe Medley'ye teşekkür ederiz.