AR.js摄像头前置的问题(已解决)(H5调用摄像头)

                                          AR.js摄像头前置的问题(已解决)

        终于放假了,开始搬砖。很多开发者对AR.js摄像头前置的这个问题比较苦恼,网上也有很多解决办法,但是有些过时。接下来,我们来一起解决这个问题。先看一下效果。(PS:下面的QQ摄像头图,标注反了)

AR.js摄像头前置的问题(已解决)(H5调用摄像头)_第1张图片

         不久前,我看一片关于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传上来,下载地址:

        点击打开链接

        

你可能感兴趣的:(WebAR)