Kontrol berbagi layar yang menjaga privasi

Berbagi tab, jendela, dan layar sudah dapat dilakukan di platform web dengan Screen Capture API. Singkatnya, getDisplayMedia() memungkinkan pengguna memilih layar atau bagian layar (seperti jendela) untuk direkam sebagai streaming media. Streaming ini kemudian dapat direkam atau dibagikan kepada orang lain melalui jaringan. Artikel ini memperkenalkan beberapa perubahan terbaru pada API untuk menjaga privasi dengan lebih baik, dan mencegah pembagian informasi pribadi secara tidak sengaja.

Berikut daftar kontrol yang dapat Anda gunakan untuk berbagi layar yang menjaga privasi:

• Opsi displaySurface dapat menunjukkan bahwa aplikasi web lebih memilih untuk menawarkan jenis platform tampilan tertentu (tab, jendela, atau layar).
• Opsi monitorTypeSurfaces dapat digunakan untuk mencegah pengguna membagikan seluruh layar.
• Opsi surfaceSwitching menunjukkan apakah Chrome harus mengizinkan pengguna untuk beralih secara dinamis di antara tab bersama.
• Opsi selfBrowserSurface dapat digunakan untuk mencegah pengguna membagikan tab saat ini. Ini akan menghindari "hall of mirror" pengaruh tersebut.
• Opsi systemAudio memastikan Chrome hanya menawarkan perekaman audio yang relevan kepada pengguna.

Perubahan pada getDisplayMedia()

Perubahan berikut telah dilakukan pada getDisplayMedia().

Opsi displaySurface

Aplikasi web dengan perjalanan pengguna khusus, yang berfungsi paling baik dengan berbagi jendela atau layar, tetap dapat meminta Chrome untuk menawarkan jendela atau layar dengan lebih jelas di pemilih media. Urutan penawaran tidak berubah, tetapi panel yang relevan telah dipilih sebelumnya.

Nilai untuk opsi displaySurface adalah:

• "browser" untuk tab.
• "window" untuk Windows.
• "monitor" untuk layar.

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

Perhatikan bahwa kami tidak menawarkan opsi untuk memilih jendela atau layar tertentu terlebih dahulu. Hal ini sesuai dengan desain, karena akan memberi aplikasi web terlalu banyak kendali atas pengguna.

Opsi monitorTypeSurfaces

Untuk melindungi perusahaan dari kebocoran informasi pribadi melalui kesalahan karyawan, aplikasi web konferensi video kini dapat menyetel monitorTypeSurfaces ke "exclude". Chrome kemudian akan mengecualikan layar di pemilih media. Untuk menyertakannya, tetapkan ke "include". Saat ini, nilai default untuk monitorTypeSurfaces adalah "include", tetapi aplikasi web sebaiknya menetapkannya secara eksplisit, karena default dapat berubah pada masa mendatang.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

Perhatikan bahwa monitorTypeSurfaces: "exclude" eksplisit sama-sama bersifat eksklusif dengan displaySurface: "monitor".

Opsi surfaceSwitching

Salah satu alasan yang paling banyak dikutip untuk membagikan seluruh layar adalah keinginan untuk beralih dengan lancar antar-platform yang berbeda selama sesi. Untuk mengatasinya, Chrome kini menampilkan tombol yang memungkinkan pengguna beralih antar-tab yang berbeda secara dinamis. Ini "Bagikan tab ini sebagai gantinya" sebelumnya telah tersedia untuk ekstensi Chrome, dan kini dapat digunakan oleh aplikasi web apa pun yang memanggil getDisplayMedia().

Jika surfaceSwitching disetel ke "include", browser akan menampilkan tombol tersebut. Jika ditetapkan ke "exclude", tombol tersebut tidak akan menampilkan tombol tersebut kepada pengguna. Aplikasi web sebaiknya menetapkan nilai eksplisit, karena Chrome dapat mengubah nilai default dari waktu ke waktu.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

Opsi selfBrowserSurface

Dalam skenario konferensi video, pengguna sering membuat kesalahan dengan memilih tab konferensi video itu sendiri, yang menyebabkan "banyak cermin" gangguan, melolong, dan kebingungan umum.

Untuk melindungi pengguna dari dirinya sendiri, aplikasi web konferensi video kini dapat menyetel selfBrowserSurface ke "exclude". Kemudian, Chrome akan mengecualikan tab saat ini dari daftar tab yang ditawarkan kepada pengguna. Untuk menyertakannya, tetapkan ke "include". Saat ini, nilai default untuk selfBrowserSurface adalah "exclude", tetapi aplikasi web sebaiknya menetapkannya secara eksplisit, karena default dapat berubah pada masa mendatang.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

Perhatikan bahwa selfBrowserSurface: "exclude" eksplisit sama-sama bersifat eksklusif dengan preferCurrentTab: true.

Opsi systemAudio

getDisplayMedia() memungkinkan perekaman audio bersama video. Namun, tidak semua audio dibuat sama. Pertimbangkan aplikasi web konferensi video: - Jika pengguna membagikan tab lain, merekam audio juga masuk akal. - Di sisi lain, audio sistem mencakup rekaman suara peserta jarak jauh audio Anda sendiri, dan tidak boleh ditransmisikan kembali kepada mereka.

Pada masa mendatang, Anda dapat mengecualikan beberapa sumber audio dari rekaman. Namun untuk saat ini, aplikasi web konferensi video sering kali dianggap sebagai solusi terbaik untuk menghindari perekaman audio sistem. Hal ini sebelumnya dapat dilakukan dengan memeriksa permukaan tampilan yang dipilih pengguna, dan menghentikan trek audio jika mereka memilih untuk berbagi layar. Namun, hal ini menimbulkan masalah kecil, karena beberapa pengguna bingung ketika mereka secara eksplisit mencentang kotak untuk berbagi audio sistem, dan kemudian diberi tahu oleh peserta jarak jauh bahwa tidak ada audio yang masuk.

Dengan menetapkan systemAudio ke "exclude", aplikasi web dapat menghindari kebingungan pengguna melalui sinyal campuran. Chrome akan menawarkan untuk merekam audio di samping tab dan jendela, tetapi tidak di samping layar.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

Saat ini, nilai default untuk systemAudio adalah "include", tetapi aplikasi web sebaiknya menetapkannya secara eksplisit, karena default dapat berubah pada masa mendatang.

Demo

Anda dapat mencoba kontrol berbagi layar ini dengan menjalankan demo di Glitch. Pastikan untuk memeriksa kode sumbernya.

Dukungan browser

• displaySurface, surfaceSwitching, dan selfBrowserSurface tersedia di Chrome 107 di desktop.

• systemAudio tersedia di Chrome 105 di desktop.

• monitorTypeSurfaces tersedia di Chrome 119 di desktop.

Masukan

Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda saat menggunakan kontrol berbagi layar tersebut.

Beri tahu kami tentang desainnya

Apakah ada sesuatu pada kontrol berbagi layar 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 berfungsi dengan baik untuk berbagi kode.

Tunjukkan dukungan

Anda berencana menggunakan kontrol berbagi layar tersebut? 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 displaySurface
• Penjelasan monitorTypeSurfaces
• Penjelasan surfaceSwitching
• Penjelasan selfBrowserSurface
• Penjelasan systemAudio
• Peninjauan TAG

Ucapan terima kasih

Banner besar oleh John Schnobrich.

Terima kasih kepada Rachel Andrew yang telah meninjau artikel ini.