Herhangi bir öğeden video akışı yakalayın

François Beaufort
François Beaufort
GitHub
Elad Alon

Ekran Görüntüsü API ile geçerli sekmenin tamamını yakalayabilirsiniz. Element Capture API, belirli bir HTML öğesini yakalayıp kaydetmenizi sağlar. 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.

Chrome'daki bir video konferans görüşmesinin ekran görüntüsü.
Elad, François ile yaptığı video konferans görüşmesinde üçüncü taraf uygulaması kullanıyor.

getDisplayMedia() çağrısı yapıldığında ve kullanıcının geçerli sekmeyi seçmesine izin verildiğinde mevcut sekmenin tamamı aktarılır. 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ı ile etkileşimde bulunursa ve açılır liste gibi bazı içerikler, yakalanması amaçlanan içeriğin üstüne gelirse ne olur?

Yakalanması gereken içeriğin yer aldığı bir açılır listenin ekran görüntüsü.
Kaydedilecek içeriğin üst kısmında bir açılır liste gösterilir.

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.

Açılır listenin ekran görüntüsü
Elad'ın açılır listesi, François'in aldığı içeriğin üstünde gösterilir.

Bölge Yakalama özelliğinin, öğelerin bazı bölümlerini bu şekilde yakaladığı (içerik kapatma olarak bilinir) birden çok 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, uzaktaki katılımcıların kendi videolarını kısaca yakalanan hedefe getirebilir.)

Öğe yakalama API'si, paylaşmak istediğiniz öğeyi hedeflemenize olanak tanıyarak tüm bu sorunları çözer.

Görüntülenen açılır liste olmadan hedef öğenin ekran görüntüsü.
François, Elad'ın açtığı açılır listeyi görmüyor.

Öğ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 verilerini uzaktaki 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 boyutu, şekli veya konumu değişirse video kanalı, herhangi bir web uygulamasından ek giriş yapılmasına gerek kalmadan devam eder. Benzer şekilde, görünen, kaybolan veya etrafta gezinen içeriklerin gizlenmesi de özel bir işlem gerektirmez.

Bu adımları tekrar inceleyin:

Kullanıcının geçerli 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, giriş olarak RestrictionTarget ile video kanalında restrictTo() öğesini çağırın. 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 Vaat, başarılı olursa yeni bir RestrictionTarget nesnesiyle çö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ştirebileceklerini 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 işlevinin türetildiği öğe kısıtlama için 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, şu anda yalnızca kendi kendine yakalama için etkin. 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, Capture Handle kullanılarak yapılabilir. preferCurrentTab kullanarak tarayıcıdan kullanıcıyı kendi fotoğrafını çekmeye yönlendirmesini istemek de mümkündür.

Ş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.
Dikdörtgen olmayan şeffaf yakalama hedefinin sonucunun ekran görüntüsü.
Dikdörtgen olmayan şeffaf yakalama hedefi video akışı (sağda), opak mavi bir daire içeren siyah arka planlı bir dikdörtgendir.

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>

Uygulama CSS özelliklerini değiştirirse hedef öğenin herhangi bir rastgele noktada kısıtlama için uygun olma ve olmama durumu arasında geçiş yapabileceğini unutmayın. Makul yakalama hedefleri kullanmak ve özelliklerini beklenmedik şekilde değiştirmemek uygulamaya bağlıdır. Hedef öğe uygun bulunmazsa hedef öğe tekrar kısıtlama için uygun hale gelene kadar yeni kareler kanalda yayınlanmaz.

Öğe yakalamayı etkinleştirme

Element Capture API, Chrome'daki Chrome uygulamasında Element Capture bayrağının ardından kullanılabilir ve chrome://flags/#element-capture adresinden etkinleştirilebilir.

Bu özellik, Chrome 121'den itibaren masaüstünde kaynak deneme sürümüne de 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 kodu kontrol ettiğinizden emin olun.

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 bir sorun mu var?

Chrome&#39;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 tekrarlar paylaşmak için idealdir.

Tasdik

Fotoğraf: Paul Skorupskas'ın Unsplash üzerinde