Berbagi tab yang lebih baik dengan Capture Handle

Prancis Beaufort
François Beaufort
GitHub
Elad Alon
Elad Alon
GitHub

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.

Ilustrasi efek aula cermin

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 objek MediaStreamTrack.

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: Jika true, 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. Jika permittedOrigins 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 dalam permittedOrigins.

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 dengan navigator.mediaDevices.setCaptureHandleConfig().
  • origin: Asal aplikasi web yang diambil jika exposeOrigin disetel ke true. 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.

Ucapan terima kasih

Terima kasih kepada Joe Medley telah meninjau artikel ini.