Berbagi layar lebih baik dengan Fokus Kondisional

François Beaufort
François Beaufort
GitHub
Elad Alon

Dukungan Browser

  • Chrome: 109.
  • Edge: 109.
  • Firefox: tidak didukung.
  • Safari: tidak didukung.

Sumber

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

Dukungan browser

Fokus Bersyarat tersedia mulai Chrome 109.

Latar belakang

Saat aplikasi web mulai mengambil tab atau jendela, browser akan menghadapi keputusan—apakah platform yang diambil harus ditampilkan di latar depan, atau apakah halaman pengambilan harus tetap difokuskan? 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 Nama Pengambilan, aplikasi web konferensi video dapat memahami apa yang dipilih pengguna untuk dibagikan. Lalu:

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

Dalam contoh di atas, aplikasi web konferensi video akan mempertahankan fokus jika berbagi slide presentasi, sehingga pengguna dapat melihat 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 diambil 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 atau tidak, Anda dapat mempertimbangkan Tangkap Gagang.

// 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() beberapa kali secara arbitrer sebelum promise diselesaikan, atau maksimal sekali segera setelah promise diselesaikan. Pemanggilan terakhir akan menggantikan semua pemanggilan sebelumnya.

Lebih tepatnya: - Promise yang ditampilkan getDisplayMedia() diselesaikan pada microtask. Memanggil setFocusBehavior() setelah microtask tersebut selesai akan menampilkan error. - Memanggil setFocusBehavior() lebih dari satu detik setelah pengambilan dimulai tidak akan melakukan tindakan apa pun.

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

Memanggil setFocusBehavior() juga akan menampilkan kasus berikut:

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

Contoh

Anda dapat mencoba Conditional Focus dengan menjalankan demo di Glitch. Pastikan untuk melihat kode sumbernya.

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 desain

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

  • Ajukan masalah spesifikasi di repo 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 mereproduksinya. Glitch berfungsi dengan baik untuk berbagi kode.

Menampilkan dukungan

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

Kirim tweet ke @ChromiumDev dan beri tahu kami tempat dan cara Anda menggunakannya.

Ucapan terima kasih

Gambar hero oleh Elena Taranenko.

Terima kasih kepada Rachel Andrew yang telah meninjau artikel ini.