web technology sharing | WebRTC controls camera pan, tilt and zoom

MediaDevices.getUserMedia()The user will be prompted for permission to use the media input, which will generate a MediaStreamtrack containing the requested media type. This stream can contain a video track (from hardware or virtual video sources, such as cameras, video capture devices, screen sharing services, etc.), an audio track (also from hardware or virtual audio sources, such as microphones, A/D converters, etc. etc.), and possibly other track types.

It returns a object, which calls back a object Promiseon success . If the user denies the permission, or the required media source is not available, an or will be called back .resolveMediaStreampromiserejectPermissionDeniedErrorNotFoundError

parameter

constraints

The constraints parameter is an object containing videoand audiotwo members MediaStreamConstraints, which are used to describe the requested media type. At least one type or both must be specified. If the browser cannot find the specified media type or cannot meet the corresponding parameter requirements, then the returned Promise object will be in the rejected [failed] state, NotFoundErroras the parameter of the rejected [failed] callback.

const constraints = {
    video: {
        pan: true, 
        tilt: true, 
        zoom: true
    }
};

async function init(e) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
        e.target.disabled = true;
    } catch (e) {
        handleError(e);
    }
};

document.querySelector('#showVideo').addEventListener('click', e => init(e));

getVideoTracks()The method returns a sequence of objects representing the video tracks in this stream MediaStream.MediaStreamTrack
- An array MediaStreamTrackof objects, one for each video track contained in the media stream. Video tracks are those kindwhose properties are video. This array is empty if the stream contains no video tracks.
getCapabilitiesThe method returns a MediaTrackCapabilitiesobject that represents the value or range of each adjustable property, which depends on the platform and user agent.
getSettings()The method returns a MediaTrackSettingsobject containing the current value of each constrainable property of current MediaStreamTrack.
applyConstraints()method applies a set of constraints to a track; these constraints let a website or application establish ideal values and acceptable value ranges for a track's constrainable properties (such as frame rate, size, echo cancellation, etc.).

function handleSuccess(stream) {
      const video = document.querySelector('video');
      const videoTracks = stream.getVideoTracks();
      video.srcObject = stream;

      const capabilities = videoTracks[0].getCapabilities();
      const settings = videoTracks[0].getSettings();
      for (const ptz of ['pan', 'tilt', 'zoom']) {
        if (!(ptz in settings)) {
          continue;
        }
        const input = document.querySelector(`input[name=${ptz}]`);
        input.min = capabilities[ptz].min;
        input.max = capabilities[ptz].max;
        input.step = capabilities[ptz].step;
        input.value = settings[ptz];
        input.disabled = false;
        input.oninput = async event => {
              try {
                const constraints = {advanced: [{[ptz]: input.value}]};
                await videoTracks[0].applyConstraints(constraints);
              } catch (err) {
                console.error('applyConstraints() failed: ', err);
              }
        };
      }
}

function handleError(error) {
  console.log(`getUserMedia error: ${error.name}`, error);
}

<style>
    div.label {
        display: inline-block;
        font-weight: 400;
        margin: 0 0.5em 0 0;
        width: 3.5em;
    }
    video {
        background: #222;
        margin: 0 0 20px 0;
        width: 500px;
        height: 400px;
    }
</style> 
        
<body>
    <video id="gum-local" autoplay playsinline></video>
    <button id="showVideo">Open camera</button>

    <div>
        <div class="label">Pan:</div>
        <input name="pan" type="range" disabled>
    </div>
    <div>
        <div class="label">Tilt:</div>
        <input name="tilt" type="range" disabled>
    </div>
    <div>
        <div class="label">Zoom:</div>
        <input name="zoom" type="range" disabled>
    </div>
</body>

Effect demonstration

Untitled-Copy(2).gif

insert image description here