H5获取手机媒体设备权限（麦克风和相机）

最新推荐文章于 2025-04-10 22:55:08 发布

小只笨笨狗～

最新推荐文章于 2025-04-10 22:55:08 发布

阅读量6.8k

点赞数 1

分类专栏：浏览器原生文章标签：媒体

本文链接：https://blog.csdn.net/qq_51196135/article/details/126988773

版权

浏览器原生专栏收录该内容

3 篇文章

订阅专栏

methods:{

    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("已点击允许,开启成功");
      alert('已点击允许,开启成功')
    },
    // 异常的回调函数
    error(error) {
      console.log("访问用户媒体设备失败：", error.name, error.message);
      alert(`访问用户媒体设备失败,${error.name, error.message}`)
    }

//调用
 created() {
  if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  this.getUserMedia({ video: true, audio: true }); // 调用用户媒体设备，访问摄像头、录音
} else {
  console.log("你的浏览器不支持访问用户媒体设备");
}
},

}

效果图：