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

Sekme, pencere ve ekran paylaşımı Ekran Yakalama API'si ile web platformunda zaten mümkündür. Kısacası getDisplayMedia(), kullanıcının medya akışı olarak yakalamak üzere bir ekranı veya ekranın bir bölümünü (pencere gibi) seçmesine olanak tanır. Daha sonra bu akış kaydedilebilir veya ağ üzerinden diğer kullanıcılarla paylaşılabilir. Bu makalede, gizliliği daha iyi şekilde korumak ve kişisel bilgilerin yanlışlıkla paylaşılmasını önlemek için API'de yapılan son değişiklikler açıklanmaktadır.

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

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

getDisplayMedia() değişiklikleri

getDisplayMedia() ürününde aşağıdaki değişiklikler yapıldı.

displaySurface seçeneği

En uygun şekilde, pencere veya ekran paylaşmak için özel kullanıcı yolculukları içeren web uygulamaları, Chrome'dan medya seçicide pencereleri veya ekranları daha belirgin bir şekilde sunmasını isteyebilir. Teklifin sıralaması değişmez, ancak ilgili bölme önceden seçilir.

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

• Sekmeler için "browser".
• Pencereler için "window".
• Ekranlar için "monitor".

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, tasarımdan kaynaklanan bir durumdur çünkü web uygulamasına kullanıcı üzerinde çok fazla güç verir.

monitorTypeSurfaces seçeneği

Şirketleri, çalışan hatası nedeniyle özel bilgilerin sızdırılmasına karşı korumak için video konferans web uygulamalarında artık monitorTypeSurfaces özelliği "exclude" olarak ayarlanabilir. Daha sonra Chrome, medya seçicide ekranları hariç tutar. Dahil etmek için "include" olarak ayarlayın. Şu anda monitorTypeSurfaces için varsayılan değer "include" olsa da varsayılan değer gelecekte değişebileceğinden web uygulamalarının bu değeri açıkça belirlemesi ö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" öğesinin, displaySurface: "monitor" ile karşılıklı olarak hariç tutulabileceğini unutmayın.

surfaceSwitching seçeneği

Ekranın tamamını paylaşmanın en çok öne çıkan nedenlerinden biri, oturum sırasında farklı yüzeyleri paylaşmak için sorunsuz bir şekilde geçiş yapma isteğidir. Bu sorunu gidermek için Chrome artık kullanıcının farklı sekmeler arasında dinamik olarak geçiş yapmasını sağlayan bir düğme sunuyor. Bu "Bunun yerine bu sekmeyi paylaş" düğmesi, daha önce Chrome uzantılarında kullanılmıştı ve artık getDisplayMedia()'e çağrı yapan tüm web uygulamaları tarafından kullanılabiliyor.

surfaceSwitching, "include" değerine ayarlanırsa tarayıcı söz konusu düğmeyi gösterir. Düğme "exclude" değerine 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 sekmesini seçme hatasına düşerler. Bu da "aynalardan oluşan bir salon" etkisine, uluma ve genel kafa karışıklığına neden olur.

Kullanıcıları kendilerinden korumak için video konferans web uygulamaları artık selfBrowserSurface özelliğini "exclude" olarak ayarlayabilir. Daha sonra Chrome, geçerli sekmeyi kullanıcıya sunulan sekmeler listesinden hariç tutar. Dahil etmek için "include" olarak ayarlayın. Şu anda selfBrowserSurface için varsayılan değer "exclude" olsa da varsayılan değer gelecekte değişebileceğinden web uygulamalarının bu değeri açıkça belirlemesi önerilir.

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

Açık bir selfBrowserSurface: "exclude" değerinin, preferCurrentTab: true ile karşılıklı olarak hariç tutulabileceğini unutmayın.

systemAudio seçeneği

getDisplayMedia(), videonun yanı sıra sesin yakalanmasını sağlar. Ancak her ses eşit değildir. Video konferans web uygulamalarını kullanmayı düşünün: - Kullanıcı başka bir sekmeyi paylaşıyorsa ses de yakalamak mantıklı olacaktır. - Öte yandan, sistem sesi uzaktaki katılımcıların kendi sesini içerir ve bu katılımcılara geri iletilmemelidir.

Gelecekte bazı ses kaynaklarını kayıttan hariç tutmak mümkün olabilir. Ancak şu an için en iyi seçenek, sistem sesini yakalamaktan kaçınmak olan video konferans web uygulamalarıdır. Bu, daha önce kullanıcının hangi ekran yüzeyini seçtiğini kontrol ederek ve bir ekranı paylaşmayı seçtiğinde ses parçasını durdurarak yapılabiliyordu. Ancak bu, bazı kullanıcılar sistem sesini paylaşmak için açıkça onay kutusunu işaretlediklerinde ve ardından uzak katılımcılara ses gelmediğini söylediklerinde kafalarının karışmasına neden olur.

systemAudio ayarı "exclude" değerine ayarlandığında bir web uygulaması, karma sinyallerle kullanıcıların kafasının karışmasını önleyebilir. Chrome, sekmelerin ve pencerelerin yanında ses yakalamayı teklif eder, ancak ekranlarla birlikte yakalamayı 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" olsa da varsayılan değer gelecekte değişebileceğinden web uygulamalarının bu değeri açıkça belirlemesi önerilir.

Demo

Glitch'te demoyu çalıştırarak bu ekran paylaşımı kontrolleriyle oyun oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.

Tarayıcı desteği

• displaySurface, surfaceSwitching ve selfBrowserSurface, Chrome 107 masaüstü sürümünde kullanılabilir.

• systemAudio, Chrome 105 masaüstü sürümünde kullanılabilir.

• monitorTypeSurfaces, Chrome 119 sürümünde masaüstünde kullanılabilir.

Geri bildirim

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

Bize tasarım hakkında bilgi verin

Ekran paylaşımı kontrollerinde beklediğiniz gibi çalışmayan bir şey mi var? 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 kod paylaşımında iyi sonuç verir.

Desteği göster

Söz konusu 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 ö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

• Spesifikasyon
• displaySurface açıklayıcı
• monitorTypeSurfaces açıklayıcı
• surfaceSwitching açıklayıcı
• selfBrowserSurface açıklayıcı
• systemAudio açıklayıcı
• TAG incelemesi

Teşekkür

John Schnobrich'in lokomotif resmi.

Bu makaleyi incelediğiniz için Rachel Andrew'a teşekkür ederiz.