Berbagi tab yang lebih baik dengan Capture Handle

François Beaufort

Elad Alon

Dukungan Browser

• 102
• 102
• x
• x

Platform web kini dilengkapi dengan Capture Handle, mekanisme yang membantu kolaborasi antara aplikasi web yang mengambil gambar dan yang diambil gambarnya. Capture Handle memungkinkan aplikasi web perekaman mengidentifikasi aplikasi web yang direkam secara ergonomis dan andal. (Jika aplikasi web yang direkam telah memilih ikut serta.)

Beberapa contoh menggambarkan manfaatnya.

Contoh 1: Jika aplikasi web konferensi video merekam aplikasi web presentasi, aplikasi web konferensi video dapat mengekspos kontrol kepada pengguna untuk berpindah antar-slide. Karena kontrol disematkan langsung di aplikasi web konferensi video, pengguna tidak perlu berulang kali beralih antara tab konferensi video dan tab yang ditampilkan. Dengan beban ini dihilangkan, pengguna kini bebas untuk berkonsentrasi lebih penuh pada penyampaian presentasinya.

Contoh 2: Efek "hall of mirrors" terjadi saat permukaan yang diambil dirender kembali ke lokasi yang diambil. Secara khusus, jika pengguna memilih untuk merekam tab tempat panggilan konferensi video berlangsung, dan aplikasi web konferensi video merender pratinjau lokal, efek yang dikhawatirkan akan terlihat. Dengan menggunakan Capture Handle, perekaman mandiri dapat dideteksi dan dimitigasi; misalnya, dengan aplikasi web yang menyembunyikan pratinjau lokal.

Tentang Nama Sebutan Channel Rekaman

Capture Handle terdiri dari dua bagian pelengkap:

• Aplikasi web yang direkam dapat memilih untuk mengekspos informasi tertentu ke beberapa origin dengan navigator.mediaDevices.setCaptureHandleConfig().
• Aplikasi web yang mengambil gambar kemudian dapat membaca informasi tersebut dengan getCaptureHandle() pada objek MediaStreamTrack.

Sisi yang diambil

Aplikasi web dapat mengekspos informasi ke aplikasi web yang akan mengambil gambar. Hal ini dilakukan dengan memanggil navigator.mediaDevices.setCaptureHandleConfig() dengan objek opsional yang terdiri dari anggota berikut:

• handle: Dapat berupa string apa pun hingga 1.024 karakter.
• exposeOrigin: Jika true, asal aplikasi web yang diambil dapat diekspos ke aplikasi web yang mengambil.
• permittedOrigins: Nilai yang valid adalah (i) array kosong, (ii) array dengan satu item "*", atau (iii) array asal. Jika permittedOrigins terdiri dari satu item "*", CaptureHandle dapat diamati oleh semua aplikasi web pengambilan. Jika tidak, hanya dapat diamati untuk mengambil aplikasi web yang asalnya berada di permittedOrigins.

Contoh berikut menunjukkan cara mengekspos UUID yang dibuat secara acak sebagai nama sebutan dan asal ke aplikasi web perekaman apa pun.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

Perhatikan bahwa aplikasi web yang direkam tidak mengetahui apakah aplikasi tersebut sedang direkam. Kecuali jika aplikasi web perekaman menggunakan informasi CaptureHandle untuk membangun komunikasi dengan aplikasi web yang direkam (misalnya, menggunakan pesan melalui pekerja, atau infrastruktur cloud bersama).

Sisi pengambilan

Aplikasi web yang merekam menyimpan MediaStreamTrack video, dan dapat membaca informasi handle rekaman 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 pengambilan ditambahkan ke permittedOrigins, panggilan ini akan menampilkan objek dengan anggota berikut:

• handle: Nilai string yang ditetapkan oleh aplikasi web yang diambil dengan navigator.mediaDevices.setCaptureHandleConfig().
• origin: Asal aplikasi web yang direkam jika exposeOrigin ditetapkan ke true. Jika tidak, nilai ini tidak akan ditentukan.

Contoh berikut menunjukkan cara membaca informasi handle pengambilan 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 diambil 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

Kolaborasi antara aplikasi web yang mengambil gambar dan aplikasi web yang diambil gambarnya secara teoritis dapat dilakukan saat ini, misalnya dengan menyematkan "piksel ajaib" di aplikasi web yang diambil gambarnya atau menyematkan kode QR di streaming video. Capture Handle menawarkan mekanisme yang lebih sederhana, lebih andal, dan lebih aman. Hal ini juga memungkinkan aplikasi web yang diambil untuk memilih audiens - baik asal tertentu maupun seluruh web.

Perhatikan bahwa navigator.mediaDevices.setCaptureHandleConfig() hanya tersedia untuk frame utama tingkat atas dalam konteks penjelajahan aman (khusus HTTPS).

Contoh

Anda dapat bermain dengan Capture Handle dengan menjalankan contoh di Glitch. Pastikan untuk melihat kode sumber.

Demo

Beberapa demo tersedia di:

• Kontrol Jarak Jauh
• Deteksi Perekaman Diri

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 berikutnya

Berikut adalah cuplikan tentang hal yang akan terjadi dalam waktu dekat yang akan meningkatkan kualitas 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 menginstruksikan browser agar beralih fokus ke platform tampilan yang direkam, atau untuk menghindari perubahan fokus tersebut.

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda dengan Capture Handle.

Beri tahu kami tentang desain

Apakah ada sesuatu pada Capture Handle 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 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 bug. Glitch sangat cocok untuk membagikan rekaman ulang yang cepat dan mudah.

Menampilkan 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 tempat dan cara Anda menggunakannya.

Link bermanfaat

• Spesifikasi
• Penjelasan
• Peninjauan TAG
• Bug Chromium
• Entri ChromeStatus.com

Ucapan terima kasih

Terima kasih kepada Joe Medley yang telah meninjau artikel ini.