H5调用媒体设备的方法

H5中获取摄像头或者音频的方法,由于版本的不同,低版本的浏览器navigator.mediaDevices是不可获得的,所以采用这种写法。

var commomUserMedia = function(constraints) {
  var getUserMedia = (
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia
  );
  if(!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
  }
  return new Promise(function(resolve, reject) {
     getUserMedia.call(navigator, constraints, resolve, reject);
  });    
}
if(navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
}
if(navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = commomUserMedia;
}
var constraints = { audio: true, video: { width: 1280, height: 720 } };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(stream);
      video.onloadedmetadata = function(e) {
      video.play();
  };
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

 

posted @ 2017-08-09 16:01  MarkBell  阅读(643)  评论(0)    收藏  举报