react vr中文网：www.vr-react.com
qq群：481244084
源码 github：https://github.com/LiuC520/ReactVR/
今天来讲下react vr的一个组件的使用：LiveEnvCamera
这是一个新的组件，相信大多数人都不会用，而且在谷歌浏览器上还会报错，ConstraintNotSatisfiedError这个错；下面就此组件讲解下
官方给的解释就一句话：
展示环境的相机，默认是以绝对定位展示的，并且显示在距离你1000m的位置上。
其实简单理解就是在背景上加上环境，就跟现在手机上的AR一样，摄像头显示外部环境，你的AR东东显示在摄像机上，其他的没了；
下面我们来看下原生的源码：
找到react-vr-web ---> js --> Views --> LiveEnvCamera
1、RCTLiveEnvCamera首先是拿到浏览器的媒体：摄像机和麦克风 navigator.getUserMedia
但是这个方法将要废弃了，在老的浏览器上还有用，未来说不定就不用了，新的方法是在mediaDevices上拿到这个东东，
所以我们改造下源码：
navigator.getUserMedia=
navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia;
2、navigator.getUserMedia的第一个参数是约束参数，第二个参数是成功的回调，第三个是失败的回调，
在谷歌浏览器上就出在第一个约束参数上，需要修改下约束条件：
大家可以根据：https://www.w3.org/TR/mediacapture-streams/来修改
最简单的就是把video后面的东东改成true：video : true
如果要修改其他的东东，可以改成下面的：
其他的我们不用改了，但是这样的话就会在屏幕上显示一个视频啦;
原来react vr上的是：video: {facingMode: {exact: 'environment'}},
这句话的意思是选用后置摄像头：
如果用前置摄像头：video: {facingMode: {exact: 'user'}},
3、这个组件是可以有子组件的，如果没有子组件，整个界面就是一个实时的摄像机，如果有子组件就会是下面的样子，一定要在子组件最外层套上一个View，还要给View一个位置，要不然你会看不到哦。
带有子组件的LiveEnvCamera
代码如下：
LiveEnvCamera代码
4、如果我想实现下面这样子怎么办？
需要修改RCTLiveEnvCamera的源码，把渲染的球形半径改下就可以了：
constSPHERE_RADIUS=1000;原来是1000，我改成了500，
但是有个坑，把代码上传到服务器会提示权限拒绝，貌似需要网站支持https。后面再研究
网友评论