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("你的浏览器不支持访问用户媒体设备");
}
},
}
效果图: