Ekran Görüntüsü API'si ile geçerli sekmenin tamamını yakalayabilirsiniz. Öğe Yakalama API'si, belirli bir HTML öğesini yakalayıp kaydetmenize olanak tanır. Sekmenin tamamının yakalanmasını, yalnızca hedef öğenin doğrudan alt öğelerini yakalayarak belirli bir DOM alt ağacının yakalanmasına dönüştürür. Diğer bir deyişle, hem engelleyen hem de engellenen içeriği kırpıp kaldırır.
Öğe yakalama özelliğini neden kullanmalısınız?
Bir video konferans uygulamasının şartlarını göz önünde bulundurmak, Öğe Yakalama'nın nerede yararlı olduğunu anlamanıza yardımcı olabilir. Üçüncü taraf uygulamalarını bir iframe'e yerleştirmenize olanak tanıyan bir video konferans uygulamanız varsa bazen bu iframe'i video olarak yakalayıp uzak katılımcılara aktarmak isteyebilirsiniz.
getDisplayMedia() işlevini çağırıp kullanıcının mevcut sekmeyi seçmesine izin vermek, mevcut sekmenin tamamını iletir. Bu durumda, kullanıcıların kendi videoları kendilerine geri gönderilir. Alan yakalama özelliğini kullanarak bu alanı kırpabilirsiniz.
Ancak sunucu video konferans uygulamasıyla etkileşime geçerse ve açılır liste gibi bazı içerikler, kaydedilmesi amaçlanan içeriğin üzerine çizilirse ne olur?
Bölge yakalama bu konuda size yardımcı olmaz. Açılır listenin bir kısmı uzak katılımcıların ekranlarında görünebilir.
Bölge yakalamanın öğelerin bölümlerini bu şekilde yakalaması (içeriği gizleme olarak bilinir) birden fazla soruna neden olur:
- İçeriğin gizlenmesi, kullanıcının paylaşmak istediği içeriğin görüntülenmesini engelleyebilir.
- Gizlenen içerik özel olabilir (ör. sohbet bildirimleri).
- İçeriği gizlemek kafa karıştırıcı olabilir. (Örneğin, uygulamanın yeniden düzenlenmesi, uzak katılımcıların kendi videolarını yakalanan hedefin üzerine kısa bir süreliğine getirebilir.)
Öğe yakalama API'si, paylaşmak istediğiniz öğeyi hedeflemenize olanak tanıyarak tüm bu sorunları çözer.
Öğe yakalama özelliğini nasıl kullanırım?
captureTarget, sayfanızda kullanıcının yakalamak istediği içeriği içeren bir öğe'dir. Video konferans web uygulamasının captureTarget'ü yakalamasını ve uzak katılımcılarla paylaşmasını istiyorsunuz. Böylece captureTarget'ten RestrictionTarget elde edersiniz. Bu RestrictionTarget kullanılarak video parçası kısıtlandığında, söz konusu video parçasındaki kareler artık yalnızca captureTarget ve doğrudan DOM alt öğelerinin parçası olan piksellerden oluşur.
captureTarget boyut, şekil veya konum değiştirirse video parçası, web uygulamalarından herhangi bir ek giriş gerektirmeden bu değişiklikleri izler. Görünen, kaybolan veya hareket eden içeriğin gizlenmesi de benzer şekilde özel bir işlem gerektirmez.
Bu 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()'u ç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, video parçasında restrictTo() işlevini çağırın.RestrictionTarget Son söz çözüldükten 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() değerinin desteklenip desteklenmediğini kontrol etmek için:
if ("RestrictionTarget" in self && "fromElement" in RestrictionTarget) {
// Deriving a restriction target is supported.
}
RestrictionTarget türetme
captureTarget adlı öğeye odaklanın. Bu değerden RestrictionTarget türetmek için RestrictionTarget.fromElement(captureTarget) işlevini çağırın. Döndürülen Promise, başarılı olursa yeni bir RestrictionTarget nesnesi ile çözülür. Aksi takdirde, makul olmayan sayıda RestrictionTarget nesnesi bastıysanız reddedilir.
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);
Öğenin aksine, RestrictionTarget nesnesi serileştirilebilir. Örneğin, Window.postMessage() kullanılarak başka bir dokümana aktarılabilir.
Kısıtlanıyor
Sekme kaydederken video parçası restrictTo()'ü gösterir. Mevcut sekme yakalanırken restrictTo(), null veya mevcut sekmedeki bir Öğe'den türetilen herhangi bir RestrictionTarget ile çağrılabilir.
restrictTo(restrictionTarget)'nin, video parçasını DOM'un geri kalanından bağımsız olarak tek başına çizilmiş gibi captureTarget'nin bir yakalamasına dönüştürmesini ister. captureTarget'nin tüm alt öğeleri de yakalanır; captureTarget'nin kardeşleri yakalanmaz. Sonuç olarak, parçada yayınlanan tüm kareler captureTarget'ün dış hatlarına göre kırpılmış gibi görünür ve engelleyen ve engellenen içerikler kaldırılır.
// Start restricting the self-capture video track using the RestrictionTarget.
await track.restrictTo(restrictionTarget);
restrictTo(null) çağrıları, parçayı orijinal durumuna döndürür.
// Stop restricting.
await track.restrictTo(null);
restrictTo() çağrısı başarılı olursa sonraki tüm video karelerinin captureTarget ile sınırlandırılacağı garanti edildiğinde döndürülen Promise çözülür.
Başarısız olursa Promise reddedilir. restrictTo() çağrısının başarısız olması aşağıdakilerden biri nedeniyle olabilir:
restrictionTarget, yakalanan sekme dışında bir sekmede basıldıysa. ("Bunun yerine bu sekmeyi paylaş" düğmesini kullanarak kullanıcıların diledikleri zaman hangi sekmenin yakalanacağını değiştirebileceğini unutmayın.)restrictionTarget, artık mevcut olmayan bir öğeden türetilmişse.- Parçanın kopyaları varsa. (1509418 numaralı soruna bakın.)
- Mevcut parça, kendi kendine çekilmiş video parçası değilse.
restrictionTargetöğesinin türetildiği öğe kısıtlamaya uygun değilse.
Kendi kendinize çekim yapmayla ilgili dikkat edilmesi gereken noktalar
Bir uygulama getDisplayMedia() işlevini çağrdığında ve kullanıcı uygulamanın kendi sekmesini yakalamayı seçtiğinde buna "kendi kendini yakalama" denir.
restrictTo() yöntemi, yalnızca kendi kendinizi kaydetmek için değil, sekme yakalama video kanallarında da kullanılabilir. Ancak öğe yakalama özelliği şu anda yalnızca kendi kendinizi yakalama için etkindir. Bu nedenle, parçayı kısıtlamaya çalışmadan önce kullanıcının mevcut 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.
Şeffaflık
Uygulamanın getDisplayMedia() aracılığıyla aldığı video kareleri alfa kanalı içermez. Bir uygulama kısmen şeffaf bir yakalama hedefi ayarlarsa alfa kanalının soyulmasının bazı olası sonuçları vardır:
- Renkler değişebilir. Açık arka plan üzerine çizilen kısmen şeffaf hedef öğeler, alfa kanalı kaldırıldığında daha koyu, koyu arka plan üzerine çizilenler ise daha açık görünebilir.
- Alfa kanalı maksimuma ayarlandığında kullanıcı tarafından görünmeyen veya algılanamayan renkler, alfa kanalı kaldırıldıktan sonra görünür. Örneğin, şeffaf bölümlerde RGBA kodu
rgba(0, 0, 0, 0)varsa bu durum, yakalanan karelerde beklenmedik siyah bölgelere neden olabilir.
Uygun olmayan yakalama hedefleri
Bir parçayı herhangi bir geçerli yakalama hedefiyle kısıtlamaya başlamak her zaman mümkündür. Ancak, belirli koşullar altında çerçeve oluşturulmaz. Örneğin, öğe veya bir üst öğe display:none ise çerçeve oluşturulmaz. Genel gerekçe, kısıtlamanın yalnızca tek, birbirine bağlı, iki boyutlu, dikdörtgen bir alan içeren ve pikselleri herhangi bir üst öğe veya kardeş öğeden bağımsız olarak mantıksal olarak belirlenebilen bir öğe için geçerli olmasıdır.
Öğenin kısıtlamaya uygun olmasını sağlamak için dikkat edilmesi gereken önemli noktalardan biri, öğenin kendi yığın bağlamını oluşturması gerektiğidir. Bunu sağlamak için isolation CSS mülkünü isolate olarak ayarlayarak belirtebilirsiniz.
<div id="captureTarget" style="isolation: isolate;"></iframe>
Hedef öğenin, kısıtlamaya uygun ve uygun olmayan arasında herhangi bir noktada geçiş yapabileceğini unutmayın (ör. uygulama CSS özelliklerini değiştirirse). Makul yakalama hedefleri kullanmak ve özelliklerini beklenmedik şekilde değiştirmemek uygulamaya bağlıdır. Hedef öğe uygun olmazsa hedef öğe tekrar kısıtlamaya uygun hale gelene kadar parçaya yeni kareler eklenmez.
Öğe yakalamayı etkinleştirme
Element Capture API, masaüstünde Chrome'da Element Capture işaretinin arkasında bulunur ve chrome://flags/#element-capture adresinden etkinleştirilebilir.
Bu özellik, Chrome 121'den itibaren masaüstünde kaynak denemesine giriyor. Bu sayede geliştiriciler, sitelerinin ziyaretçilerine gerçek kullanıcılardan veri toplamaları için bu özelliği etkinleştirebilir. Kaynak denemeleri hakkında daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.
Güvenlik ve gizlilik
Güvenlikle ilgili avantajları ve dezavantajları anlamak için Öğe Yakalama spesifikasyonunun Gizlilik ve Güvenlik Hakkında Dikkat Edilmesi Gerekenler bölümüne göz atın.
Chrome tarayıcı, yakalanan sekmelerin kenarlarına mavi bir kenarlık çizer.
Demo
Glitch'te demoyu çalıştırarak Öğe Yakalama ile oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.
Geri bildirim
Chrome Ekibi ve web standartları topluluğu, Öğe 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.
Faydalı bağlantılar
Tasdik
Fotoğraf: Paul Skorupskas, Unsplash