The MediaStreaminterface represents a stream of media content. A stream consists of several tracks such as video or audio tracks. Each track is specified as an instance of MediaStreamTrack.You can obtain a MediaStream object either by using the constructor or by calling MediaDevices.getUserMedia().

// Put variables in global scope to make them available to the browser console.
var constraints = window.constraints = {
  audio: false,
  video: true
};

function handleSuccess(stream) {
  var tracks = stream.getTracks();
  var audioTracks = stream.getAudioTracks();
  var videoTracks = stream.getVideoTracks();
  console.log('Got stream with constraints:', constraints);
  console.log('Using audio device: ' + audioTracks[0].label);
  console.log('Using video device: ' + videoTracks[0].label);
  stream.oninactive = function() {
    console.log('Stream inactive');
  };
  window.stream = stream; // make variable available to browser console
  video.srcObject = stream;
}

function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
        constraints.video.width.exact + ' px is not supported by your device.');
  } else if (error.name === 'PermissionDeniedError') {
    errorMsg('Permissions have not been granted to use your camera and ' +
      'microphone, you need to allow the page access to your devices in ' +
      'order for the demo to work.');
  }
  errorMsg('getUserMedia error: ' + error.name, error);
}

function errorMsg(msg, error) {
  errorElement.innerHTML += '<p>' + msg + '</p>';
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess).catch(handleError);

用法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* get a MediaStream object */
  /* use the stream */
})
.catch(function(err) {
  /* handle the error */
  console.log(err.name + ": " + err.message);
});

语法

var promise = navigator.mediaDevices.getUserMedia(constraints);

MediaStream

Properties

MediaStream.active(ReadOnly)
A Boolean value that returns true if the MediaStream is active, or false otherwise.
MediaStream.id(ReadOnly)
A DOMString containing 36 characters denoting a universally unique identifier (UUID) for the object.

Methods

MediaStream.addTrack()
Stores a copy of the MediaStreamTrack given as argument. If the track has already been added to the MediaStream object, nothing happens.
MediaStream.clone()
Returns a clone of the MediaStream object. The clone will, however, have a unique value for id.

视频截取

  // video is <video> js object
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').
  drawImage(video, 0, 0, canvas.width, canvas.height);

选择清晰度

var qvgaConstraints = {
  video: {width: {exact: 320}, height: {exact: 240}}
};

var vgaConstraints = {
  video: {width: {exact: 640}, height: {exact: 480}}
};

var hdConstraints = {
  video: {width: {exact: 1280}, height: {exact: 720}}
};

var fullHdConstraints = {
  video: {width: {exact: 1920}, height: {exact: 1080}}
};

var fourKConstraints = {
    video: {width: {exact: 4096}, height: {exact: 2160}}
};

获取Track