Fitur geser, miring, dan zoom pada kamera pada akhirnya dapat dikontrol di web.
Solusi konferensi video berskala ruangan men-deploy kamera dengan geser, kemiringan, dan zoom
(PTZ) sehingga software dapat mengarahkan kamera saat rapat
peserta. Mulai Chrome 87, fitur geser, miringkan, dan zoom diaktifkan
kamera tersedia untuk situs web yang
menggunakan batasan pelacakan media di
MediaDevices.getUserMedia() dan MediaStreamTrack.applyConstraints().
Menggunakan API
Deteksi fitur
Deteksi fitur untuk perangkat keras berbeda dari yang biasa Anda gunakan.
Adanya nama batasan "pan", "tilt", dan "zoom" di
navigator.mediaDevices.getSupportedConstraints() memberi tahu Anda bahwa browser
mendukung API untuk mengontrol PTZ kamera, tetapi tidak mendukung apakah hardware kamera
mendukungnya. Mulai Chrome 87, mengontrol PTZ kamera didukung di
desktop, sementara Android masih mendukung hanya {i>zoom<i}.
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
Minta akses PTZ kamera
Situs diizinkan untuk mengontrol PTZ kamera hanya jika pengguna secara eksplisit memberikan izin PTZ ke kamera melalui perintah.
Untuk meminta akses PTZ kamera, panggil navigator.mediaDevices.getUserMedia() dengan
batasan PTZ seperti yang ditunjukkan di bawah ini. Tindakan ini akan meminta pengguna memberikan
kamera dan kamera reguler dengan izin PTZ.
Promise yang ditampilkan akan di-resolve dengan objek MediaStream yang digunakan untuk menampilkan
streaming video kamera kepada pengguna. Jika kamera tidak mendukung PTZ, pengguna
akan mendapatkan prompt kamera reguler.
try {
// User is prompted to grant both camera and PTZ access in a single call.
// If camera doesn't support PTZ, it falls back to a regular camera prompt.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to control camera PTZ as well without altering the
// current pan, tilt, and zoom settings.
video: { pan: true, tilt: true, zoom: true }
});
// Show camera video stream to user.
document.querySelector("video").srcObject = stream;
} catch (error) {
// User denies prompt or matching media is not available.
console.log(error);
}
Izin akses kamera yang sebelumnya diberikan, khususnya yang tidak memiliki akses PTZ, tidak mendapatkan akses PTZ secara otomatis jika tersedia. Ini benar bahkan saat kamera itu sendiri mendukung PTZ. Izin harus diminta untuk mencoba lagi perintah. Untungnya, Anda dapat menggunakan Permissions API untuk membuat kueri dan memantau status izin PTZ.
try {
const panTiltZoomPermissionStatus = await navigator.permissions.query({
name: "camera",
panTiltZoom: true
});
if (panTiltZoomPermissionStatus.state == "granted") {
// User has granted access to the website to control camera PTZ.
}
panTiltZoomPermissionStatus.addEventListener("change", () => {
// User has changed PTZ permission status.
});
} catch (error) {
console.log(error);
}
Untuk mengetahui apakah browser berbasis Chromium mendukung PTZ untuk kamera, buka
halaman about://media-internals internal dan periksa panel "Pan-Tilt-Zoom" kolom
di "Perekaman Video" tab; "kemiringan geser" dan "zoom" masing-masing berarti kamera mendukung
"PanTilt (Absolut)" dan "Zoom (Absolut)" Kontrol UVC. "PanTilt (Relatif)"
dan "Zoom (Relatif)" Kontrol UVC tidak didukung di browser berbasis Chromium.
Kontrol PTZ kamera
Memanipulasi kemampuan dan setelan PTZ kamera menggunakan pratinjau
MediaStreamTrack dari objek stream yang diperoleh sebelumnya.
MediaStreamTrack.getCapabilities() menampilkan kamus dengan kata kunci yang didukung
kemampuan dan rentang atau nilai yang diizinkan. Sejalan dengan itu,
MediaStreamTrack.getSettings() menampilkan setelan saat ini.
Kemampuan dan setelan geser, kemiringan, dan zoom hanya tersedia jika didukung oleh kamera dan pengguna telah memberikan izin PTZ ke kamera.
Panggil videoTrack.applyConstraints() dengan perintah PTZ advanced yang sesuai
batasan untuk mengontrol penggeseran, kemiringan, dan zoom kamera seperti yang ditunjukkan pada contoh di bawah.
Promise yang ditampilkan akan di-resolve jika berhasil. Jika tidak, diagram akan
ditolak jika
antara:
- kamera dengan izin PTZ tidak diberikan.
- hardware kamera tidak mendukung batasan PTZ.
- halaman tidak dapat dilihat oleh pengguna. Gunakan Page Visibility API untuk mendeteksi perubahan visibilitas halaman.
// Get video track capabilities and settings.
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();
// Let the user control the camera pan motion if the camera supports it
// and PTZ access is granted.
if ("pan" in settings) {
const input = document.querySelector("input[type=range]");
input.min = capabilities.pan.min;
input.max = capabilities.pan.max;
input.step = capabilities.pan.step;
input.value = settings.pan;
input.addEventListener("input", async () => {
await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
});
}
if ("tilt" in settings) {
// similar for tilt...
}
if ("zoom" in settings) {
// similar for zoom...
}
Anda juga dapat mengonfigurasi geser, kemiringan, dan zoom kamera dengan memanggil
navigator.mediaDevices.getUserMedia() dengan beberapa batasan ideal PTZ kamera
masing-masing. Hal ini berguna ketika kemampuan PTZ kamera telah diketahui sebelumnya. Catatan
bahwa batasan wajib (min., maks, tepat) tidak diizinkan di sini.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
Taman Bermain
Anda dapat mencoba API tersebut dengan menjalankan demo di Glitch. Pastikan untuk memeriksa kode sumber.
Pertimbangan Keamanan
Penulis spesifikasi telah mendesain dan menerapkan API ini menggunakan termasuk kontrol pengguna, transparansi, dan ergonomi. Kemampuan menggunakan API ini terutama dilindungi oleh model izin yang sama seperti Media Capture dan Streams API. Sebagai tanggapan atas permintaan pengguna, situs web diizinkan untuk mengontrol PTZ kamera hanya saat halaman dapat dilihat oleh pengguna.
Kompatibilitas browser
API MediaStream
Permissions API
API Visibilitas Halaman
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
Link bermanfaat
Ucapan terima kasih
Artikel ini ditinjau oleh Joe Medley dan Thomas Steiner. Terima kasih kepada Rijubrata Bhaumik dan Eero Häkkinen di Intel atas karya mereka dalam spesifikasi dan implementasinya. Banner besar oleh Christina @ wocintechchat.com di Unsplash.