// 调取摄像头(相机拍照)
moveToCameraAVG() {
var self = this;
if (navigator.mediaDevices === undefined) { //浏览器兼容
navigator.mediaDevices = {};
// 老的浏览器可能根本没有实现 mediaDevices,所以我们可以先设置一个空的对象
}
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) { // 首先,如果有getUserMedia的话,就获得它
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则,为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
//前置摄像头调用后,摄像功能需要关闭后才能正常执行第二次调用,否则会报错:设备被占用。解决方法,在每次执行调用方法前,先关闭摄像设备
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
var constraints = window.constraints = {
audio: false,
video: {
sourceId: 'default',
facingMode: { exact: "user" }
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
var video = document.querySelector('video');
try {
window.stream = stream;
video.srcObject = stream; // 旧的浏览器可能没有srcObject
} catch (error) {
video.src = window.URL.createObjectURL(stream); // 防止在新的浏览器里使用它,应为它已经不再支持了
}
self.localMediaStream = stream;
video.play();
})
.catch(function (err) {
console.log(err.name + ": " + err.message); // 总是在最后检查错误
});
}
// 关闭摄像设备
closeStream(){
// console.log(window.stream.getTracks())
window.stream.getTracks().forEach(track => {
track.stop();
});
}
浏览器开启麦克风和摄像头权限:https://blog.csdn.net/rongxiang111/article/details/81335946