H5：获取手机媒体设备权限，如麦克风、视频等

简介

H5开发中，有的项目需要获取手机设备权限，如麦克风、视频。

具体实现

created() {
     
  if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
     
  this.getUserMedia({
      video: true, audio: true }); // 调用用户媒体设备，访问摄像头、录音
} else {
     
  console.log("你的浏览器不支持访问用户媒体设备");
}
},
method: {
     
  getUserMedia(constrains) {
     
      let that = this;
      if (navigator.mediaDevices.getUserMedia) {
     
        // 最新标准API
        navigator.mediaDevices.getUserMedia(constrains).then(stream => {
      that.success(stream); }).catch(err => {
      that.error(err); });
      } else if (navigator.webkitGetUserMedia) {
     
        // webkit内核浏览器
        navigator.webkitGetUserMedia(constrains).then(stream => {
      that.success(stream); }).catch(err => {
      that.error(err); });
      } else if (navigator.mozGetUserMedia) {
     
        // Firefox浏览器
        navigator.mozGetUserMedia(constrains).then(stream => {
      that.success(stream); }).catch(err => {
      that.error(err); });
      } else if (navigator.getUserMedia) {
     
        // 旧版API
        navigator.getUserMedia(constrains).then(stream => {
      that.success(stream); }).catch(err => {
      that.error(err); });
      }
    },
    // 成功的回调函数
    success(stream) {
     
      console.log("已点击允许,开启成功");
    },
    // 异常的回调函数
    error(error) {
     
      console.log("访问用户媒体设备失败：", error.name, error.message);
    }
}

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！