パンチルトズームカメラAPIを使用する

const supports = navigator.mediaDevices.getSupportedConstraints();

if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

async function requestPTZ() {
  try {
  // First we request permission from the user, if they accept it will yield a MediaStream object
  const opts = {video: {pan: true, tilt: true, zoom: true}};
  const stream = await navigator.mediaDevices.getUserMedia(opts);
  // Secondly we can bind this stream to a <video> element on the page.
  document.querySelector("#video").srcObject = stream;

  // Lastly we want to get the capabilities of our webcam, the current settings of it and the videotrack itself.
  const [videoTrack] = stream.getVideoTracks();
  const capabilities = videoTrack.getCapabilities();
  const settings = videoTrack.getSettings();

  // ...
 } catch (error) {
  throw new Error(error)
  // User denies prompt, or
  // matching media is not available.
 }
}

async function changeZoom(capabilities, settings, videoTrack) {
  await videoTrack.applyConstraints({
   advanced: [{ zoom: capabilities.zoom.max }]
  })
}

if ('zoom' in settings) {
  changeZoom();
}