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, yaitu mekanisme bagi aplikasi web untuk mengontrol apakah tab atau jendela yang diambil akan difokuskan saat pengambilan gambar dimulai, atau apakah halaman yang diambil akan tetap difokuskan.
Dukungan browser
Fokus Bersyarat tersedia mulai Chrome 109.
Latar belakang
Saat aplikasi web mulai merekam tab atau jendela, browser menghadapi sebuah keputusan—haruskah permukaan yang diambil dibawa ke bagian depan, atau apakah halaman yang merekam tetap difokuskan? Jawabannya bergantung pada alasan memanggil getDisplayMedia(), dan pada platform yang dipilih pengguna.
Pertimbangkan aplikasi web konferensi video hipotetik. Dengan membaca track.getSettings().displaySurface dan kemungkinan 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 fokuskan konferensi video.
- Jika tidak, fokuskan tab atau jendela yang diambil gambarnya.
Dalam contoh di atas, aplikasi web konferensi video akan tetap fokus jika membagikan presentasi slide, sehingga pengguna dapat melihat-lihat 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. 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 berfokus, Anda dapat mempertimbangkan Capture Handle.
// 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 fokus 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() secara acak berkali-kali sebelum promise di-resolve, atau paling banyak sekali segera setelah promise di-resolve. Pemanggilan terakhir menggantikan semua pemanggilan sebelumnya.
Lebih tepatnya:
- Promise getDisplayMedia() yang ditampilkan di-resolve pada tugas mikro. Memanggil setFocusBehavior() setelah tugas mikro tersebut selesai akan menampilkan error.
- Memanggil setFocusBehavior() lebih dari satu detik setelah perekaman dimulai bukanlah 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");
Memanggil setFocusBehavior() juga akan menampilkan kasus berikut:
- trek video dari streaming yang ditampilkan oleh
getDisplayMedia()bukan "live". - setelah promise yang ditampilkan
getDisplayMedia()akan di-resolve, jika pengguna membagikan layar (bukan tab atau jendela).
Contoh
Anda dapat mencoba Conditional Focus dengan menjalankan demo di Glitch. Pastikan untuk memeriksa 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 desainnya
Apakah ada sesuatu tentang Fokus Bersyarat yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda? Ada pertanyaan atau komentar tentang model keamanan?
- Ajukan masalah spesifikasi di repo GitHub, atau tambahkan pendapat Anda ke masalah yang sudah ada.
Ada masalah dengan implementasinya?
Apakah Anda menemukan bug pada implementasi 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 bug. Glitch berfungsi dengan baik untuk berbagi kode.
Tunjukkan dukungan
Anda berencana menggunakan Fokus Bersyarat? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur dan menunjukkan kepada vendor browser lainnya betapa pentingnya mendukung mereka.
Kirim tweet ke @ChromiumDev dan beri tahu kami tempat dan cara Anda menggunakannya.
Link bermanfaat
Ucapan terima kasih
Banner besar oleh Elena Taranenko.
Terima kasih kepada Rachel Andrew yang telah meninjau artikel ini.