在浏览器调取摄像头(H5页面)


// 调取摄像头(相机拍照)

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容