Kontrol berbagi layar yang menjaga privasi

François Beaufort

Elad Alon

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. Baru-baru ini ada perubahan pada API untuk menjaga privasi dengan lebih baik, dan mencegah pembagian informasi pribadi secara tidak sengaja.

Berikut adalah 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 beralih secara dinamis di antara tab bersama.
• Opsi selfBrowserSurface dapat digunakan untuk mencegah pengguna membagikan tab saat ini. Hal ini menghindari efek "hall of mirrors".
• 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 jendela.
• "monitor" untuk layar.

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

Panel "Window" dipilih sebelumnya di pemilih media.

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 menetapkan 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",
});

Panel "Seluruh Layar" tidak terlihat di pemilih media.

Perhatikan bahwa monitorTypeSurfaces: "exclude" eksplisit tidak dapat terjadi secara bersamaan dengan displaySurface: "monitor".

Opsi surfaceSwitching

Salah satu alasan utama untuk berbagi seluruh layar adalah keinginan untuk beralih secara lancar antara berbagi platform yang berbeda selama sesi. Untuk mengatasinya, Chrome kini menampilkan tombol yang memungkinkan pengguna beralih antar-tab yang berbeda secara dinamis. Tombol "Bagikan tab ini" sebelumnya tersedia untuk ekstensi Chrome, dan kini dapat digunakan oleh aplikasi web apa pun yang memanggil getDisplayMedia().

Tombol "Bagikan tab ini sebagai gantinya" di Chrome.

Jika surfaceSwitching disetel ke "include", browser akan mengekspos 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 kali membuat kesalahan dengan memilih tab konferensi video itu sendiri, yang menyebabkan efek "hall of mirrors", suara bising, dan kebingungan umum.

Untuk melindungi pengguna dari diri mereka sendiri, aplikasi web konferensi video kini dapat menetapkan selfBrowserSurface ke "exclude". Chrome kemudian 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 🦶🔫.
});

Tab saat ini dikecualikan, hanya tab kedua yang ada.

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, sebaiknya rekam audio juga. - Di sisi lain, audio sistem mencakup audio peserta jarak jauh sendiri, dan tidak boleh dikirim kembali kepada mereka.

Di masa mendatang, Anda mungkin dapat mengecualikan beberapa sumber audio dari perekaman. Namun, untuk saat ini, aplikasi web konferensi video sering kali lebih memilih untuk tidak merekam audio sistem. Sebelumnya, hal ini dapat dilakukan dengan memeriksa platform tampilan yang dipilih pengguna, dan menghentikan trek audio jika mereka memilih untuk berbagi layar. Namun, hal ini menimbulkan masalah kecil, yaitu beberapa pengguna bingung saat mereka secara eksplisit mencentang kotak untuk berbagi audio sistem, lalu diberi tahu oleh peserta jarak jauh bahwa tidak ada audio yang masuk.

Audio tab berbagi ditawarkan di panel "Chrome Tab", tetapi tidak di panel "Seluruh Layar".

Dengan menetapkan systemAudio ke "exclude", aplikasi web dapat menghindari kebingungan pengguna melalui sinyal campuran. Chrome akan menawarkan untuk merekam audio bersama tab dan jendela, tetapi tidak bersama 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 melihat kode sumbernya.

Dukungan browser

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

Dukungan Browser

• 105
• 105
• x
• x

• systemAudio tersedia di Chrome 105 di desktop.

Dukungan Browser

• 119
• 119
• x
• x

• monitorTypeSurfaces tersedia di Chrome 119 di desktop.

Masukan

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

Beri tahu kami tentang desain

Apakah ada sesuatu tentang kontrol berbagi layar tersebut yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda perlukan 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 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 mereproduksinya. Glitch berfungsi dengan baik untuk berbagi kode.

Menampilkan dukungan

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

Ucapan terima kasih

Terima kasih kepada Rachel Andrew yang telah meninjau