Kontrol berbagi layar yang menjaga privasi

François Beaufort

GitHub

Elad Alon

GitHub

Berbagi tab, jendela, dan layar sudah dapat dilakukan di platform web dengan Screen Capture API. Singkatnya, getDisplayMedia() memungkinkan pengguna memilih layar atau bagian dari layar (seperti jendela) untuk direkam sebagai streaming media. Streaming ini kemudian dapat direkam atau dibagikan kepada pengguna 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 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 untuk beralih di antara tab bersama secara dinamis.
• Opsi selfBrowserSurface dapat digunakan untuk mencegah pengguna membagikan tab saat ini. Tindakan ini akan 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, masih dapat meminta Chrome untuk menawarkan jendela atau layar dengan lebih jelas di pemilih media. Urutan penawaran tetap 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" },
});

Panel "Jendela" telah dipilih sebelumnya di pemilih media.

Perhatikan bahwa kami tidak menawarkan opsi untuk memilih sebelumnya jendela atau layar tertentu. Hal ini memang sengaja dibuat, karena akan memberi aplikasi web terlalu banyak kendali atas pengguna.

Opsi monitorTypeSurfaces

Untuk melindungi perusahaan dari kebocoran informasi pribadi karena 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 disarankan untuk menyetelnya secara eksplisit, karena nilai default dapat berubah di 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 alat pilih media.

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

Opsi surfaceSwitching

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

Tombol "Bagikan tab ini" di Chrome.

Jika surfaceSwitching disetel ke "include", browser akan menampilkan tombol tersebut. Jika disetel ke "exclude", tindakan ini tidak akan menampilkan tombol tersebut kepada pengguna. Aplikasi web dianjurkan untuk 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 efek "hall of mirrors", melolong dan kebingungan umum.

Untuk melindungi pengguna dari diri mereka sendiri, aplikasi web konferensi video kini dapat menyetel 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 disarankan untuk menyetelnya secara eksplisit, karena nilai default dapat berubah di masa mendatang.

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

Tab saat ini dikecualikan, hanya tab kedua yang ditampilkan.

Perhatikan bahwa selfBrowserSurface: "exclude" eksplisit tidak dapat terjadi bersamaan dengan preferCurrentTab: true.

Opsi systemAudio

getDisplayMedia() memungkinkan perekaman audio bersama video. Tapi tidak semua audio dibuat sama. Pertimbangkan aplikasi web konferensi video: - Jika pengguna membagikan tab lain, sebaiknya rekam audio juga. - Di sisi lain, audio sistem menyertakan audio milik peserta jarak jauh dan tidak boleh dikirimkan kembali kepada mereka.

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

Berbagi audio tab ditawarkan di panel "Tab Chrome", tetapi tidak di panel "Seluruh Layar".

Dengan menetapkan systemAudio ke "exclude", aplikasi web dapat menghindari kebingungan pengguna melalui sinyal yang beragam. Chrome akan menawarkan untuk merekam audio di samping 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 disarankan untuk menyetelnya secara eksplisit, karena nilai default dapat berubah di masa mendatang.

Demo

Anda dapat bermain-main menggunakan kontrol berbagi layar ini dengan menjalankan demo di Glitch. Pastikan untuk memeriksa kode sumbernya.

Dukungan browser

Dukungan Browser

• 107
• 107
• x
• 11.1

Sumber

• 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 menggunakan kontrol berbagi layar tersebut.

Beri tahu kami tentang desainnya

Apakah ada sesuatu pada kontrol berbagi layar tersebut 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 membagikan kode.

Tampilkan 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 di mana dan bagaimana 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 telah meninjau artikel ini.