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
veselfBrowserSurface
, Chrome 107 masaüstü sürümünde kullanılabilir.
Tarayıcı Desteği
- 105
- 105
- x
- x
systemAudio
, Chrome 105 masaüstü sürümünde kullanılabilir.
Tarayıcı Desteği
- 119
- 119
- x
- x
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.