Gizliliği korumaya yönelik ekran paylaşımı denetimleri

François Beaufort

Elad Alon

Web platformunda Screen Capture API ile sekmeleri, pencereleri ve ekranları paylaşmak zaten mümkündür. Kısacası, getDisplayMedia(), kullanıcının medya akışı olarak yakalamak için bir ekran veya ekranın bir bölümünü (ör. pencere) seçmesine olanak tanır. Bu yayın daha sonra kaydedilebilir veya ağ üzerinden başkalarıyla paylaşılabilir. Gizliliği daha iyi korumak ve kişisel bilgilerin yanlışlıkla paylaşılmasını önlemek için API'de son zamanlarda değişiklikler yapıldı.

Gizliliği korumaya yönelik ekran paylaşımı için kullanabileceğiniz kontrollerin listesini aşağıda bulabilirsiniz:

• displaySurface seçeneği, web uygulamasının belirli bir görüntüleme yüzeyi türü (sekmeler, pencereler veya ekranlar) sunmayı tercih ettiğini gösterebilir.
• Kullanıcının ekranın tamamını paylaşmasını önlemek için monitorTypeSurfaces seçeneği kullanılabilir.
• surfaceSwitching seçeneği, Chrome'un kullanıcının paylaşılan sekmeler arasında dinamik olarak geçiş yapmasına izin verip vermeyeceğini belirtir.
• selfBrowserSurface seçeneği, kullanıcının mevcut sekmeyi paylaşmasını engellemek için kullanılabilir. Bu, "aynalar salonu" etkisini önler.
• systemAudio seçeneği, Chrome'un kullanıcıya yalnızca alakalı ses yakalama seçenekleri sunmasını sağlar.

getDisplayMedia() ile ilgili değişiklikler

getDisplayMedia()'da aşağıdaki değişiklikler yapıldı.

displaySurface seçeneği

Pencere veya ekran paylaşımıyla en iyi şekilde çalışan, özel kullanıcı yolculuklarına sahip web uygulamaları, Chrome'dan medya seçicide pencereleri veya ekranları daha belirgin bir şekilde sunmasını isteyebilir. Fırsatın sıralaması değişmez ancak ilgili bölme önceden seçilir.

displaySurface seçeneğinin değerleri şunlardır:

• Sekmeler için "browser".
• "window" for windows.
• "monitor" ekranlar için.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

Belirli bir pencereyi veya ekranı önceden seçme seçeneği sunmadığımızı unutmayın. Bu, web uygulamasının kullanıcı üzerinde çok fazla güç sahibi olmasını önlemek için tasarlanmıştır.

monitorTypeSurfaces seçeneği

Şirketleri çalışan hatası nedeniyle özel bilgilerin sızdırılmasından korumak için video konferans web uygulamaları artık monitorTypeSurfaces değerini "exclude" olarak ayarlayabilir. Chrome, medya seçicideki ekranları hariç tutar. Bu kampanyayı dahil etmek için "include" olarak ayarlayın. Şu anda monitorTypeSurfaces için varsayılan değer "include"'dir ancak varsayılan değer gelecekte değişebileceğinden web uygulamalarının bunu açıkça ayarlaması önerilir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

Açık bir monitorTypeSurfaces: "exclude"'nın displaySurface: "monitor" ile birbirini dışladığını unutmayın.

surfaceSwitching seçeneği

Tüm ekranı paylaşmanın en çok belirtilen nedenlerinden biri, oturum sırasında farklı yüzeyler arasında sorunsuz bir şekilde geçiş yapma isteğidir. Bu sorunu çözmek için Chrome artık kullanıcının farklı sekmeler arasında dinamik olarak geçiş yapmasına olanak tanıyan bir düğme sunuyor. Bu "Bunun yerine bu sekmeyi paylaş" düğmesi daha önce Chrome uzantılarında kullanılabiliyordu. Artık getDisplayMedia() işlevini çağıran tüm web uygulamaları tarafından kullanılabilir.

surfaceSwitching, "include" olarak ayarlanırsa tarayıcı söz konusu düğmeyi gösterir. "exclude" olarak ayarlanırsa kullanıcıya bu düğme gösterilmez. Chrome zaman içinde varsayılan değeri değiştirebileceğinden web uygulamalarının açık bir değer ayarlaması önerilir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

selfBrowserSurface seçeneği

Video konferans senaryolarında kullanıcılar genellikle video konferans sekmesinin kendisini seçme hatasına düşer. Bu durum, "aynalar salonu" etkisine, ulumaya ve genel bir karışıklığa yol açar.

Video konferans web uygulamaları, kullanıcıları kendilerinden korumak için artık selfBrowserSurface değerini "exclude" olarak ayarlayabilir. Chrome daha sonra mevcut sekmeyi, kullanıcıya sunulan sekmeler listesinden çıkarır. Bu kampanyayı dahil etmek için "include" olarak ayarlayın. Şu anda selfBrowserSurface için varsayılan değer "exclude"'dir ancak varsayılan değer gelecekte değişebileceğinden web uygulamalarının bunu açıkça ayarlaması önerilir.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Açık bir selfBrowserSurface: "exclude"'nın preferCurrentTab: true ile birbirini dışladığını unutmayın.

systemAudio seçeneği

getDisplayMedia(), video ile birlikte ses yakalamaya olanak tanır. Ancak tüm sesler eşit değildir. Video konferans web uygulamalarını göz önünde bulundurun: - Kullanıcı başka bir sekme paylaşıyorsa sesi de kaydetmek mantıklıdır. - Diğer taraftan sistem sesi, uzak katılımcıların kendi seslerini içerir ve onlara geri iletilmemelidir.

Gelecekte bazı ses kaynaklarını kayda dahil etmemek mümkün olabilir. Ancak video konferans web uygulamaları, sistem sesini yakalamaktan kaçınmanın en iyi çözüm olduğunu düşünür. Bu işlem daha önce kullanıcının seçtiği görüntüleme yüzeyini kontrol ederek ve ekran paylaşmayı seçmesi durumunda ses parçasını durdurarak yapılabiliyordu. Ancak bu durum, küçük bir soruna yol açıyor. Bazı kullanıcılar, sistem sesini paylaşmak için onay kutusunu açıkça işaretledikten sonra uzaktaki katılımcılardan ses gelmediği bilgisini aldıklarında kafası karışıyor.

systemAudio, "exclude" olarak ayarlandığında bir web uygulaması, karışık sinyallerle kullanıcıları şaşırtmaktan kaçınabilir. Chrome, sekmelerin ve pencerelerin yanı sıra ses kaydetmeyi teklif eder ancak ekranların yanı sıra ses kaydetmeyi teklif etmez.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

Şu anda systemAudio için varsayılan değer "include"'dir ancak varsayılan değer gelecekte değişebileceğinden web uygulamalarının bunu açıkça ayarlaması önerilir.

Demo

Demoyu çalıştırarak bu ekran paylaşımı kontrollerini deneyebilirsiniz.

Tarayıcı desteği

• displaySurface, surfaceSwitching ve selfBrowserSurface, masaüstünde Chrome 107'de kullanılabilir.

• systemAudio, masaüstünde Chrome 105'te kullanılabilir.

• monitorTypeSurfaces, masaüstünde Chrome 119'da kullanılabilir.

Geri bildirim

Chrome ekibi ve web standartları topluluğu, bu ekran paylaşımı kontrolleriyle ilgili deneyimlerinizi öğrenmek istiyor.

Tasarım hakkında bilgi verin

Ekran paylaşımı kontrolleriyle ilgili beklentilerinizi karşılamayan bir durum mu var? 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

Bu ekran paylaşımı kontrollerini 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
• displaySurface açıklayıcı
• monitorTypeSurfaces açıklayıcı
• surfaceSwitching açıklayıcı
• selfBrowserSurface açıklayıcı
• systemAudio açıklayıcı
• TAG review

Teşekkür

İnceleme için Rachel Andrew'a teşekkür ederiz.