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

François Beaufort
François Beaufort
GitHub
Elad Alon

Tarayıcı desteği

  • Chrome: 109.
  • Edge: 109.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

Ekran Yakalama 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ı için, yakalama başladığı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 getirilmeli mi 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.

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 geçiş yapmasına 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 örneği 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");
}

Odaklamaya 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 akışın video parçası "canlı" değil.
  • 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 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 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 ihtiyacınız olan eksik yöntemler veya özellikler mi var? 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&#39;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'e bir tweet göndererek uygulamanızı nerede ve nasıl kullandığınızı bize bildirin.

Teşekkür ederiz

Elena Taranenko'nun hero resmi.

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