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 |
| /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 |