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

François Beaufort

Elad Alon

Ekran Görüntüsü API'si, kullanıcının medya akışı olarak yakalamak için bir sekme, pencere veya ekran seçmesine olanak tanır. Bu akış daha sonra kaydedilebilir veya ağ üzerinden başkalarıyla paylaşılabilir. Bu dokümanda, web uygulamalarının yakalama işlemi başladığında yakalanan sekmenin veya pencerenin odaklanıp odaklanmayacağını ya da yakalama sayfasının odaklanılıp odaklanmayacağını kontrol etmesini sağlayan Koşullu Odaklama mekanizması tanıtılmaktadır.

Tarayıcı desteği

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

Arka plan

Bir web uygulaması bir sekmeyi veya pencereyi yakalamaya başladığında tarayıcı, yakalanan yüzeyin ön plana mı getirileceği yoksa yakalama sayfasının odakta mı kalacağı konusunda bir karar vermelidir. Yanıt, getDisplayMedia()'ü arama nedenine ve kullanıcının seçtiği yüzeye bağlıdır.

Kurgusal bir video konferans web uygulaması düşünün. Video konferans web uygulaması, track.getSettings().displaySurface değerini okuyarak ve muhtemelen Capture Handle değerini inceleyerek kullanıcının neyi paylaşmayı seçtiğini anlayabilir. Ardından:

• Yakalanan sekme veya pencere uzaktan kontrol edilebiliyorsa görüntülü konferansı odakta tutun.
• Aksi takdirde, yakalanan sekmeye veya pencereye odaklanın.

Yukarıdaki örnekte, video konferans web uygulaması bir slayt paketi paylaşıyorsa odak noktasını korur ve kullanıcının slaytlar arasında uzaktan gezinmesine olanak tanır. Ancak kullanıcı bir metin düzenleyiciyi paylaşmayı seçerse video konferans web uygulaması, odağı hemen yakalanan sekmeye veya pencereye geçirir.

Koşullu Odak API'yi kullanma

Bir CaptureController nesnesi oluşturun ve bunu getDisplayMedia()'a iletin. getDiplayMedia() döndürülen promise çözüldükten hemen sonra setFocusBehavior()'ü ç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");
}

Odaklanacak olup olmayacağına karar verirken Kamera Kolu'nu 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");
}

getDisplayMedia()'yi aramadan önce odaklanmaya 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 });

setFocusBehavior() işlevini, söz çözülmeden önce istediğiniz kadar kez veya söz çözülmesinin hemen ardından en fazla bir kez çağırabilirsiniz. Son çağrı, önceki tüm çağrıları geçersiz kılar.

Daha ayrıntılı olarak: - Döndürülen getDisplayMedia() vaadi, bir mikro görevde çözülür. Bu mikro görev tamamlandıktan sonra setFocusBehavior() çağrılırsa hata oluşur. - Fotoğraf çekme işlemi başladıktan bir saniyeden uzun bir süre sonra setFocusBehavior() çağrılırsa işlem yapılmaz.

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");

setFocusBehavior() çağrısı aşağıdaki durumlarda da atılır:

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

Örnek

Glitch'te demoyu çalıştırarak Koşullu Odak özelliğini deneyebilirsiniz. Kaynak koduna göz atmayı unutmayın.

Özellik algılama

CaptureController.setFocusBehavior() değerinin 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 Odak ile ilgili deneyimlerinizi öğrenmek istiyor.

Tasarım hakkında bilgi verin

Koşullu Odak özelliğiyle ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz mu var?

• GitHub deposunda spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi 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 kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. Glitch, kod paylaşmak için iyi bir seçenektir.

Destek gösterme

Koşullu Odak'ı kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

@ChromiumDev hesabına tweet göndererek bu özelliği nerede ve nasıl kullandığınızı bize bildirin.

Faydalı bağlantılar

• Özellik
• Açıklayıcı
• TAG incelemesi

Teşekkür ederiz

Elena Taranenko tarafından oluşturulan hero resim.

Bu makaleyi inceleyen Rachel Andrew'a teşekkürler.