Screen Capture API, kullanıcının medya akışı olarak yakalamak üzere bir sekme, pencere veya ekran seçmesine olanak tanır. Daha sonra bu akış kaydedilebilir veya ağ üzerinden diğer kullanıcılarla paylaşılabilir. Bu dokümanda, web uygulamaları için, yakalama işlemi başlatıldığında yakalanan sekmenin veya pencerenin mi odaklanılacağını veya yakalama sayfasının odakta kalıp kalmayacağını kontrol eden Koşullu Odak özelliği açıklanmaktadır.
Tarayıcı desteği
Koşullu Odak, Chrome 109 sürümünden kullanılabilir.
Arka plan
Bir web uygulaması bir sekmeyi veya pencereyi kaydetmeye başladığında, tarayıcı bir kararla karşılaşır. Yakalanan yüzey ön plana mı getirilmelidir yoksa yakalama sayfası odakta kalmalı mı? Yanıt, getDisplayMedia() çağrısının nedenine ve kullanıcının seçime son verdiği ürüne bağlıdır.
Varsayım bir video konferans web uygulaması düşünün. Video konferans web uygulaması, track.getSettings().displaySurface okuyup Yakalama Herkese Açık Kullanıcı Adını inceleyerek kullanıcının neyi paylaşmayı seçtiğini anlayabilir. Ardından:
- Yakalanan sekme veya pencere uzaktan denetlenebiliyorsa video konferansa odaklanın.
- Aksi takdirde, yakalanan sekmeye veya pencereye odaklanın.
Yukarıdaki örnekte video konferans web uygulaması, slayt sunusu paylaşıldığında odağı koruyarak kullanıcının slaytlar arasında uzaktan geçiş yapmasına olanak tanır. Kullanıcı bir metin düzenleyiciyi paylaşmayı seçerse video konferans web uygulaması odağı hemen kaydedilen sekmeye veya pencereye geçirir.
Conditional Focus API'yi Kullanma
Bir CaptureController örneği gösterin ve getDisplayMedia() ürününe iletin. Döndürülen getDiplayMedia() sözü bittikten hemen sonra setFocusBehavior() öğesini çağırarak yakalanan sekmenin veya pencerenin odaklanıp odaklanmayacağını kontrol edebilirsiniz. Bu işlem yalnızca kullanıcı bir sekme veya pencere paylaştıysa yapılabilir.
const controller = new CaptureController();
// Prompt the user to share a tab, a window or a screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;
if (displaySurface == "browser") {
// Focus the captured tab.
controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface == "window") {
// Do not move focus to the captured window.
// Keep the capturing page focused.
controller.setFocusBehavior("focus-capturing-application");
}
Odaklanmaya karar verirken Yakalama Herkese Açık Kullanıcı Adını dikkate alabilirsiniz.
// Retain focus if capturing a tab dialed to example.com.
// Focus anything else.
const origin = track.getCaptureHandle().origin;
if (displaySurface == "browser" && origin == "https://example.com") {
controller.setFocusBehavior("focus-capturing-application");
} else if (displaySurface != "monitor") {
controller.setFocusBehavior("focus-captured-surface");
}
Hatta getDisplayMedia() işlevini çağırmadan önce odaklanıp odaklanmayacağınıza karar verebilirsiniz.
// Focus the captured tab or window when capture starts.
const controller = new CaptureController();
controller.setFocusBehavior("focus-captured-surface");
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
Taahhüt gerçekleşmeden önce birden fazla kez veya taahhüt bittikten hemen sonra en fazla bir kez setFocusBehavior() çağırabilirsiniz. Son çağrı, önceki tüm çağrıları geçersiz kılar.
Daha net ifade etmek gerekirse:
- Döndürülen getDisplayMedia() sözü, bir mikro görevde çözüme kavuşturuldu. Söz konusu mikro görev tamamlandıktan sonra setFocusBehavior() çağrılırsa hata verilir.
- Yakalama başladıktan sonra setFocusBehavior() komutunun bir saniyeden daha uzun süre çağrılması işlem dışıdır.
Diğer bir deyişle, aşağıdaki snippet'lerin ikisi de başarısız olur:
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
// Too late, because it follows the completion of the task
// on which the getDisplayMedia() promise resolved.
// This will throw.
setTimeout(() => {
controller.setFocusBehavior("focus-captured-surface");
});
// Prompt the user to share their screen.
const stream =
await navigator.mediaDevices.getDisplayMedia({ controller });
const start = new Date();
while (new Date() - start <= 1000) {
// Idle for ≈1s.
}
// Because too much time has elapsed, the browser will have
// already decided whether to focus.
// This fails silently.
controller.setFocusBehavior("focus-captured-surface");
setFocusBehavior() çağrısı şu durumlarda da bildirilir:
getDisplayMedia()tarafından döndürülen akışın video parçası "canlı" değil.- Kullanıcı bir ekran paylaştıysa (sekme veya pencere değil),
getDisplayMedia()vaat çözümlendikten sonra.
Örnek
Glitch'te demo çalıştırarak Koşullu Odak özelliğini oynayabilirsiniz. Kaynak kodu kontrol ettiğinizden emin olun.
Özellik algılama
CaptureController.setFocusBehavior() adlı uygulamanın desteklenip desteklenmediğini kontrol etmek için şunu kullanın:
if (
"CaptureController" in window &&
"setFocusBehavior" in CaptureController.prototype
) {
// CaptureController.setFocusBehavior() is supported.
}
Geri bildirim
Chrome ekibi ve web standartları topluluğu, Koşullu Odak ile ilgili deneyimleriniz hakkında bilgi almak ister.
Bize tasarım hakkında bilgi verin
Koşullu Odak özelliği ile ilgili olarak 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 adresinde bir hata bildiriminde bulunun. Mümkün olduğunca çok ayrıntıyı ve yeniden oluşturma için basit talimatları eklediğinizden emin olun. Glitch, kod paylaşımında işe yarar.
Desteğinizi gösterin
Koşullu Odak özelliğini 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
Teşekkür
Elena Taranenko'nun hero resmi.
Bu makaleyi incelediği için Rachel Andrew'a teşekkür ederiz.