AR.js特性介绍
非常快：即使在旧手机上它也能高效运行
基于Web：这是一个纯Web解决方案，因此无需安装。 完整的javascript基于three.js + jsartoolkit5
开源：它是完全开源的，免费
标准：适用于任何带有webGL和webRTC的手机
AR.js主要基于两个开源项目：three.js和jsartoolkit5，3D场景加载、演示部分是使用three.js实现，Marker追踪识别则是由jsartoolkit5实现。
AR.js入门示例
|
|
| 官方的例子 |
| https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html
|
| 本地demo |
| https://192.168.31.153:9092/G/FileServer/OpenProject/javascript/AR.js /AR.js-1.6.0/data/images/HIRO.jpg /AR.js-1.6.0/three.js/examples/mobile-performance.html
|
|
|
|
|
效果图
填坑部分
B1.部分浏览器打开的是前置摄像头
关键Log:
|
|
解决方案：
|
|
|
|
| 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 } } }
Ref: https://blog.csdn.net/weixin_37683659/article/details/80954789 |