MediaDevices. GetUserMedia () will prompt the user for permission to use the media input media input will produce a MediaStream, containing the request of the orbit of media types. This stream can contain A video track (from hardware or virtual video sources, such as cameras, video capture devices, screen sharing services, and so on), an audio track (also from hardware or virtual audio sources, such as microphones, A/D converters, and so on), or some other track type.

It returns a Promise object, and on success resolve calls back a MediaStream object. If the user denies permission, or if the desired media source is not available, Promise calls back a PermissionDeniedError or NotFoundError.

parameter

  • constraints

    The constraints parameter is a MediaStreamConstraints object that contains both video and audio members and is used to specify the media type of the request. At least one or both types must be specified simultaneously. If the browser cannot find the specified media type or fails to meet the parameters, the returned Promise object is in the Rejected state, with NotFoundError as the parameter to the Rejected 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));Copy the code

  • The getVideoTracks() method returns a sequence of objects representing the MediaStream of the video track in this stream. MediaStreamTrack

    • A set ofMediaStreamTrackObject, one for each video track contained in a media stream. The video track is thosekindThe orbital of property phivideo. If the stream does not contain a video track, the array is empty.

  • The getCapabilities method returns a MediaTrackCapabilities object that represents the value or range of each adjustable property, depending on the platform and user Agent.

  • The getSettings() method returns a MediaTrackSettings object that contains the current value of MediaStreamTrack for each constrainable property of current.

  • The applyConstraints() method applies a set of constraints to the track; These constraints let the web site or application establish desirable and acceptable value ranges for the constrainable properties of the track, such as frame rate, size, echo cancellation, and so on.

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);
}
Copy the code
<style> div.label { display: inline-block; font-weight: 400; Margin: 0 0.5em 0 0; Width: 3.5 em. } 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>Copy the code

Results demonstrate