Screen Capture API ile web platformunda sekmeleri, pencereleri ve ekranları paylaşmak mümkündür. Kısacası getDisplayMedia()
, kullanıcının medya akışı olarak kaydetmek üzere bir ekranı veya ekranın bir bölümünü (ör. pencere) 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 korumak ve kişisel bilgilerin yanlışlıkla paylaşılmasını önlemek için API'de yapılan bazı son değişiklikler açıklanmaktadır.
Gizliliği korumaya yönelik ekran paylaşımı için kullanabileceğiniz denetimlerin listesi aşağıda verilmiştir:
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.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ının paylaşılan sekmeler arasında dinamik olarak geçiş yapmasına izin verip vermeyeceğini belirtir.- Kullanıcının geçerli sekmeyi paylaşmasını engellemek için
selfBrowserSurface
seçeneği kullanılabilir. Bu, "aynalardan oluşan salon"dan kaçınıyor etkisi. systemAudio
seçeneği, Chrome'un kullanıcıya yalnızca ilgili ses kaydını sunmasını sağlar.
getDisplayMedia()
ile ilgili değişiklikler
getDisplayMedia()
ürününde aşağıdaki değişiklikler yapıldı.
displaySurface
seçeneği
Özel kullanıcı yolculukları içeren ve pencere veya ekran paylaşımında en iyi sonucu veren web uygulamaları, Chrome'dan pencereleri veya ekranları medya seçicide daha belirgin bir şekilde sunmasını istemeye devam edebilir. Teklifin sıralaması değişmez ancak ilgili bölme önceden seçilir.
displaySurface
seçeneği için değerler ş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" },
});
![Önceden seçilen öğeleri içeren medya seçicinin ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-64dafc4173b.png?authuser=5&hl=tr)
Belirli bir pencereyi veya ekranı önceden seçme seçeneği sunmadığımızı unutmayın. Bu, web uygulamasına kullanıcı üzerinde çok fazla güç yaşatacağı için tasarımdan kaynaklanmaktadır.
monitorTypeSurfaces
seçeneği
Şirketleri çalışan hataları nedeniyle gizli bilgilerin sızdırılmasını önlemek için video konferans web uygulamalarında monitorTypeSurfaces
artık "exclude"
olarak ayarlanabilir. Ardından Chrome, medya seçicide ekranları hariç tutar. Bunu 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ği için web uygulamalarının bu değeri açıkça ayarlaması önerilir.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
// Remove the "Entire Screen" pane in the media picker.
monitorTypeSurfaces: "exclude",
});
.
![Hayır olan medya seçme aracının ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-85b3c9b30c4fa.png?authuser=5&hl=tr)
Uygunsuz bir monitorTypeSurfaces: "exclude"
değerinin displaySurface: "monitor"
ile birlikte kullanılamayacağını unutmayın.
surfaceSwitching
seçeneği
Ekranın tamamını paylaşmak için en çok belirtilen nedenlerden biri, bir oturum sırasında farklı yüzeyleri paylaşmak arasında sorunsuz bir şekilde geçiş yapmak isteme isteğidir. Bu sorunu gidermek için Chrome artık kullanıcıların farklı sekmeleri paylaşmak arasında dinamik olarak geçiş yapmasını sağlayan bir düğme sunuyor. Bu "Bunun yerine bu sekmeyi paylaşın" düğmesi, daha önce Chrome uzantılarında kullanılabiliyordu ve artık getDisplayMedia()
çağrısı yapan tüm web uygulamaları tarafından kullanılabilir.
![Farklı sekmeleri paylaşmak için dinamik olarak geçiş yapmak için kullanılan düğmenin ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-button-us-5e92f90d179ed.png?authuser=5&hl=tr)
surfaceSwitching
, "include"
olarak ayarlanırsa tarayıcı söz konusu düğmeyi gösterir. "exclude"
değerine ayarlanırsa kullanıcıya bu düğme gösterilmez. Chrome zaman içinde varsayılan değeri değiştirebileceği için 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üşerek bir "aynalar dolusu"nun oluşmasına yol açar. etki, uluma ve genel karışıklık.
Kullanıcıları kendilerinden korumak için video konferans web uygulamalarında artık selfBrowserSurface
ayarı "exclude"
olarak yapılabilir. Ardından Chrome, kullanıcıya sunulan sekmeler listesinden geçerli sekmeyi hariç tutar. Bunu 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ği için web uygulamalarının bu değeri açıkça ayarlaması önerilir.
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
selfBrowserSurface: "exclude" // Avoid 🦶🔫.
});
.
![Geçerli sekmeyi hariç tutan medya seçicinin ekran görüntüsü](https://developer.chrome.com/static/docs/web-platform/screen-sharing-controls/image/screenshot-the-media-pic-248b79ead1a5f.png?authuser=5&hl=tr)
Uygunsuz bir selfBrowserSurface: "exclude"
değerinin preferCurrentTab: true
ile birlikte kullanılamayacağını unutmayın.
systemAudio
seçeneği
getDisplayMedia()
, video ile birlikte ses yakalamayı sağlar. Ancak her ses eşit değildir. Video konferans özellikli web uygulamalarını kullanabilirsiniz:
- Kullanıcı başka bir sekme paylaşırsa ses kaydı da yapmak mantıklıdır.
- Sistem sesi ise uzaktan katılımcıların seslerini içerir. ve bu seslere geri iletilmemesi gerekir.
Gelecekte bazı ses kaynaklarını yakalamadan hariç tutmak mümkün olabilir. Ancak şu an için, video konferans web uygulamalarının en iyisi sistem sesini kaydetmekten kaçınmaktır. Bu, daha önce kullanıcının hangi ekran yüzeyini seçtiği kontrol edilerek ve bir ekran paylaşmayı tercih etmesi durumunda ses parçasının durdurulmasıyla yapılabiliyordu. Ancak bu, küçük bir sorun teşkil eder. Bazı kullanıcılar sistem sesini paylaşmak için onay kutusunu açıkça işaretlediklerinde kafaları karışır ve uzaktaki katılımcılar, onlar tarafından sesin gelmediğini söylerler.
![Sekme ses paylaşımını öne çıkaran medya seçicilerin ekran görüntüleri](https://developer.chrome.com/static/docs/web-platform/screen-sharing-controls/image/screenshots-media-picker-5a6ebb73dd84c.jpg?authuser=5&hl=tr)
systemAudio
parametresi "exclude"
olarak ayarlandığında web uygulaması, karma sinyallerle kullanıcıların kafasını karıştırmaktan kaçınabilir. Chrome sekmelerin ve pencerelerin yanında ses yakalamayı önerir, ancak ekranların yanında ses çekmez.
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ği için web uygulamalarının bu değeri açıkça ayarlaması önerilir.
Demo
Glitch'te demoyu çalıştırarak bu ekran paylaşımı kontrolleriyle oynayabilirsiniz. Kaynak kodu kontrol ettiğinizden emin olun.
Tarayıcı desteği
displaySurface
,surfaceSwitching
veselfBrowserSurface
, masaüstündeki Chrome 107 sürümünde kullanılabilir.
Tarayıcı Desteği
- 105
- 105
- x
- x
systemAudio
, masaüstündeki Chrome 105 sürümünde kullanılabilir.
Tarayıcı Desteği
- 119
- 119
- x
- x
monitorTypeSurfaces
, masaüstündeki Chrome 119 sürümünde kullanılabilir.
Geri bildirim
Chrome ekibi ve web standartları topluluğu, bu ekran paylaşımı kontrolleriyle ilgili deneyimleriniz hakkında bilgi almak ister.
Bize tasarım hakkında bilgi verin
Ekran paylaşımı kontrollerinde beklediğiniz gibi çalışmayan bir şey mi var? Yoksa fikrinizi uygulamak için ihtiyacınız olan eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var?
- GitHub deposunda bir spesifikasyon sorunu bildirin veya mevcut bir soruna düşüncelerinizi ekleyin.
Uygulamayla ilgili bir sorun mu var?
Chrome'un uygulanmasıyla ilgili 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 videonun tekrar üretilmesi için basit talimatlar eklediğinizden emin olun. Glitch, kod paylaşımında işe yarar.
Desteğinizi gösterin
Bu ekran paylaşımı kontrollerini kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik olduğunu gösterir.
@ChromiumDev'e bir tweet göndererek uygulamanızı 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
Lokomotif resim, John Schnobrich.
Bu makaleyi incelediği için Rachel Andrew'a teşekkür ederiz.