Dukungan Browser
- 102
- 102
- x
- x
Platform web kini dilengkapi dengan Capture Handle, yaitu mekanisme yang membantu kolaborasi antara aplikasi web yang direkam dan ditangkap. Tuas Tangkapan memungkinkan aplikasi web perekaman untuk mengidentifikasi aplikasi web yang direkam secara ergonomis dan meyakinkan. (Jika aplikasi web yang direkam telah diikutsertakan.)
Beberapa contoh menggambarkan manfaatnya.
Contoh 1: Jika aplikasi web konferensi video merekam aplikasi web presentasi, aplikasi web konferensi video tersebut dapat memperlihatkan kontrol kepada pengguna untuk berpindah antarslide. Karena kontrol disematkan langsung di aplikasi web konferensi video, pengguna tidak perlu berulang kali beralih antara tab konferensi video dan tab yang ditampilkan. Dengan terangkatnya beban ini, pengguna kini dapat lebih berkonsentrasi penuh pada penyampaian presentasi mereka.
Contoh 2: Efek "hall of mirror" terjadi saat permukaan yang diambil dirender kembali ke lokasi yang ditangkap. Khususnya, jika pengguna memilih untuk merekam tab tempat panggilan konferensi video berlangsung, dan aplikasi web konferensi video merender pratinjau lokal, efek yang menakutkan ini akan diamati. Dengan menggunakan Capture Handle, selfie dapat dideteksi dan dimitigasi; misalnya, dengan aplikasi web yang menghentikan pratinjau lokal.
Tentang Nama Sebutan Channel
Handel Tangkai terdiri dari dua bagian yang saling melengkapi:
- Aplikasi web yang diambil dapat memilih untuk mengekspos informasi tertentu ke beberapa origin dengan
navigator.mediaDevices.setCaptureHandleConfig()
. - Menangkap aplikasi web kemudian dapat membaca informasi tersebut dengan
getCaptureHandle()
pada objekMediaStreamTrack
.
Sisi yang diambil
Aplikasi web dapat mengekspos informasi ke calon pengguna aplikasi web. Hal ini dilakukan dengan memanggil navigator.mediaDevices.setCaptureHandleConfig()
menggunakan objek opsional yang terdiri dari anggota berikut:
handle
: Dapat berupa string apa pun hingga 1.024 karakter.exposeOrigin
: Jikatrue
, asal aplikasi web yang ditangkap dapat diekspos untuk menangkap aplikasi web.permittedOrigins
: Nilai yang valid adalah (i) array kosong, (ii) array dengan"*"
item tunggal, atau (iii) array origin. JikapermittedOrigins
terdiri dari"*"
item tunggal,CaptureHandle
dapat diamati oleh semua aplikasi web yang merekam. Jika tidak, objek tersebut hanya dapat diobservasi untuk mengambil aplikasi web yang memiliki asal dalampermittedOrigins
.
Contoh berikut menunjukkan cara mengekspos UUID yang dibuat secara acak sebagai handle dan asal ke aplikasi web yang menangkap.
const config = {
handle: crypto.randomUUID(),
exposeOrigin: true,
permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);
Perhatikan bahwa aplikasi web yang ditangkap tidak tahu apakah itu sedang direkam. Kecuali jika aplikasi web perekaman menggunakan informasi CaptureHandle
untuk melakukan komunikasi dengan aplikasi web yang ditangkap (menggunakan pesan melalui pekerja, atau infrastruktur cloud bersama, misalnya).
Mengambil gambar sisi
Aplikasi web perekaman menyimpan MediaStreamTrack
video, dan dapat membaca informasi tuas tangkapan dengan memanggil getCaptureHandle()
pada MediaStreamTrack
tersebut. Panggilan ini menampilkan null
jika tidak ada handle perekaman yang tersedia, atau jika aplikasi web yang merekam tidak diizinkan untuk membacanya. Jika handle pengambilan tersedia, dan aplikasi web yang merekam ditambahkan ke permittedOrigins
, panggilan ini akan menampilkan objek dengan anggota berikut:
handle
: Nilai string yang ditetapkan oleh aplikasi web yang diambil dengannavigator.mediaDevices.setCaptureHandleConfig()
.origin
: Asal aplikasi web yang diambil jikaexposeOrigin
disetel ketrue
. Jika tidak, kolom tidak akan ditentukan.
Contoh berikut menunjukkan cara membaca informasi tuas tangkapan dari trek video.
// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();
// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
// Use captureHandle.origin and captureHandle.handle...
}
Pantau perubahan CaptureHandle
dengan memproses peristiwa "capturehandlechange"
pada objek MediaStreamTrack
. Perubahan terjadi saat:
- Aplikasi web yang direkam akan memanggil
navigator.mediaDevices.setCaptureHandleConfig()
. - Navigasi lintas dokumen terjadi di aplikasi web yang direkam.
videoTrack.addEventListener('capturehandlechange', event => {
captureHandle = event.target.getCaptureHandle();
// Consume new capture handle...
});
Keamanan dan privasi
Saat ini, kolaborasi antara perekaman dan aplikasi web yang ditangkap secara teoretis dapat dilakukan, dengan menyematkan "piksel ajaib" di aplikasi web yang direkam atau menyematkan kode QR dalam streaming video, misalnya. Capture Handle menawarkan mekanisme yang lebih sederhana, lebih andal, dan lebih aman. Hal ini juga memungkinkan aplikasi web yang direkam untuk memilih audiens - baik memilih asal atau seluruh web.
Perhatikan bahwa navigator.mediaDevices.setCaptureHandleConfig()
hanya tersedia untuk frame utama level teratas dalam konteks penjelajahan aman (khusus HTTPS).
Contoh
Anda dapat bermain menggunakan Capture Handle dengan menjalankan sampel di Glitch. Pastikan untuk memeriksa kode sumbernya.
Demo
Beberapa demo tersedia di:
Deteksi fitur
Untuk memeriksa apakah getCaptureHandle()
didukung, gunakan:
if ('getCaptureHandle' in MediaStreamTrack.prototype) {
// getCaptureHandle() is supported.
}
Untuk memeriksa apakah navigator.mediaDevices.setCaptureHandleConfig()
didukung, gunakan:
if ('setCaptureHandleConfig' in navigator.mediaDevices) {
// navigator.mediaDevices.setCaptureHandleConfig() is supported.
}
Langkah selanjutnya
Berikut adalah sedikit bocoran tentang hal yang akan terjadi dalam waktu dekat yang akan meningkatkan pengalaman berbagi layar di web:
- Region Capture akan memungkinkan pemangkasan trek video yang berasal dari tangkapan layar tab saat ini.
- Fokus Bersyarat akan memungkinkan aplikasi web perekaman untuk memerintahkan browser mengalihkan fokus ke permukaan tampilan yang diambil, atau untuk menghindari perubahan fokus tersebut.
Masukan
Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda saat menggunakan Capture Handle.
Beri tahu kami tentang desainnya
Apakah ada sesuatu pada Capture Handle 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 berbagi repro dengan cepat dan mudah.
Tampilkan dukungan
Apakah Anda berencana menggunakan Capture Handle? 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
Terima kasih kepada Joe Medley telah meninjau artikel ini.