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

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传上来，下载地址：

点击打开链接

AR.js摄像头前置的问题（已解决）（H5调用摄像头）相关推荐

已解决Python调用免费申请的百度图形识别接口案例
已解决Python调用免费申请的百度图形识别接口{'error_code': 18, 'error_msg': 'Open api qps request limit reached'} 文章目录报 ...
Atititjs h5调用摄像头视频聊天拍照功能相机功能录像attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码
一.场景手机移动端-原生js 浏览器h5 解决识别二维码条形码功能: 不借助Hbuilder.需要自己打包成APP,比如用Hbuilder打包,浏览器端项目h5 无打包成app部署 X 不采用 ...
h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客,后期不断更新优质博文,谢谢项目中需要用到调用摄像头拍照并上传照片到后台,特此记录:如有不足,望广大同行们批评指出. 1,前端页面 visitor/touch/touchIndex/li ...
h5调用摄像头之webRTC
今天研究了一下web页面打开摄像头的方法,踩了好多坑之后记录一下,以免以后重复踩坑参考https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDe ...
课程设计python调用摄像头_教你如何利用python调用摄像头
导读这篇文章主要介绍了python调用摄像头的示例代码,帮助大家更好的理解和使用python,感兴趣的朋友可以了解下一.打开摄像头 import cv2 import numpy as np de ...
获取摄像头和麦克风权限_APP在偷偷调用摄像头、麦克风？你有权知道谁在这么做...
原标题:APP在偷偷调用摄像头.麦克风?你有权知道谁在这么做当前,一些APP存在过度索取相机.照片.通讯录等敏感信息获取权限的问题,在生活中常常遇到.这些APP在你不知道的情况下在后台擅自调用敏感权 ...
python调用手机摄像头_教你如何利用python调用摄像头
这篇文章主要介绍了python调用摄像头的示例代码,帮助大家更好的理解和使用python,感兴趣的朋友可以了解下一.打开摄像头 import cv2 import numpy as np def v ...
html5调用摄像头录制视频,HTML5——利用navigator+Video调用摄像头进行录像
以前无聊的时候玩儿过HTML5,感觉里面的很多新标签确实深深震撼了我额.... 今天需求那边要做这样一个功能,在微信里面调用摄像头进行拍摄,然后上传.刚开始最先想到的是Video标签,只要将它的src ...
【已解决】联想电脑摄像头无法使用
问题描述设备:联想拯救者R7000 摄像头显示如下图尝试过网上的命令行以及设备管理器等操作,还是不如下面的操作有效解决方法下载联想电脑管家管网安装后点击电源键并点击摄像头

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

AR.js摄像头前置的问题（已解决）

AR.js摄像头前置的问题（已解决）（H5调用摄像头）相关推荐

最新文章

热门文章