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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • react vr中文网:www.vr-react.com react vr qq群:481244084 示例源码 ...
    liu_520阅读 3,933评论 4 6
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,063评论 25 709
  • react vr中文网:www.vr-react.com qq群:481244084 开发者头条:react vr...
    liu_520阅读 2,220评论 0 2
  • 今天打卡材料分享的是习惯、意志力、记录。 1.习惯很重要 有人说习惯决定性格,性格决定命运。一个成功的人离不开良好...
    一米Sunny阅读 179评论 0 0
  • 最近投入地做大礼拜,每次以108个作为目标数。 以前,总是想着完成任务。 最近,对身体训练的领悟不同。开始欣赏那些...
    湄女阅读 551评论 0 0

友情链接更多精彩内容