Fitur geser, miringkan, dan zoom pada kamera akhirnya dapat dikontrol di web.
Solusi konferensi video skala ruangan men-deploy kamera dengan kemampuan geser, miringkan, dan zoom
(PTZ) sehingga software dapat mengarahkan kamera ke peserta
rapat. Mulai Chrome 87, fitur geser, miringkan, dan zoom pada
kamera tersedia untuk situs yang menggunakan batasan trek media di
MediaDevices.getUserMedia() dan MediaStreamTrack.applyConstraints().
Menggunakan API
Deteksi fitur
Deteksi fitur untuk perangkat keras berbeda dari apa yang mungkin Anda biasa gunakan.
Keberadaan nama batasan "pan", "tilt", dan "zoom" di
navigator.mediaDevices.getSupportedConstraints() memberi tahu Anda bahwa browser
mendukung API untuk mengontrol PTZ kamera, tetapi bukan apakah hardware kamera
mendukungnya. Mulai Chrome 87, mengontrol PTZ kamera didukung di
desktop, sedangkan Android masih mendukung zoom saja.
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 memberi kamera izin PTZ melalui prompt.
Untuk meminta akses PTZ kamera, panggil navigator.mediaDevices.getUserMedia() dengan
batasan PTZ seperti yang ditunjukkan di bawah ini. Tindakan ini akan meminta pengguna untuk memberikan
kamera dan kamera biasa 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 perintah kamera biasa.
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 kamera yang sebelumnya diberikan, khususnya tanpa akses PTZ, tidak otomatis mendapatkan akses PTZ jika tersedia. Hal ini berlaku meskipun kamera itu sendiri mendukung PTZ. Izin harus diminta lagi. 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 lihat kolom "Pan-Tilt-Zoom"
di tab "Video Capture"; "pan tilt" dan "zoom" masing-masing berarti kamera mendukung "PanTilt (Absolute)" dan "Zoom (Absolute)" kontrol UVC. Kontrol UVC "PanTilt (Relative)"
dan "Zoom (Relative)" tidak didukung di browser berbasis Chromium.
Kontrol PTZ kamera
Memanipulasi kemampuan dan setelan PTZ kamera menggunakan MediaStreamTrack pratinjau
dari objek stream yang diperoleh sebelumnya.
MediaStreamTrack.getCapabilities() menampilkan kamus dengan kemampuan yang didukung
dan rentang atau nilai yang diizinkan. Dengan demikian,
MediaStreamTrack.getSettings() akan menampilkan setelan saat ini.
Kemampuan serta setelan geser, miringkan, dan zoom hanya tersedia jika didukung oleh kamera dan pengguna telah memberikan izin PTZ ke kamera.
Panggil videoTrack.applyConstraints() dengan batasan lanjutan PTZ yang sesuai untuk mengontrol penggeseran, kemiringan, dan zoom kamera seperti yang ditunjukkan pada contoh di bawah.
Promise yang ditampilkan akan di-resolve jika berhasil. Jika tidak, repositori akan ditolak jika salah satu:
- kamera dengan izin PTZ tidak diberikan.
- hardware kamera tidak mendukung batasan PTZ.
- halaman tersebut tidak terlihat 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 penggeseran, kemiringan, dan zoom kamera dengan memanggil navigator.mediaDevices.getUserMedia() dengan beberapa nilai batasan ideal PTZ kamera. Hal ini berguna jika kemampuan PTZ kamera diketahui sebelumnya. Perhatikan
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 bermain-main menggunakan API dengan menjalankan demo di Glitch. Pastikan untuk memeriksa kode sumbernya.
Pertimbangan Keamanan
Penulis spesifikasi telah mendesain dan menerapkan API ini menggunakan inti, termasuk kontrol pengguna, transparansi, dan ergonomi. Kemampuan untuk menggunakan API ini terutama dibatasi oleh model izin yang sama dengan Media Capture and Streams API. Sebagai respons atas perintah pengguna, situs diizinkan untuk mengontrol PTZ kamera hanya jika 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 untuk pekerjaan mereka dalam spesifikasi dan implementasinya. Banner besar oleh Christina @ wocintechchat.com di Unsplash.