Berbagi layar lebih baik dengan Fokus Kondisional

François Beaufort

Elad Alon

Screen Capture API memungkinkan pengguna memilih tab, jendela, atau layar yang akan direkam sebagai aliran media. Streaming ini kemudian dapat direkam atau dibagikan kepada orang lain melalui jaringan. Dokumentasi ini memperkenalkan Fokus Bersyarat, sebuah mekanisme bagi aplikasi web untuk mengontrol apakah tab atau jendela yang direkam akan difokuskan saat perekaman dimulai, atau apakah halaman yang merekam akan tetap difokuskan.

Dukungan browser

Fokus Bersyarat tersedia mulai Chrome 109.

Latar belakang

Saat aplikasi web mulai merekam tab atau jendela, browser menghadapi keputusan—apakah permukaan yang direkam harus ditampilkan di latar depan, atau apakah halaman yang merekam harus tetap fokus? Jawabannya bergantung pada alasan memanggil getDisplayMedia(), dan pada platform yang akhirnya dipilih pengguna.

Pertimbangkan aplikasi web konferensi video hipotetis. Dengan membaca track.getSettings().displaySurface dan berpotensi memeriksa Capture Handle, aplikasi web konferensi video dapat memahami apa yang dipilih pengguna untuk dibagikan. Lalu:

• Jika tab atau jendela yang direkam dapat dikontrol dari jarak jauh, tetap fokus pada konferensi video.
• Jika tidak, fokuskan tab atau jendela yang direkam.

Pada contoh di atas, aplikasi web konferensi video akan mempertahankan fokus jika berbagi presentasi slide, sehingga pengguna dapat membalik slide dari jarak jauh; tetapi jika pengguna memilih untuk berbagi editor teks, aplikasi web konferensi video akan segera mengalihkan fokus ke tab atau jendela yang direkam.

Menggunakan Conditional Focus API

Buat instance CaptureController dan teruskan ke getDisplayMedia(). Dengan memanggil setFocusBehavior() segera setelah promise yang ditampilkan getDiplayMedia() diselesaikan, Anda dapat mengontrol apakah tab atau jendela yang direkam akan difokuskan atau tidak. Hal ini hanya dapat dilakukan jika pengguna membagikan tab atau jendela.

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

Saat memutuskan apakah akan memfokuskan, Anda dapat mempertimbangkan Gagang Pengambilan.

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

Anda bahkan dapat memutuskan apakah akan berfokus sebelum memanggil 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 });

Anda dapat memanggil setFocusBehavior() berkali-kali sebelum promise diselesaikan, atau paling banyak sekali segera setelah promise diselesaikan. Pemanggilan terakhir akan menggantikan semua pemanggilan sebelumnya.

Lebih tepatnya: - Promise yang ditampilkan getDisplayMedia() diselesaikan pada microtask. Memanggil setFocusBehavior() setelah mikrotugas tersebut selesai akan memunculkan error. - Memanggil setFocusBehavior() lebih dari satu detik setelah pengambilan dimulai adalah tindakan tanpa pengoperasian.

Artinya, kedua cuplikan berikut akan gagal:

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

Panggilan setFocusBehavior() juga akan memunculkan pengecualian dalam kasus berikut:

• jalur video streaming yang ditampilkan oleh getDisplayMedia() bukan "live".
• setelah promise yang ditampilkan getDisplayMedia() diselesaikan, jika pengguna membagikan layar (bukan tab atau jendela).

Contoh

Anda dapat mencoba Fokus Bersyarat dengan menjalankan demo.

Deteksi fitur

Untuk memeriksa apakah CaptureController.setFocusBehavior() didukung, gunakan:

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

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda dengan Fokus Bersyarat.

Beri tahu kami tentang desainnya

Apakah ada sesuatu tentang Fokus Bersyarat yang tidak berfungsi seperti yang Anda harapkan? Atau, apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan?

• Laporkan masalah spesifikasi di repositori GitHub, atau tambahkan pendapat Anda ke masalah yang ada.

Mengalami masalah dengan penerapan?

Apakah Anda menemukan bug pada penerapan Chrome? Atau apakah implementasinya berbeda dengan spesifikasi?

• Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, dan petunjuk sederhana untuk mereproduksi.

Menunjukkan dukungan

Apakah Anda berencana menggunakan Fokus Bersyarat? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya dukungan untuk fitur tersebut.

Kirim tweet ke @ChromiumDev dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Link bermanfaat

• Spesifikasi
• Penjelasan
• Ulasan TAG

Ucapan terima kasih

Gambar utama oleh Elena Taranenko.

Terima kasih kepada Rachel Andrew yang telah meninjau artikel ini.