react vr 组件之LiveEnvCamera的使用方法

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。后面再研究