前端VR初体验系列

　　背景
　　年前团队有个任务，需要在前端实现VR 效果，具体是有2个页面需求：
　　1、页面上打开摄像头识别到对应图片后可以加载对应3d模型
　　玩法大家可以理解为：打开活动页面，扫一扫我们的活动图片如猫的图片，就会在页面上加载出我们的3D招财猫模型
　　2、页面上打开摄像头能够进行人脸识别，根据人脸做人物移动
　　玩法大家可以理解为：打开活动页面，会默认启动我们的前置摄像头，人脸控制人物左右移动来躲避掉落的障碍物
　　这2种VR效果，在APP上如抖音，支付宝之类的我们看到的挺多，而由前端来实现的，资料就挺少。
　　好在通过调研，总算找到对应的解决方案，也在这里和大家做系列文章分享。
　　解决方案简单介绍
　　先简单说下为了实现VR效果，大致的技术方案，如下：
　　对于每个步骤，前端这块有什么解决方案也想问问大家？
　　获取视频流用什么方法呢？
　　像素点分析可以用什么方法呢？
　　加载和操作3D模型可以用什么方法呢？
　　可以先思考下几分钟？
　　3.....
　　2.....
　　1.....
　　辛苦大家思考了3个问题，这边也揭晓下我们的解决方案。 获取视频流用什么方法呢？
　　揭晓：getUserMedia方法
　　简单代码如下： // 想要获取一个最接近 1280x720 的相机分辨率 var constraints = { audio: true, video: { width: 1280, height: 720 } };  navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) {   var video = document.querySelector(＂#video＂);   video.srcObject = mediaStream;   video.onloadedmetadata = function(e) {     video.play();   }; }) .catch(function(err) { console.log(err.name + ＂: ＂ + err.message); }); // 总是在最后检查错误
　　大家可以参考API： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 像素点分析可以用什么方法呢？
　　揭晓：canvas的getImageData方法
　　canvas是HTML提供的画布元素，在H5活动页上，用的多的就是toDataUrl方案，来生成图片的base64数据，我们经常配合html2Canvas处理长按保存图片。
　　而getImageData方法，可以用来获取canvas每个像素点的元素，进而在更小的粒度做分析。 /** ** 先通过drawImage把第一步获取到底的视频流绘制到canvas **/ var video=document.getElementById(＂video＂); var canvas=document.getElementById(＂canvas＂); var ctx=canvas.getContext(＂2d＂); var _drawInterval=null; video.addEventListener(＂play＂,function() {      _drawInterval=window.setInterval(function() {     ctx.drawImage(v,0,0,270,135);     console.log(ctx.getImageData())   },20);                                           },false); video.addEventListener(＂pause＂,function() {window.clearInterval(_drawInterval);},false);
　　大家可以参考API： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas 加载和操作3D模型可以用什么方法呢？
　　揭晓：canvas的webgl
　　canvas除了用2D的画布，还支持3D的渲染，这里我们大家经常听到的就是threejs，可以配合模型文件如：fbx,obj,gltf等做3d模型渲染，如下
　　大家可以参考API： https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
　　关于关键的技术方案，本篇先和大家做了实现思路的简单分享，在这方案中也暴露2个问题： 大家可以看到在像素点的分析是最麻烦的，需要自己去解析ImageData,还需要配合算法的知识 而用threejs来做3d渲染，学习成本也很高，一个简单的三角形绘制也需要一大段代码。
　　如何降低这2点呢？
　　这里推荐2款开源JS库，也是我们在这次活动中用到的解决方案 3d渲染的是用aframe.js 识别的用mindAr.js
　　下一篇文章再详细介绍下这2个js库的具体应用。