Platform web sudah memungkinkan aplikasi web merekam trek video dari tab saat ini. Kini fitur ini dilengkapi dengan Region Capture, yaitu mekanisme untuk memangkas trek video tersebut. Aplikasi web menetapkan bagian tab yang aktif sebagai area minat, dan browser memangkas semua piksel di luar area tersebut.
Aplikasi web sebelumnya dapat memangkas trek video “secara manual”. Artinya, aplikasi web dapat memanipulasi setiap {i>frame<i} secara langsung. Perangkat ini tidak tangguh atau berperforma cukup baik. Region Capture dapat mengatasi kekurangan ini. Aplikasi web kini dapat menginstruksikan browser untuk melakukan pekerjaan atas namanya.
Tentang Pengambilan Wilayah
Jadi, Anda telah membuat situs web dengan Dynamic ContentTM. Ini adalah aplikasi web terbaik yang pernah ada, dan orang-orang tidak dapat berhenti menggunakannya, sering kali secara kolaboratif. Langkah berikutnya yang memungkinkan adalah menyematkan kemampuan konferensi virtual. Anda memutuskan untuk mengikutinya. Anda bekerja sama dengan penyedia layanan konferensi video yang sudah ada, dengan menyematkan aplikasi web mereka sebagai iframe lintas origin. Aplikasi web konferensi video merekam tab saat ini sebagai trek video dan mengirimkannya ke peserta jarak jauh.
Tidak secepat itu... Anda tentu tidak ingin mentransmisikan kembali video orang lain kepada mereka, kan? Lebih baik pangkas bagian tersebut. Tapi, bagaimana bisa? iframe sematan tidak mengetahui konten apa yang ingin diekspos dan di mana, sehingga tidak dapat dipangkas tanpa bantuan. Secara teori, Anda bisa meneruskan koordinat yang dimaksudkan. Tetapi apa yang terjadi jika pengguna mengubah ukuran jendela? Men-scroll area pandang? Memperbesar atau memperkecil? Berinteraksi dengan halaman sedemikian rupa hingga tata letaknya berubah? Meskipun Anda mengirimkan koordinat baru ke iframe pengambilan, masalah pengaturan waktu masih dapat menyebabkan beberapa frame salah dipangkas.
Lalu mari kita gunakan Region Capture. Terdapat Element di halaman Anda, mungkin <div>, yang berisi konten utama. Sebut saja mainContentArea. Anda ingin aplikasi web konferensi video merekam dan berbagi dari jarak jauh area yang ditentukan oleh kotak pembatas elemen ini. 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 mengikuti, tanpa memerlukan input tambahan dari salah satu aplikasi web.
Mari kita bahas lagi langkah-langkah ini:
Anda menentukan CropTarget di aplikasi web dengan memanggil CropTarget.fromElement() menggunakan 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() di trek video rekam mandiri dengan 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.
Lanjutkan! 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.
}
Memperoleh CropTarget
Mari kita fokus pada Elemen yang disebut mainContentArea. Untuk mendapatkan CropTarget darinya, panggil CropTarget.fromElement(mainContentArea). Promise yang ditampilkan akan di-resolve dengan objek CropTarget baru jika berhasil. Jika tidak, item ini akan ditolak jika Anda telah mencetak 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. Instance dapat diteruskan ke dokumen lain menggunakan Window.postMessage().
Memangkas
Saat merekam tab, trek video akan dibuat instance-nya sebagai BrowserCaptureMediaStreamTrack, yang merupakan subclass MediaStreamTrack. Subclass tersebut mengekspos cropTo(). Panggil track.cropTo(cropTarget) untuk mulai memangkas ke kontur mainContentArea (Elemen tempat cropTarget berasal).
Jika berhasil, Promise akan di-resolve 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:
CropTargetdicetak di tab lain. (Untuk saat ini - nantikan kabar terbarunya.)CropTargetberasal dari Elemen yang sudah tidak ada lagi.- Lagu ini memiliki clone. (Lihat masalah 1509418.)
- Trek saat ini bukan trek video rekaman otomatis; lihat di bawah ini.
Metode cropTo() ditampilkan pada trek video perekaman tab, dan tidak hanya untuk perekaman mandiri. Oleh karena itu, sebaiknya periksa apakah pengguna memilih tab saat ini, sebelum mencoba memangkas trek. Hal ini dapat dilakukan menggunakan Capture Handle. Anda juga dapat meminta browser untuk mendorong pengguna mengambil foto diri 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 Region Capture, hanya posisi dan ukuran target yang penting, bukan z-index. Piksel yang menutupi target akan ditangkap. Bagian target yang terhalang tidak akan ditangkap.
Hal ini merupakan akibat dari Pengambilan Wilayah yang pada dasarnya memangkas. Satu alternatif, yang akan menjadi API masa depannya sendiri, adalah Pengambilan Tingkat Elemen; yaitu, menangkap hanya piksel yang terkait dengan target, terlepas dari oklusi. API tersebut memiliki serangkaian persyaratan keamanan dan privasi yang berbeda dengan pemangkasan sederhana.
Keamanan dan privasi
Pengambilan Wilayah memungkinkan aplikasi web yang telah mengamati semua piksel dalam tab untuk menghapus beberapa piksel tersebut secara sukarela. Data ini terbukti aman, karena tidak ada informasi baru yang dapat diperoleh.
Pengambilan Wilayah dapat digunakan untuk membatasi informasi yang dikirim ke peserta jarak jauh. Misalnya, mungkin Anda ingin membagikan beberapa {i>slide<i}, tetapi tidak ingin membagikan catatan pembicara.
Berbagi catatan dari jarak jauh sangat tidak diinginkan. Isyaratkan Pengambilan Wilayah.
Perhatikan bahwa secara lokal, Region Capture tidak menambahkan jaminan keamanan apa pun. Saat menyerahkan trek ke dokumen lain, dokumen penerima masih dapat membatalkan pemangkasan jalur dan mendapatkan akses ke semua piksel tab yang direkam.
Chrome menggambar batas biru di sekitar tepi tab yang direkam. Saat memangkas, Chrome biasanya menggambar batas biru di sekitar target yang dipangkas.
Demo
Anda dapat mencoba Region Capture dengan menjalankan demo di Glitch. Membuat pastikan untuk memeriksa kode sumbernya.
Dukungan browser
Dukungan Browser
- 104
- 104
- x
- x
Pengambilan Wilayah hanya tersedia dari Chrome 104 di desktop.
Langkah berikutnya
Berikut sedikit gambaran tentang apa yang akan terjadi dalam waktu dekat yang akan meningkatkan kualitas berbagi layar di web:
- Pengambilan Region akan mendukung tangkapan tab lain.
- Fokus Bersyarat akan memungkinkan aplikasi web yang merekam menginstruksikan browser untuk mengalihkan fokus ke permukaan tampilan yang diambil, 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 tentang Region Capture 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 sangat cocok untuk membagikan repro dengan cepat dan mudah.
Tunjukkan dukungan
Anda berencana menggunakan Pengambilan Wilayah? 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
Ucapan terima kasih
Terima kasih kepada Joe Medley telah meninjau artikel ini.