Screen Capture API ile geçerli sekmenin tamamını yakalayabilirsiniz. Öğe Yakalama API'sı belirli bir HTML öğesini yakalayıp kaydetmenizi sağlar. Sekmenin tamamının yakalanmasını, belirli bir DOM alt ağacının yakalamasına dönüştürür ve hedef öğenin yalnızca doğrudan alt öğelerini yakalar. Diğer bir deyişle, hem gizlenen hem de kapanan içerikleri kırpıp kaldırır.
Öğe Yakalamayı neden kullanmalısınız?
Bir video konferans uygulamasının gereksinimlerini göz önünde bulundurmak, Öğe Yakalamanın hangi noktalarda faydalı olduğunu anlamanıza yardımcı olabilir. Bir iframe'e üçüncü taraf uygulamaları yerleştirmenize olanak tanıyan bir video konferans uygulamanız varsa, bazen o iframe'i video olarak yakalamak ve uzak katılımcılara aktarmak isteyebilirsiniz.
getDisplayMedia() çağrılıp kullanıcının mevcut sekmeyi seçmesine izin verildiğinde mevcut sekmenin tamamı aktarılır. Bu büyük olasılıkla kullanıcıların kendi videosunu onlara geri gönderir. Bölge Yakalama özelliğini kullanarak bu resmi kırpabilirsiniz.
Ancak, sunumu yapan kişi video konferans uygulamasıyla etkileşimde bulunursa ve bir içerik (açılır liste gibi), yakalanması amaçlanan içeriğin üzerine çizim yaparsa ne olur?
Bölge Yakalama bu konuda size yardımcı olmaz. Açılır listenin bir bölümü, uzaktaki katılımcıların ekranlarında görünebilir.
Bölge Yakalama özelliğinin öğelerin parçalarını bu şekilde yakalaması (içeriği doldurma olarak bilinir) birden çok soruna neden olur:
- İçerik gizlemek, kullanıcının paylaşmak istediği içeriğin görüntülenmesini engelleyebilir.
- Gizli içerikler gizli olabilir (sohbet bildirimlerini düşünün).
- İçeriği gizlemek kafa karıştırıcı olabilir. (Örneğin, uygulamanın yeniden düzenlenmesi, uzaktaki katılımcıların kendi videolarını kısa süreliğine hedeflenen hedefe taşımanızı sağlayabilir.)
Element Capture API, paylaşmak istediğiniz öğeyi hedeflemenize olanak tanıyarak bu sorunların tümünü çözer.
Öğe Yakalama'yı nasıl kullanabilirim?
captureTarget, sayfanızda kullanıcının yakalamak istediği içeriği barındıran bir Öğe'dir. Video konferans web uygulamasının, captureTarget adlı katılımcıyı yakalamasını ve uzak katılımcılarla paylaşmasını istiyorsunuz. Dolayısıyla, captureTarget değerinden bir RestrictionTarget elde edersiniz. Bu RestrictionTarget kullanılarak video parçası kısıtlandıktan sonra söz konusu video kanalındaki kareler artık yalnızca captureTarget öğesinin ve doğrudan DOM alt öğelerinin parçası olan piksellerden oluşur.
captureTarget boyutu, şekli veya konumu değişirse video parçası, web uygulamasından ek giriş gerektirmeden takip edilir. İçeriğin görünmesi, kaybolması veya yerini değiştirmesi de benzer şekilde özel bir işlem gerektirmez.
Aşağıdaki adımları tekrar inceleyin:
Kullanıcının mevcut sekmeyi yakalamasına izin vererek başlayın.
// Ask the user for permission to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
Giriş olarak seçtiğiniz bir öğeyle RestrictionTarget.fromElement() çağırarak bir RestrictionTarget tanımlayın.
// Associate captureTarget with a new RestrictionTarget
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
Ardından giriş olarak RestrictionTarget ile video kanalında restrictTo() adlı kişiyi çağırın. Son söz kesinleştikten sonra sonraki tüm kareler kısıtlanır.
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
// Enjoy! Transmit remotely.
Ayrıntılı inceleme
Özellik algılama
RestrictionTarget.fromElement() hizmetinin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:
if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
// Deriving a restriction target is supported.
}
Kısıtlama Hedefi Türet
captureTarget adlı Öğeye odaklanın. Bundan bir RestrictionTarget elde etmek için RestrictionTarget.fromElement(captureTarget) işlevini çağırın. Döndürülen Söz başarılı olursa yeni bir RestrictionTarget nesnesiyle çözümlenir. Aksi takdirde, makul olmayan sayıda RestrictionTarget nesne bastıysanız reddedilir.
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
Bir Element'in aksine, RestrictionTarget nesnesi serileştirilebilir. Örneğin, Window.postMessage() kullanılarak başka bir dokümana aktarılabilir.
Kısıtlanıyor
Bir sekme yakalanırken video kanalı, restrictTo() görünür. Geçerli sekmeyi yakalarken, restrictTo() öğesini null veya geçerli sekmedeki bir Öğeden türetilmiş herhangi bir RestrictionTarget ile çağırmak geçerlidir.
restrictTo(restrictionTarget) çağrıları, video parçasını DOM'nin geri kalanından bağımsız olarak tek başına çizilmiş gibi bir captureTarget yakalamasına dönüştürür. captureTarget öğesinin tüm alt öğeleri de yakalanır; captureTarget öğesinin kardeşleri yakalamadan çıkarılır. Bunun sonucunda, kanalda yayınlanan tüm kareler captureTarget sınırlarına göre kırpılmış gibi görünür ve başka herhangi bir içeriği gizleyen içerikler kaldırılır.
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
restrictTo(null) için yapılan aramalar, parçayı orijinal durumuna geri döndürür.
// Stop restricting.
await track.restrictTo(null);
restrictTo() çağrısı başarılı olursa döndürülen Söz, sonraki tüm video karelerinin captureTarget ile kısıtlanacağı garanti edilebildiğinde çözüme kavuşturulur.
Başarısız olursa söz reddedilir. restrictTo() aramasının başarısız olmasının nedeni aşağıdakilerden biri olabilir:
restrictionTarget, yakalananın dışında bir sekmede basılmışsa. ("Bunun yerine bu sekmeyi paylaş" düğmesini kullanarak, kullanıcıların herhangi bir zamanda hangi sekmenin yakalanacağını değiştirebileceğini unutmayın.)restrictionTargetartık mevcut olmayan bir öğeden türetilmişse.- Kanalda klonlar olup olmadığı. (1509418 numaralı sayıya bakın.)
- Mevcut parça, kendi kendini gösteren bir video parçası değilse.
restrictionTargetöğesinin türetildiği öğe kısıtlama için uygun değilse.
Kendini yakalama konusunda dikkat edilmesi gereken noktalar
Bir uygulama getDisplayMedia() işlevini çağırdığında ve kullanıcı uygulamanın kendi sekmesini yakalamayı seçtiğinde buna "kendini yakalama" adı verilir.
restrictTo() yöntemi, yalnızca kendi kendini yakalamak için değil, sekmeyle yakalama yapılan tüm video kanallarında gösterilir. Ancak Öğe Yakalama şimdilik yalnızca kendi yakalamanız için etkinleştirilmiştir. Dolayısıyla, kullanıcının, kanalı kısıtlamaya ç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.
Şeffaflık
Uygulamanın getDisplayMedia() üzerinden aldığı video kareleri alfa kanalı içermiyor. Bir uygulama kısmen şeffaf bir yakalama hedefi ayarlarsa alfa kanalının kaldırılmasının bazı olası sonuçları olur:
- Renkler değişebilir. Açık renkli arka plan üzerinde çizilen kısmen şeffaf hedef öğeler, alfa kanalı kaldırıldığında daha koyu, koyu arka plan üzerine çizilen öğeler ise daha açık görünebilir.
- Alfa kanalı maksimum değere ayarlandığında, kullanıcı tarafından görülmeyen veya algılanamayan renkler alfa kanalı kaldırıldığında gösterilecekti. Örneğin, şeffaf bölümlerde
rgba(0, 0, 0, 0)RGBA kodu varsa bu durum, yakalanan çerçevelerde beklenmeyen siyah bölgelerin oluşmasına neden olabilir.
Uygun olmayan yakalama hedefleri
Bir parçayı her zaman geçerli herhangi bir yakalama hedefiyle kısıtlamaya başlamak mümkündür. Ancak belirli koşullarda (örneğin, öğe veya üst öğe display:none) çerçeveler oluşturulmaz. Genel mantık, kısıtlamanın yalnızca pikselleri üst veya kardeş öğelerden ayrı olarak mantıksal olarak belirlenebilen tek, birleşik, iki boyutlu, dikdörtgen bir alandan oluşan bir öğe için geçerli olmasıdır.
Öğenin kısıtlamaya uygun olmasını sağlamak için dikkat edilmesi gereken önemli bir nokta, kendi yığınma bağlamını oluşturması gerektiğidir. Bunu sağlamak için izolasyon CSS özelliğini isolate olarak ayarlayarak belirtebilirsiniz.
<div id="captureTarget" style="isolation: isolate;"></iframe>
Hedef öğenin, herhangi bir noktada (örneğin, uygulama CSS özelliklerini değiştirirse) kısıtlama için uygun ve uygun olma durumları arasında geçiş yapılabileceğini unutmayın. Makul yakalama hedefleri kullanmak ve özelliklerini beklenmedik şekilde değiştirmekten kaçınmak uygulamaya bağlıdır. Hedef öğe uygun bulunmazsa hedef öğe tekrar kısıtlama için uygun hale gelene kadar kanalda yeni kareler yayınlanmaz.
Öğe Yakalama Etkinleştiriliyor
Element Capture API, Chrome'daki masaüstü sürümünde Element Capture işaretinin arkasında bulunur ve chrome://flags/#element-capture adresinde etkinleştirilebilir.
Ayrıca bu özellik, masaüstü cihazlarda Chrome 121'de bir kaynak denemesine giriyor. Bu sayede, geliştiricilerin, sitelerini ziyaret eden kullanıcılar gerçek kullanıcılardan veri toplamak için bu özelliği etkinleştirmelerine olanak tanıyabilecekler. Kaynak denemeleri hakkında daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleye bakın.
Güvenlik ve gizlilik
Güvenlik dengesini anlamak için Öğe Yakalama spesifikasyonunun Gizlilik ve Güvenlikle İlgili Dikkat Edilmesi Gerekenler bölümüne bakın.
Chrome tarayıcı, yakalanan sekmelerin kenarlarına mavi bir kenarlık çizer.
Demo
Glitch'te demo sürümünü çalıştırarak Öğe Yakalama ile oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.
Geri bildirim
Chrome ekibi ve web standartları topluluğu, Element Capture deneyimlerinizi öğrenmek ister.
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.
Faydalı bağlantılar
Tasdik
Fotoğraf: Paul Skorupskas'ın Unsplash'teki fotoğrafı