JS:浏览器中获取用户手机设备权限,如语音、相机等

简介

H5网页项目中有需要拍照、录音、视频等会需要获取手机设备权限。

具体实现

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

最后

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

发布了16 篇原创文章 · 获赞 5 · 访问量 594
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览