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

实现技术：mxreality.js  支持视频编码:h264,h265；支持直播流：hls

文档链接 ：

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){})