AR.js摄像头前置的问题(已解决)
终于放假了,开始搬砖。很多开发者对AR.js摄像头前置的这个问题比较苦恼,网上也有很多解决办法,但是有些过时。接下来,我们来一起解决这个问题。先看一下效果。(PS:下面的QQ摄像头图,标注反了)
不久前,我看一片关于WebAR的文章,很棒,很基础,可以先看一看,对我后面的陈述,你也需更加明白。
接下来,上重点。现在手机大部分都是前后双摄,做AR的话,肯定是要后置摄像头的啦,但是AR.js在谷歌浏览器中,会打开后置,而现在QQ或者微信中则会打开前置摄像头。现在让我们开看看我们如何控制使用控制使用手机的前后摄像头。
navigator.mediaDevices.enumerateDevices().then(function (devices) {
var camreass=[];
devices.forEach(function(e){
console.log(e)
if(e.kind=="videoinput")
{
camreass.push(e.deviceId)
}
})
console.log(camreass)
var userMediaConstraints = {
audio: false,
video: {
facingMode: 'environment',
deviceId:camreass[1],
width: {
ideal: _this.parameters.sourceWidth,
// min: 1024,
// max: 1920
},
height: {
ideal: _this.parameters.sourceHeight,
// min: 776,
// max: 1080
}
}
}
这段代码位于AR.js的源码的55954行之后,是我修改之后的。
那么是怎么解决的这个问题的呢,其实很简答,就是指定了deviceId(设备编号)。
代码第一行其实会获取到手机上的多媒体设备,包括音频输入输出和视频输入输出等,具体情况要根据手机设备而定。
我们的主要目的是获取手机后摄像头,那么我们需要把手机的视频输入设备的ID存起来,然后在进行指定即可。
我的手机是双摄,所以会有了两个视频输入设备,也就是对应两个设备编号,而第2个设备编号就是我手机的后置摄像头的设备编号。到现在为止,已经可以解决摄像头的问题。下面我想说说,我是如何解决这个问题的。
1.首先我是看了上面的那篇文章,获得到了一些提示,就是要指定手机的视频输入设备编号,也就是指定摄像头的前后。
2.照着那篇文章试了一试,搞不出来,一堆的Bug。
3.然后我想查阅API吧,看到上面文章里面的用的很多API(大多在获取摄像头这里)已经过时,然后看到它的新API。API里面并没有说明如何指定设备编号,于是我打印了devices,看到设备里面有这样的一个属性deviceId,问题就在里,然后我又查阅官方文档看到一些信息,随后我指定userMediaConstraints 中video的devicedId,然后测试几番就ok拉。
最后我把修改后的AR.js传上来,下载地址: