Ekran Yakalama API'si, kullanıcının medya akışı olarak yakalamak için 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ümanlarda, web uygulamalarının, yakalama başladığında yakalanan sekmenin veya pencerenin odaklanıp odaklanmayacağını ya da yakalama sayfasının odaklanıp kalacağını kontrol etmesini sağlayan bir mekanizma olan Koşullu Odak özelliği tanıtılmaktadır.
Tarayıcı desteği
Koşullu Odak özelliği, Chrome 109 sürümünde kullanılabilir.
Arka plan
Bir web uygulaması bir sekmeyi veya pencereyi yakalamaya başladığında, tarayıcı bir kararla karşılaşır: Yakalanan yüzey ön plana getirilmeli mi, yoksa yakalama sayfası mı odaklanılmalı? Yanıt, getDisplayMedia() araması yapma nedenine ve kullanıcının seçim yaptığı yüzeye bağlıdır.
Varsayımsal bir video konferans web uygulaması kullanmayı düşünün. Video konferans web uygulaması, track.getSettings().displaySurface okuyup Video konferans kullanıcı adını inceleyerek kullanıcının neyi paylaşmayı tercih ettiğini anlayabilir. Ardından:
- Yakalanan sekme veya pencere uzaktan kontrol edilebiliyorsa video konferansı odakta tutun.
- Aksi takdirde, yakalanan sekmeye veya pencereye odaklanın.
Yukarıdaki örnekte, slayt sunusu paylaşırken video konferans web uygulaması odağı koruyarak kullanıcının slaytları uzaktan çevirmesine olanak tanır. Ancak kullanıcı bir metin düzenleyici paylaşmayı seçerse video konferans web uygulaması hemen yakalanan sekmeye veya pencereye odaklanır.
Conditional Focus API'yi Kullanma
Bir CaptureController örneği oluşturun ve getDisplayMedia() hesabına iletin. getDiplayMedia() döndürülmesi sözü çözümlendikten hemen sonra setFocusBehavior() yöntemini çağırarak yakalanan sekmenin veya pencerenin odaklanıp odaklanmayacağını kontrol edebilirsiniz. Bu işlem yalnızca, kullanıcı bir sekmeyi veya pencereyi 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 Fotoğraf Çekme Tutma Yeri'ni 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() adlı kullanıcıya telefon etmeden ö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 });
Vaat kesinleşmeden önce setFocusBehavior() adlı kişiyi rastgele birçok kez veya söz kesinleştikten hemen sonra en fazla bir kez çağırabilirsiniz. Son çağrı, önceki tüm çağrıları geçersiz kılar.
Daha kesin belirtmek gerekirse:
- Döndürülen getDisplayMedia() sözü, mikro görevde çözümlenir. Bu mikro görev tamamlandıktan sonra setFocusBehavior() çağrıldığında hata oluşur.
- Yakalama başladıktan sonra setFocusBehavior() işlevi bir saniyeden daha uzun süre çağrıldığında herhangi bir işlem yapılmaz.
Yani 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ılırsa aşağıdaki durumlarda da hata uygulanır:
getDisplayMedia()tarafından döndürülen akışın video parçası "canlı" değil.- Kullanıcı bir ekran (sekme veya pencere değil) paylaştıysa
getDisplayMedia()döndürülen vaadi yerine getirildikten sonra.
Örnek
Glitch'te demo sürümünü çalıştırarak Koşullu Odak özelliğini kullanarak oyun oynayabilirsiniz. Kaynak koduna göz atmayı unutmayın.
Özellik algılama
CaptureController.setFocusBehavior() hizmetinin 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 Odaklanma deneyiminizle ilgili görüşlerinizi öğrenmek ister.
Bize tasarım hakkında bilgi verin
Koşullu Odaklanma ile ilgili beklediğiniz gibi çalışmayan bir şey var mı? 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
Koşullu Odak özelliğini 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
Teşekkür
Elena Taranenko'nun lokomotif resmi.
Bu makaleyi incelediğiniz için Rachel Andrew'a teşekkür ederiz.