Halaman ini diterjemahkan oleh Cloud Translation API.

Mengontrol geser, kemiringan, dan zoom kamera

Fitur geser, miring, dan zoom pada kamera pada akhirnya dapat dikontrol di web.

François Beaufort

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 trek 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.

Screenshot perintah pengguna PTZ kamera di Chrome untuk macOS. — Perintah pengguna PTZ Kamera.

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 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.

Screenshot halaman internal di ChromeOS untuk men-debug dukungan kamera PTZ. — Halaman internal untuk men-debug dukungan kamera PTZ.

Kontrol PTZ kamera

Memanipulasi kemampuan dan setelan PTZ kamera menggunakan pratinjau MediaStreamTrack dari objek stream yang diperoleh sebelumnya. MediaStreamTrack.getCapabilities() menampilkan kamus dengan atribut 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.

Mengontrol PTZ 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

Dukungan Browser

Sumber

Permissions API

Dukungan Browser

Sumber

API Visibilitas Halaman

Dukungan Browser

Sumber

`MediaDevices.getUserMedia()`

Dukungan Browser

Sumber

`MediaDevices.getSupportedConstraints()`

Dukungan Browser

Sumber

`MediaStreamTrack.applyConstraints()`

Dukungan Browser

Sumber

`MediaStreamTrack.getCapabilities()`

Dukungan Browser

Sumber

`MediaStreamTrack.getSettings()`

Dukungan Browser

Sumber

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.