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

2021-04-25 18:59:04 阅读：403 来源： 互联网

标签：const 简版在线视频 vr js mxreality VR THREE

实现技术：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){})

标签：const,简版,在线视频,vr,js,mxreality,VR,THREE
来源： https://blog.csdn.net/u013774595/article/details/116135269

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

API