Screen Capture API memungkinkan pengguna memilih tab, jendela, atau layar untuk direkam sebagai streaming media. Streaming ini kemudian dapat direkam atau dibagikan kepada pengguna lain melalui jaringan. Dokumentasi ini memperkenalkan Fokus Kondisional, mekanisme bagi aplikasi web untuk mengontrol apakah tab atau jendela yang ditangkap akan difokuskan saat pengambilan gambar dimulai, atau apakah halaman perekaman akan tetap difokuskan.
Dukungan browser
Fokus Kondisional tersedia mulai Chrome 109.
Latar belakang
Saat aplikasi web mulai merekam tab atau jendela, browser dihadapkan pada sebuah keputusan—apakah permukaan yang ditangkap harus dikedepankan, atau haruskah laman pengambilan tetap fokus? Jawabannya bergantung pada alasan memanggil getDisplayMedia(), dan di platform yang pada akhirnya dipilih pengguna.
Pertimbangkan untuk membuat aplikasi web konferensi video hipotesis. Dengan membaca track.getSettings().displaySurface dan mungkin memeriksa Handle Tangkapan, aplikasi web konferensi video dapat memahami apa yang pengguna pilih untuk dibagikan. Lalu:
- Jika tab atau jendela yang ditangkap dapat dikontrol dari jarak jauh, fokuskan konferensi video.
- Jika tidak, fokuskan tab atau jendela yang ditangkap.
Pada contoh di atas, aplikasi web konferensi video akan mempertahankan fokus jika membagikan slide presentasi, sehingga pengguna dapat melihat slide dari jarak jauh; tetapi jika pengguna memilih untuk berbagi editor teks, aplikasi web konferensi video akan langsung mengalihkan fokus ke tab atau jendela yang ditangkap.
Menggunakan Conditional Focus API
Buat instance CaptureController dan teruskan ke getDisplayMedia(). Dengan memanggil setFocusBehavior() segera setelah promise yang ditampilkan getDiplayMedia() di-resolve, 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 fokus, Anda dapat mempertimbangkan Handle Tangkapan.
// 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");
}
Bahkan, Anda 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 arbitrer beberapa kali sebelum promise di-resolve, atau paling banyak sekali setelah promise di-resolve. Pemanggilan terakhir akan menggantikan semua pemanggilan sebelumnya.
Lebih tepatnya:
- getDisplayMedia() yang menampilkan promise selesai pada microtask. Memanggil setFocusBehavior() setelah tugas mikro tersebut selesai akan menampilkan error.
- Memanggil setFocusBehavior() lebih dari satu detik setelah pengambilan dimulai tidak akan dijalankan.
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
getDisplayMedia()menampilkan promise yang di-resolve, jika pengguna berbagi layar (bukan tab atau jendela).
Contoh
Anda dapat bermain menggunakan 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 menggunakan Fokus Kondisional.
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? Punya pertanyaan atau komentar tentang model keamanan?
- Laporkan masalah spesifikasi di repo GitHub, atau tambahkan pendapat Anda ke masalah yang sudah ada.
Mengalami masalah dengan penerapan?
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 membagikan kode.
Tampilkan 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 di mana dan bagaimana Anda menggunakannya.
Link bermanfaat
Ucapan terima kasih
Banner besar oleh Elena Taranenko.
Terima kasih kepada Rachel Andrew telah meninjau artikel ini.