react实现VR在线视频播放-简版 mxreality.js

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react实现VR在线视频播放-简版 mxreality.js，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1838字，纯文字阅读大概需要3分钟。

内容图文

实现技术：mxreality.js

文档链接 ：

https://codechina.csdn.net/mirrors/guoguicheng/mxreality.js/-/blob/master/docs/index.md

首先下载 mxreality 包，npm\yarn方式都可以?

yarn add mxreality.js

下载后引入到你定义的VR组件内

import * as THREE from 'mxreality.js/build/three';
import { VR, AVR } from 'mxreality.js/build/mxreality';
import * as Hls from 'mxreality.js/build/hls';

window.THREE = THREE;
window.Hls = Hls;
window.AVR = AVR;

创建DOM渲染容器提供给webGL渲染显示场景

//定义useRef
const container = useRef(null);


//创建容器
<div ref={container}  id={'vrVideo'}/>

定义初始化方法

//传入VR流地址
const initVrVideo = (url) => {

    //初始化3D场景
    const scene = new THREE.Scene()
    const renderer = new THREE.WebGLRenderer()
    container.current.appendChild(renderer.domElement);

    //将场景、容器和渲染器绑定到VR播放器，以及播放器设置视角FOV设置
    vr = new VR(scene, renderer, container.current, { "fov": 120 });
    
    //全景资源加载完成回调
    vr.loadProgressManager.onLoad = () => {

    }
    //全景资源加载中回调
    vr.loadProgressManager.onProgress = () => {
      console.log("onProgress")
    }
    //全景资源加载错误回调
    vr.loadProgressManager.onError = () => {
      console.log("onError")
    }
    vr.init(() => {

    })

    //播放VR
    vr.playPanorama(url, vr.resType.sliceVideo);
    vr.video.setAttribute("autoplay", "true");
}

执行调用

initVrVideo('rtmp:XXXXXXX');

上述为具体实现方式，如果需要其他功能请看api文档链接或下文的部分API

 

API

场景对象

获取当前场景
vr.scene;

获取当前渲染器
vr.renderer;

获取当前容器对象
vr.container;

获取摄像头视频对象
vr.video;
vr.video.pause()/暂停视频
vr.video.play()/播放视频

获取音频对象
vr.audio;
vr.audio.paush()/暂停音频
vr.audio.play()/播放音频

自动旋转

设置播放器镜头自动旋转
vr.controls.autoRotate=true

设置自动旋转速度为1.2
vr.controls.autoRotateSpeed=1.2

陀螺仪

关闭陀螺仪
vr.controls.gyroFreeze()

开启陀螺仪
vr.controls.gyroUnfreeze()

截屏

vr.takeScreenShot(function(screenshotImg){})

 

 

 

 

 

 

内容总结

以上是互联网集市为您收集整理的react实现VR在线视频播放-简版 mxreality.js全部内容，希望文章能够帮你解决react实现VR在线视频播放-简版 mxreality.js所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---