前端VR初体验系列

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