Platform web telah memungkinkan aplikasi web untuk merekam trek video dari tab saat ini. Fitur ini kini dilengkapi dengan Region Capture, mekanisme untuk memangkas trek video ini. Aplikasi web menentukan sebagian tab saat ini sebagai area yang diinginkan, dan browser memangkas semua piksel di luar area tersebut.
Aplikasi web sebelumnya dapat memangkas trek video “secara manual”. Artinya, aplikasi web dapat memanipulasi setiap frame secara langsung. Eksperimen ini tidak andal atau berperforma tinggi. Region Capture mengatasi kekurangan ini. Aplikasi web kini dapat memerintahkan browser untuk melakukan tugas atas nama aplikasi web.
Tentang Pengambilan Wilayah
Anda telah membuat situs web dengan Dynamic ContentTM. Ini adalah aplikasi web terbaik yang pernah ada, dan orang-orang tidak bisa berhenti menggunakannya, sering kali secara kolaboratif. Langkah berikutnya yang dapat dilakukan adalah menyematkan kemampuan konferensi virtual. Anda memutuskan untuk mengikutinya. Anda bekerja sama dengan penyedia layanan konferensi video yang ada, yang menyematkan aplikasi web mereka sebagai iframe lintas origin. Aplikasi web konferensi video menangkap tab saat ini sebagai trek video dan mentransmisikan ke peserta jarak jauh.
Tidak secepat itu... Anda tidak ingin mengirim kembali video orang lain kepada mereka, bukan? Sebaiknya pangkas bagian tersebut. Tapi, bagaimana bisa? Iframe tersemat tidak mengetahui konten apa yang Anda ekspos dan di mana, sehingga ia tidak dapat memangkas tanpa bantuan. Secara teori, Anda bisa meneruskan koordinat yang diinginkan. Tetapi apa yang terjadi jika pengguna mengubah ukuran jendela? Men-scroll area pandang? Memperbesar atau memperkecil? Berinteraksi dengan halaman sedemikian rupa sehingga menghasilkan perubahan tata letak? Meskipun Anda mengirim koordinat baru ke iframe perekaman, masalah pengaturan waktu masih dapat menyebabkan beberapa frame yang salah dipangkas.
Mari kita gunakan Region Capture. Ada Element di halaman Anda, mungkin <div>, yang berisi konten utama. Sebut saja mainContentArea. Anda ingin aplikasi web konferensi video menangkap dan membagikan area yang ditentukan oleh kotak pembatas elemen ini dari jarak jauh. Jadi, Anda mendapatkan CropTarget dari mainContentArea. Anda meneruskan CropTarget ini ke aplikasi web konferensi video. Setelah memangkas trek video menggunakan CropTarget ini, frame pada trek tersebut kini hanya terdiri dari piksel yang berada dalam kotak pembatas mainContentArea. Jika mainContentArea mengubah ukuran, bentuk, atau lokasi, trek video akan mengikutinya, tanpa memerlukan input tambahan dari salah satu aplikasi web.
Mari kita ulangi langkah-langkah ini lagi:
Anda menentukan CropTarget di aplikasi web dengan memanggil CropTarget.fromElement() dengan elemen pilihan Anda sebagai input.
// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Anda meneruskan CropTarget ke aplikasi web konferensi video.
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);
Aplikasi web konferensi video meminta browser untuk memangkas trek ke area yang ditentukan oleh CropTarget dengan memanggil cropTo() pada trek video yang diambil sendiri menggunakan target pemangkasan yang diterima dari aplikasi web utama.
// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();
// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);
// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.
Dan akhirnya! Tugas Anda sudah selesai.
Pembahasan mendalam
Deteksi fitur
Untuk memeriksa apakah CropTarget.fromElement() didukung, gunakan:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Mendapatkan Target Pangkas
Mari kita fokus pada Elemen yang disebut mainContentArea. Untuk mendapatkan CropTarget darinya, panggil CropTarget.fromElement(mainContentArea). Promise yang ditampilkan akan diselesaikan dengan objek CropTarget baru jika berhasil. Jika tidak, penawaran akan ditolak jika Anda telah membuat objek CropTarget dalam jumlah yang tidak wajar.
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);
Tidak seperti Element, objek CropTarget dapat diserialisasi. Misalnya, nilai tersebut dapat diteruskan ke dokumen lain menggunakan Window.postMessage().
Pemangkasan
Saat merekam tab, trek video dibuat instance-nya sebagai BrowserCaptureMediaStreamTrack, yang merupakan subclass dari MediaStreamTrack. Subclass tersebut mengekspos cropTo(). Panggil track.cropTo(cropTarget) untuk mulai memangkas ke kontur mainContentArea (Elemen tempat cropTarget diperoleh).
Jika berhasil, Promise akan diselesaikan ketika dapat dijamin bahwa semua frame video berikutnya akan terdiri dari piksel yang berada dalam kotak pembatas mainContentArea.
Jika gagal, Promise akan ditolak. Hal ini akan terjadi jika:
CropTargetdibuat di tab lain. (Untuk saat ini - nantikan kabar terbarunya.)CropTargetberasal dari Elemen yang sudah tidak ada lagi.- Trek memiliki clone. (Lihat masalah 1509418).
- Trek saat ini bukan trek video yang direkam sendiri. Lihat di bawah.
Metode cropTo() diekspos pada trek video perekaman tab apa pun, dan bukan hanya untuk perekaman diri. Oleh karena itu, sebaiknya periksa apakah pengguna telah memilih tab saat ini, sebelum mencoba memangkas trek. Hal ini dapat dilakukan menggunakan Capture Handle. Anda juga dapat meminta browser untuk mendorong pengguna mengambil gambar diri sendiri menggunakan preferCurrentTab.
// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);
Untuk kembali ke status tidak dipangkas, panggil cropTo() dengan null.
// Stop cropping.
await track.cropTo(null);
Konten yang terhalang dan terhalang
Untuk Pengambilan Wilayah, hanya posisi dan ukuran target yang penting, bukan indeks z. Piksel yang menutupi target akan diambil. Bagian target yang tersumbat tidak akan diambil.
Hal ini wajar karena Region Capture pada dasarnya melakukan pemangkasan. Salah satu alternatifnya, yang akan menjadi API-nya sendiri di masa mendatang, adalah Pengambilan Tingkat Elemen; yaitu, hanya menangkap piksel yang terkait dengan target, terlepas dari oklusi. API tersebut memiliki serangkaian persyaratan keamanan dan privasi yang berbeda dari pemangkasan sederhana.
Keamanan dan privasi
Region Capture memungkinkan aplikasi web yang telah mengamati semua piksel di tab, untuk menghapus beberapa piksel tersebut secara sukarela. Data ini terbukti aman, karena tidak ada informasi baru yang dapat diperoleh.
Region Capture dapat digunakan untuk membatasi informasi yang dikirim ke peserta jarak jauh. Misalnya, mungkin Anda ingin membagikan beberapa slide, tetapi tidak ingin membagikan catatan pembicara.
Berbagi catatan dari jarak jauh sangat tidak diinginkan. Tangkapan Wilayah Isyarat.
Perhatikan bahwa secara lokal, Region Capture tidak menambahkan jaminan keamanan apa pun. Saat menyerahkan trek ke dokumen lain, dokumen penerima masih dapat membatalkan pemangkasan trek dan mendapatkan akses ke semua piksel tab yang diambil.
Chrome menggambar batas biru di sekitar tepi tab yang ditangkap. Saat memangkas, Chrome umumnya menggambar batas biru di sekitar target yang dipangkas.
Demo
Anda dapat bermain menggunakan Region Capture dengan menjalankan demo di Glitch. Pastikan untuk memeriksa kode sumbernya.
Dukungan browser
Dukungan Browser
- 104
- 104
- x
- x
Region Capture hanya tersedia di Chrome 104 di desktop.
Langkah selanjutnya
Berikut adalah sedikit bocoran tentang hal yang akan terjadi dalam waktu dekat yang akan meningkatkan kualitas berbagi layar di web:
- Region Capture akan mendukung pengambilan tab lain.
- Fokus Kondisional akan memungkinkan aplikasi web perekaman untuk memerintahkan browser mengalihkan fokus ke platform tampilan yang direkam, atau untuk menghindari perubahan fokus tersebut.
- Element-level Capture API mungkin disediakan.
Masukan
Tim Chrome dan komunitas standar web ingin mengetahui pengalaman Anda dengan Region Capture.
Beri tahu kami tentang desainnya
Apakah ada sesuatu pada Pengambilan Wilayah 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 Region Capture? 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
Ucapan terima kasih
Terima kasih kepada Joe Medley telah meninjau artikel ini.