Berbagi tab yang lebih baik dengan Capture Handle

François Beaufort

Elad Alon

Platform web kini dilengkapi dengan Capture Handle, mekanisme yang membantu kolaborasi antara perekaman dan aplikasi web yang direkam. Capture Handle memungkinkan aplikasi web perekaman mengidentifikasi aplikasi web yang direkam secara ergonomis dan tanpa ragu. (Jika aplikasi web yang direkam telah mengaktifkan.)

Beberapa contoh menggambarkan manfaatnya.

Contoh 1: Jika aplikasi web konferensi video merekam aplikasi web presentasi, aplikasi web konferensi video dapat menampilkan 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 berkurangnya beban ini, pengguna sekarang bebas untuk berkonsentrasi penuh pada penyampaian presentasi mereka.

Contoh 2: "hall of mirrors" terjadi saat permukaan yang diambil dirender kembali ke lokasi yang diambil. Khususnya, 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, foto diri dapat dideteksi dan dimitigasi; misalnya, oleh aplikasi web yang menyembunyikan pratinjau lokal.

Tentang Capture Handle

Handel Tangkap terdiri dari dua bagian pelengkap:

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

Sisi yang diambil

Aplikasi web dapat mengekspos informasi ke calon aplikasi web yang ditangkap. 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: Jika true, asal aplikasi web yang direkam mungkin diekspos untuk merekam aplikasi web.
• permittedOrigins: Nilai yang valid adalah (i) array kosong, (ii) array dengan "*" item tunggal, atau (iii) array asal. Jika permittedOrigins terdiri dari satu item "*", CaptureHandle dapat diamati oleh semua aplikasi web yang merekam. Jika tidak, hanya dapat diamati untuk mengambil aplikasi web yang asalnya ada di permittedOrigins.

Contoh berikut menunjukkan cara mengekspos UUID yang dibuat secara acak sebagai handle dan origin ke aplikasi web apa pun yang menangkap.

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

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

Mengambil foto sisi

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 perekaman tersedia, dan aplikasi web perekaman 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, baris tersebut tidak akan didefinisikan.

Contoh berikut menunjukkan cara membaca informasi nama sebutan channel rekaman 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 memanggil navigator.mediaDevices.setCaptureHandleConfig().
• Navigasi lintas dokumen terjadi di aplikasi web yang diambil.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

Keamanan dan privasi

Kolaborasi antara perekaman dan aplikasi web yang direkam secara teoretis dimungkinkan saat ini, dengan menyematkan "piksel ajaib" di aplikasi web yang direkam 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 direkam untuk memilih audiens - baik asal tertentu maupun seluruh web.

Perlu diperhatikan bahwa navigator.mediaDevices.setCaptureHandleConfig() hanya tersedia untuk frame utama level atas dalam konteks penjelajahan yang aman (khusus HTTPS).

Contoh

Anda dapat bermain dengan Capture Handle dengan menjalankan sampel di Glitch. Menjadi pastikan untuk memeriksa kode sumbernya.

Demo

Beberapa demo tersedia di:

• Remote Control
• Deteksi Pengambilan Gambar Mandiri

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 sedikit gambaran tentang apa 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 yang merekam menginstruksikan browser untuk mengalihkan fokus ke permukaan tampilan yang diambil, atau untuk menghindari perubahan fokus tersebut.

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda dengan 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 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. Glitch sangat cocok untuk membagikan repro dengan cepat dan mudah.

Tunjukkan dukungan

Apakah Anda berencana menggunakan Capture Handle? 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

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

Ucapan terima kasih

Terima kasih kepada Joe Medley telah meninjau artikel ini.