Koşullu Odak ile daha iyi ekran paylaşımı

François Beaufort

Elad Alon

Ekran Görüntüsü Alma API'si, kullanıcının medya akışı olarak yakalanacak bir sekme, pencere veya ekran seçmesine olanak tanır. Bu yayın daha sonra kaydedilebilir veya ağ üzerinden başkalarıyla paylaşılabilir. Bu dokümanda, web uygulamalarının yakalama başladığında yakalanan sekmeye veya pencereye odaklanılıp odaklanılmayacağını ya da yakalama sayfasının odaklanmış durumda kalıp kalmayacağını kontrol etmesini sağlayan bir mekanizma olan Koşullu Odak tanıtılmaktadır.

Tarayıcı desteği

Koşullu Odak, Chrome 109'dan itibaren kullanılabilir.

Arka plan

Bir web uygulaması sekme veya pencere yakalamaya başladığında tarayıcı bir kararla karşı karşıya kalır: Yakalanan yüzey ön plana mı getirilmeli yoksa yakalama sayfası odaklanmış durumda mı kalmalı? Yanıt, arama nedenine getDisplayMedia() ve kullanıcının seçtiği yüzeye bağlıdır.

Varsayımsal bir video konferans web uygulamasını ele alalım. Video konferans web uygulaması, track.getSettings().displaySurface okunarak ve Capture Handle incelenerek kullanıcının neyi paylaşmayı seçtiğini anlayabilir. Ardından:

• Yakalanan sekme veya pencere uzaktan kontrol edilebiliyorsa video konferansı odak noktasında tutun.
• Aksi takdirde, yakalanan sekmeye veya pencereye odaklanın.

Yukarıdaki örnekte, slayt destesi paylaşılırken video konferans web uygulaması odağı koruyarak kullanıcının slaytlar arasında uzaktan geçiş yapmasına olanak tanır. Ancak kullanıcı bir metin düzenleyici paylaşmayı seçerse video konferans web uygulaması odağı hemen yakalanan sekmeye veya pencereye geçirir.

Conditional Focus API'yi kullanma

CaptureController oluşturun ve getDisplayMedia()'ye iletin. Döndürülen setFocusBehavior() sözü çözüldükten hemen sonra getDiplayMedia() işlevini ç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");
}

Odaklanıp odaklanmamaya karar verirken yakalama tutma yerini 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 aramadan önce odaklanıp odaklanmayacağınıza karar verebilirsiniz getDisplayMedia().

// 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 });

Söz çözümlenmeden önce setFocusBehavior() işlevini istediğiniz kadar, söz çözümlendikten hemen sonra ise en fazla bir kez çağırabilirsiniz. Son çağırma işlemi, önceki tüm çağırma işlemlerini geçersiz kılar.

Daha net bir şekilde ifade etmek gerekirse: - getDisplayMedia() döndürülen söz, mikro görevde çözümlenir. Bu mikro görev tamamlandıktan sonra setFocusBehavior() işlevinin çağrılması hataya neden olur. - Yakalama başladıktan setFocusBehavior() saniyeden uzun bir süre sonra arama yapılması işlem yapılmamasına neden olur.

Yani aşağıdaki snippet'lerin her 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");

Aşağıdaki durumlarda setFocusBehavior() de hata verir:

• getDisplayMedia() tarafından döndürülen akışın video parçası "canlı" değil.
• Kullanıcı ekran paylaştıysa (sekme veya pencere değil) getDisplayMedia() döndürülen söz çözümlendikten sonra.

Örnek

Demoyu çalıştırarak Koşullu Odak özelliğini deneyebilirsiniz.

Özellik algılama

CaptureController.setFocusBehavior() öğesinin desteklenip desteklenmediğini kontrol etmek için:

if (
  "CaptureController" in window &&
  "setFocusBehavior" in CaptureController.prototype
) {
  // CaptureController.setFocusBehavior() is supported.
}

Geri bildirim

Chrome ekibi ve web standartları topluluğu, Koşullu Odaklanma ile ilgili deneyimlerinizi öğrenmek istiyor.

Tasarım hakkında bilgi verin

Koşullu odaklama ile ilgili beklentilerinizi karşılamayan bir durum var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

• GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun mu yaşıyorsunuz?

Chrome'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı?

• https://new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve yeniden üretmeyle ilgili basit talimatlar ekleyin.

Desteğinizi gösterme

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 özelliklerin desteklenmesinin ne kadar önemli olduğunu gösterir.

@ChromiumDev adresine tweet göndererek nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

• Spesifikasyon
• Açıklama
• TAG review

Teşekkür

Elena Taranenko'nun hero resmi.

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