简介
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);
}
}
最后
觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!