samples/panTilt/index.html


<html>

<body>
  <video autoplay></video>
  <img>
  <div>
    <input type="range" id="panRange" name="pan" hidden>
    <label for="pan">Pan</label>
  </div>
  <div>
    <input type="range" id="tiltRange" name="tilt" hidden>
    <label for="tilt">Tilt</label>
  </div>
  <div>
    <input type="range" id="zoomRange" name="zoom " hidden>
    <label for="zoom">Zoom</label>
  </div>
  <div class="select">
    <label for="videoSource">Video source: </label>
    <select id="videoSource" disabled></select>
  </div>
  <p>See <a href="README.md">the README</a> for a list of supported cameras.</p>
  <script>
    var imageCapture;
    const supports = navigator.mediaDevices.getSupportedConstraints();
    console.log("supports = ", JSON.parse(JSON.stringify(supports)));
    navigator.mediaDevices.getUserMedia({
      video: { pan: true, tilt: true, zoom: true }
    }).then((mediaStream) => {
      gotStream(mediaStream);
      return navigator.mediaDevices.enumerateDevices()
        .then(gotDevices);
    })
    .catch(error => console.log('Argh!', error.name || error));

    async function gotStream(mediaStream) {
      const video = document.querySelector('video');
      if (video.srcObject) {
        video.srcObject.getTracks().forEach(track => track.stop());
      }
      document.querySelector('video').srcObject = mediaStream;
      const track = mediaStream.getVideoTracks()[0];
      const capabilities = track.getCapabilities();
      console.log("capabilities == ", JSON.parse(JSON.stringify(capabilities)));
      const settings = track.getSettings();
      console.log("settings == ", JSON.parse(JSON.stringify(settings)));
      const inputPanRange = document.getElementById('panRange');
      const inputTiltRange = document.getElementById('tiltRange');
      const inputZoomRange = document.getElementById('zoomRange');
      // Check whether pan is supported or not.
      if (!('pan' in settings)) {
        return Promise.reject('pan is not supported by ' + track.label);
      }
      // Check whether tilt is supported or not.
      if (!('tilt' in settings)) {
        return Promise.reject('tilt is not supported by ' + track.label);
      }
      // Check whether zoom is supported or not.
      if (!('zoom' in settings)) {
        return Promise.reject('zoom is not supported by ' + track.label);
      }
      // Map pan to a slider element.
      inputPanRange.min = capabilities.pan.min + 0.00001;
      inputPanRange.max = capabilities.pan.max;
      console.log("inputPanRange.min = ", inputPanRange.min);
      console.log("inputPanRange.max = ", inputPanRange.max);
      inputPanRange.step = capabilities.pan.step;
      console.log("inputPanRange.max = ", inputPanRange.step);
      inputPanRange.value = settings.pan;

      // Map tilt to a slider element.
      inputTiltRange.min = capabilities.tilt.min + 0.00001;
      inputTiltRange.max = capabilities.tilt.max;
      console.log("inputTiltRange.min = ", inputTiltRange.min);
      console.log("inputTiltRange.max = ", inputTiltRange.max);
      inputTiltRange.step = capabilities.tilt.step;
      console.log("inputTiltRange.max = ", inputTiltRange.step);
      inputTiltRange.value = settings.pan;
      inputPanRange.oninput = function(event) {
        console.log(" inputPanRange.value = ", inputPanRange.value);
        track.applyConstraints({
          advanced: [{
            pan: event.target.value
          }]
        });
      }
      inputPanRange.hidden = false;
      inputTiltRange.oninput = function(event) {
        console.log(" inputTiltRange.value = ", inputTiltRange.value);
        track.applyConstraints({
          advanced: [{
            tilt: event.target.value
          }]
        });
      }
      inputTiltRange.hidden = false;

      // Map zoom to a slider element.
      inputZoomRange.min = capabilities.zoom.min + 0.00001;
      inputZoomRange.max = capabilities.zoom.max;
      console.log("inputZoomRange.min = ", inputZoomRange.min);
      console.log("inputZoomRange.max = ", inputZoomRange.max);
      inputZoomRange.step = capabilities.zoom.step;
      console.log("inputZoomRange.max = ", inputZoomRange.step);
      inputZoomRange.value = settings.zoom;
      inputZoomRange.oninput = function(event) {
        console.log(" inputZoomRange.value = ", inputZoomRange.value);
        track.applyConstraints({
          advanced: [{
            zoom: event.target.value
          }]
        });
      }
      inputZoomRange.hidden = false;
    }

    function gotDevices(devices) {
      const select = document.getElementById('videoSource');
      devices.forEach(device => {
        if (device.kind !== 'videoinput') {
          return;
        }
        const option = document.createElement('option');
        option.value = device.deviceId;
        option.text = device.label;
        select.appendChild(option);
      });
      select.disabled = false;
      select.onchange = () => {
        const deviceId = select.value;
        navigator.mediaDevices.getUserMedia({video: {deviceId}})
          .then(gotStream)
          .catch(error => console.log('Argh!', error.name || error));
      }
    }

    function takePhoto() {
      imageCapture.takePhoto().then(blob => {
        console.log('Photo taken: ' + blob.type + ', ' + blob.size + 'B');
        const image = document.querySelector('img');
        image.src = URL.createObjectURL(blob);
      }).catch(err => console.error('takePhoto() failed: ', err));
    }
  </script>
</body>

</html>