The Web front end can also do AR interaction

 
I. Project experience
 

We can do the AR interaction of webpage based on wechat and hand Q!!

Two, technical implementation
 
2.1 WebRTC — the foundation of WebAR

function getMedia() { 
 if (navigator.getUserMedia) { 
 navigator.getUserMedia({ 
 'video': { 
 'optional': [{ 
 }] 
 }
 }, successFunc, errorFunc); 
 } 
 else { 
 alert('Native device media streaming (getUserMedia) not supported in this browser.'); 
 }
} 
var localStream;
function successFunc(stream) { 
 document.getElementById('video').src = window.URL && window.URL.createObjectURL(stream) || stream;
 localStream = stream; 
} 
function errorFunc(e) { 
 alert('Error！'+e); 
} 
function closeMedia() { 
 localStream.stop();
 document.getElementById('video').src = '';
}Copy the code

(http://blog.csdn.net/journey191/article/details/40744015)

2.2 3D models — WebGL, three.js, 3DMAX
2.3 3D panorama — Three. Js, sphere panorama
Iii. Compatibility
 
3.1 getUserMedia ()

3.2 3D Model &3D Panorama

4. Problems encountered
4.1 getusermedia ()
4.1.1 Front and rear Cameras

var exArray = []; / / storage source ID if the navigator. GetUserMedia {MediaStreamTrack. GetSources (function (sourceInfos) {for (var I = 0; i ! = sourceInfos.length; ++i) { var sourceInfo = sourceInfos[i]; If (sourceinfo.kind === 'video') {exarray.push (sourceinfo.id); // If (sourceinfo.kind === 'video') {exarray.push (sourceinfo.id); } } navigator.getUserMedia({ 'video': { 'optional': [{ 'sourceId': ExArray [1] //0 for front camera, 1 for rear}]}, 'audio':false}, successFunc, errorFunc); }); }Copy the code

4.1.2 Full screen camera

<style> #videoBox{position: absolute; left: 50%; top: 50%; z-index: 1; -webkit-transform: translate(-50%,-50%); -webkit-transform-origin: 50% 50%; } #videoWrap{position: relative; left: 0; top: 0; background: #4CAABE; overflow: hidden; } </style> <div id="videoWrap"> <video autoplay="autoplay" id="videoBox"></video> </div> <script> var videoWrap = document.getElementById('videoWrap'); videoWrap.style.width = window.innerWidth + 'px'; videoWrap.style.height = window.innerHeight + 'px'; </script>Copy the code

4.1.3 The page cannot be clicked for the model

/*** / var v = camera.getWorldDirection(); Var a1 = new THREE.Vector2(a.position.x, a.position.z); var b1 = new THREE.Vector2( v.x, v.z ); dt1 = a1.angle()-b1.angle(); Var a2 = new THREE.Vector2(a.poposition.y, a.poposition.z); var b2 = new THREE.Vector2( v.y, v.z ); dt2 = a2.angle()-b2.angle(); If (Math. Abs (dt1) < 0.1 && math.h abs (dt2) < 0.1) {/ / center! }Copy the code

4.2 3 d view
4.2.1 Orientation of 3D panorama initialized by iOS and Android is inconsistent

var v = camera.getWorldDirection();
var geometry = new THREE.SphereGeometry( 1000, 16, 8 );
 geometry.scale( -1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
 map: new THREE.TextureLoader().load( 'bg.jpg' )
} );
var stage = new THREE.Mesh( geometry, material );
stage.lookAt(new THREE.Vector3( v.x, 0, v.z ));
stage.rotateY((85 * Math.PI)/180);
stage.rotateZ((-4 * Math.PI)/180);
scene.add( stage );Copy the code

4.2.2 Initializing Positioning

if(! hasMoved && typeof(defaultCameraDirection)! ='undefined'){ var v = camera.getWorldDirection(); if( v.x ! = defaultCameraDirection.x || v.y ! = defaultCameraDirection.y || v.z ! = defaultCameraDirection.z ){ hasMoved = true; resetLocationAndRotation(); // initialize}}Copy the code

4.3 Troubleshooting unsupported cases
4.3.1 getUserMedia(), three.js, gyroscope

function getMedia() { if (navigator.getUserMedia) { }, successFunc, errorFunc); } else {// The device does not support getUserMedia}} function errorFunc(e) {alert('Error! '+e); }Copy the code

<script src="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js"></script> <script> if(! Detector. Webgl) {// does not support webgl}else{// supports webGL} </script>Copy the code

Console. error = (function(origin){return function(errorlog) {if(/THREE/.test(errorlog)) {// THREE error}} })(console.error); Console. warn = (function(origin){return function(errorlog) {if(/^ three. WebGLRenderer:$/.test(errorlog)) {// THREE render error  } } })(console.warn);Copy the code

If (window. DeviceOrientationEvent) {/ / support gyroscope} else {/ / not supported gyroscope}Copy the code

4.3.2 Unknown error in iOS8

var agent = navigator.userAgent.toLowerCase() ; var version; if(agent.indexOf("like mac os x") > 0){ //ios var regStr_saf = /os [\d._]*/gi ; var verinfo = agent.match(regStr_saf) ; version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,"."); } var version_str = version+""; if(version_str ! Version_str. length >0){version=version.substring(0,1); If (version>5 && version <9){// iF (version>5 && version <9){Copy the code

Five, the conclusion

Doing research and practice on new technologies can lead to unprecedents, checking API documentation, and solving problems in a curve-saving way (sometimes refactoring/front-end is a tricky job XD). I am very grateful for the strong support from my colleagues on the official account of the game, so that our page can be successfully launched and pushed to players. Watching the data increase slowly, I finally feel that our efforts have not been wasted.

The data on the final page shows that some users’ devices do support pulling up the camera, but may refuse to do so because of security concerns. This is an issue we need to consider in our future work, how to protect user privacy and let users trust us.