react vr 视频(video)源码解析

最新推荐文章于 2024-08-26 08:47:44 发布

我是刘成

最新推荐文章于 2024-08-26 08:47:44 发布

阅读量9.1w

点赞数 3

分类专栏： react vr 文章标签： react vr react vr 视频 react vr源码

本文链接：https://blog.csdn.net/liu__520/article/details/76618758

版权

react vr 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

react vr中文网：www.vr-react.com

开发者头条：react vr 消息传递原理解析

因为react vr的视频组件Video组件在手机上播放视频会全屏，所以前面我写了篇文章解决此事：解决react vr视频在微信和浏览器上全屏的问题；

这里我再介绍下video的源码，希望能帮助到您，此篇文章较长，建议对着源码和本篇文章来阅读，否则会晕晕乎乎的哦，就像蜘蛛网一样的，首先看下下图：

react vr 视频(video)源码解析

图片较大，如果查看原图，可以下载：http://www.vr-react.com/images/Video.png,

其中用到的几个文件如下：

video：react-vr ---> Libraries ---> Video --->Video.js

MediaPlayerState：react-vr ---> Libraries ---> Video --->MediaPlayerState

RCTVideo：react-vr-web ---> js ---> Views ---> Video

RCTVideoPlayer： react-vr-web ---> js ---> Utils ---> RCTVideoPlayer

RCTVideoModule：react-vr-web ---> js --->Modules ---> RCTVideoModule

MediaEvent：react-vr-web ---> js --->Events ---> MediaEvent

VRVideoComponent：react-vr ---> Libraries ---> Video --->VRVideoComponent

BasicVideoPlayer：react-vr ---> Libraries ---> Video --->BasicVideoPlayer

其他的几个引用文件在此就忽略啦，比如RCTBindedResource资源绑定文件、ReactNativeContext RN的上下文对象、EventEmitter事件发送、OVRUI.UIView等等，后面抽空再给大家讲解了。

进入正题：

下面就这几个文件进行简单的讲解，

一、Video

1.1、video是一个react 组件，首先创建一个React的class，包含一堆属性和方法：http://www.vr-react.com/Video.html，

如下图：

video属性和方法

1.2、componentWillMount订阅监听播放状态（play、pause、seekTo、registerUserGesture、unregisterUserGesture、volumeChange、mutedChange）

这些状态会通过UIMannager发送指令到原生那边的Video组件（在react-vr-web里面）中，如下图：

发送播放暂停指令

1.3、调用requireNativeComponent，把这个组件创建成一个React Native组件。

1.4、这个组件在UIManager的Video视图中，传下去两个参数，一个是ReactNativeContext，这是RN的上下文对象，一个是GuiSys，这个是在ovrui内部，是管理Object3D、字体、不透明度等等的一个UI工具。

下一步就到RCTVideo中了

二、RCTVideo

先来看下图：

RCTVideo

2.1、它继承了BaseView，构造函数中有下面几个成员：

2.1.1、实例化OVRUI的UIView的view

2.1.2、_localResource：绑定资源文件

2.1.3、_rnctx：RN的上下文对象从UIManager的video实例化传过来的参数

2.1.4、player是实例化的RCTVideoPlayer（../Utils/RCTVideoPlayer），传进去两个参数，一个是上下文对象，一个是view的uuid，因为view都是OVRUI的uiview都是一个object3d对象，都有一个唯一的uuid

重写了player两个方法，一个是onUpdateTexture，一个是onEmitEvent，后者是调用RN上下文的接受通知的事件，前者是回调函数，传入的是资源，资源有内部有uri，指向视频对象，然后更新图像纹理

2.1.5、_videoModule就是调用上下文中的rnctx.VideoModule，也就是在rnctx中实例化的RCTVideoModule模块

2.1.6、定义一些属性（source、poster、playControl、autoPlay、loop、muted、volume、tintColor）

2.2、dispose释放资源文件，释放player

2.3、接受指令receiveCommand，有三个指令，一个是COMMAND_SEEK_TO、寻找播放点，一个是播放指令，一个是暂停指令，接收到指令分别调用player的对应的方法

2.4、有一个静态的describe方法，包含baseview的（onLayout、onEnter、onExit、onInput、onChange、onHeadPose、onChangeCaptured、onInputCaptured、onHeadPoseCaptured、onHeadPoseCaptured，自己的NativeProps（autoPlay、loop、muted、playControl、volume、source、poster）和四个Commands指令值（setImmediateOnTouchEnd这个是baseview的指令、seekTo、play、pause）

其中最主要的就是实例化的RCTVideoPlayer和RCTVideoModule，下面就到了。

三、RCTVideoPlayer

RCTVideoPlayer

内部包含以下几个属性和方法：

3.1、rnctx = ReactNativeContext RN的上下文对象

3.2、_videoModule = rnctx.VideoModule，这个是Modules/RCTVideoModule的实例化：后面再讲这个模块

3.3、_tag就是上面闯过来的view的uuid全局唯一标识

3.4、_counter = 0；

3.5、_handle 句柄

3.7、_source 资源文件信息，包含视频格式、视频路径等

3.8、_poster 视频暂停播放或者缓冲时的占位符

3.9、_playControl 播放控制

3.10、_autoPlay 自动播放

3.11、_loop 循环播放

3.12、_muted 是否静音

3.13、_volume 音量

3.14、onUpdateTexture

3.15、onEmitEvent 发送事件

3.16、_onCanPlay 能否播放

3.17、_onPlaying 播放中的事件

3.18、_onPause 暂停播放事件

3.19、_onEnded 结束播放事件

3.20、_onError 错误播放事件

3.21、_onDurationChange

3.22、_onTimeUpdate

3.23、RCTVideoPlayer.prototype的原型中定义了几个方法：

3.23.1、 setSource：

首先用_chooseSupportSource筛选出支持的视频格式，

然后定义上一个视频的url（prevUrl）

再定义当前的视频url（curUrl）

如果两个url不一样，刚开始preurl是null的，播放完成了就可以切换视频的source，如果当前的视频url（cururl）为空，定义一个prevHandle=this._handle，

this._handle = null;

如果 prevHandle存在，就更新纹理（_updateTexture），然后调用_videoModule的卸载prevHandle，视频的状态设置为关闭状态（this._updatePlayStatus('closed');）

如果当前的curUrl存在，同样设置prevHandle=this._handle，

this._counter += 1;

this._handle = [curUrl, this._tag, this._counter].join('-');定义一个handle标识

然后调用_videoModule的addHandle、setUrl、setFormat、如果有元数据设置元数据setMetaData、_addMediaEventListener(监听canplay、playing、pause、ended、error、durationchange、timeupdate)

然后调用_videoModule的加载load(this._handle);

如果原来的prevHandle存在，就卸载（this._videoModule.unload(prevHandle)）

更新播放状态为加载中( this._updatePlayStatus('loading');)

如果_poster存在，更新_poster纹理；

最后_updateVideoStates更新视频状态，其实就是设置静音、设置音量

给source添加一个uri标识符，然后调用onUpdateTexture，这个方式Video传下来的

3.23.2、 setPoster(url): 如果当前的播放状态是loading，调用_updateTextureWithPoster ---> onUpdateTexture(这个方法是上面的video传下来的)

3.23.3、 play: 如果_handle存在，调用_videoModule的播放功能

3.23.4、 pause: 如果_handle存在，调用_videoModule的暂停功能

3.23.5、 seekTo: 设置新的播放起点，进度条拖拽用的

3.23.6、 setPlayControl: 如果_handle存在，看输入的播放控制如果是pause，就调用_videoModule的暂停功能，如果是play就调用_videoModule的播放功能

3.23.7、 setAutoPlay 设置自动播放

3.23.8、 setLoop 设置循环播放

3.23.9、 setMuted 如果_handle存在，就设置静音，this._videoModule.setMuted(this._handle, this._muted);

3.23.10、 setVolume 检查输入的音量是否是数字，如果不是就是1.如果_handle存在，就设置音量，this._videoModule.setVolume(this._handle, this._volume);

3.23.11、 dispose,如果_handle存在，释放这个句柄，this._videoModule.unload(this._handle);

四、RCTVideoModule

RCTVideoModule

这是个模块，继承了Module

4.1、构造函数中有下面几个成员，supportedFormats支持的视频格式、_videoDefs(src、format、metaData)、_players是Video/VRVideoComponent实例、_rnctx上下文对象、_mediaEventCallbacks事件回调

同样有下面的几个方法：

4.2、addHandle(handle)

实例化播放器对象 const player = new VRVideoComponent(); 并设置给this._players[handle]，

初始化事件回调对象 this._mediaEventCallbacks[handle] = {};

初始化播放器的onMediaEvent事件：

4.3、 _onMediaEvent(handle: string, event: Object)，这里面主要是处理监听事件的功能、一个是发送到react的，一个是发送到native的，接受事件啥的都要经过这儿。

4.4、 _addMediaEventListener监听事件，上面RCTVideoPlayer调用的，意思就是把监听的方法都放到 this._mediaEventCallbacks[handle][eventType]本模块的事件回调里面统一管理

4.5、移除某个监听 this._mediaEventCallbacks[handle][eventType]

4.6、 setUrl 设置视频地址：this._videoDefs[handle].src = url;

4.7、 setFormat 设置视频格式：this._videoDefs[handle].format = format;

4.8、 setMetaData 设置视频的预算内数据 this._videoDefs[handle].metaData = metaData;

4.9、 getVideoTexture 拿到当前视频的纹理，this._players[handle].videoTextures[0];

4.10、load 设置视频，把上面的url、format、metaData设置进去 this._players[handle].setVideo(this._videoDefs[handle]);

同时把资源加载到 mono 纹理中，this._rnctx.RCTResourceManager.addResource('MonoTexture', handle, monoTextureInfo);

4.11、 play this._players[handle].videoPlayer.play(); 其实调用的是VRVideoPlayer的getVideoPlayer(this.videoDef)，最后调用的是BasicVideoPlayer，最后调用的html的video标签的方法

4.12、 pause this._players[handle].videoPlayer.pause();

4.13、 seekTo this._players[handle].videoPlayer.seekTo(position);

4.14、 setMuted this._players[handle].videoPlayer.setMuted(muted);

4.15、 setVolume this._players[handle].videoPlayer.setVolume(volume);

4.16、 unload 移除mono纹理资源、释放播放器资源、删除播放器、删除_videoDefs的视频资源、删除回调事件_mediaEventCallbacks

4.17、 frame 调用播放器的 frame() 方法；

五、MediaEvent

MediaEvent

这里面只有一个构造函数，有三个成员，一个是type、一个是timeStamp(时间戳)、一个是target里面的currentTime(当前播放时间)、duration(持续时间)、ended(是否播放完毕)、error(错误)

他们的值只不过是提取了event.target的一部分

六、VRVideoComponent

VRVideoComponent

6.1、构造函数中有这么几个成员：videoPlayer(null))、videoTextures([])、onMediaEvent、_onMediaEvent

6.2、 setVideo 设置视频资源：

_freeVideoPlayer：释放播放器，如果播放器存在就释放掉(dispose),然后设置为null

_freeTexture：释放纹理，遍历videoTextures里面的成员，然后逐个释放dispose,然后把、videoTextures设置为[]

_setVideoDef: 设置视频，把上面的url、format、metaData设置进去

videoPlayer：实例化播放器，通过new 一个 VRVideoPlayer.getVideoPlayer(this.videoDef)，上面就是继承了BasicVideoPlayer类，默认返回一个BasicVideoPlayer，默认的播放器，下面再讲这个东东

绑定onMediaEvent，

新建threejs纹理，const texture = new THREE.Texture(this.videoPlayer.videoElement); 设置给 this.videoTextures[0] = texture

然后初始化视频，调用this.videoPlayer.initializeVideo(videoDef.src, videoDef.metaData)

6.3、 frame 如果播放器存在，而且有足够的数据hasEnoughData（这个判断video标签存在，而且this.videoElement.readyState === this.videoElement.HAVE_ENOUGH_DATA），就遍历videoTextures，并且刷新纹理调用this.videoTextures[i].needsUpdate = true;

6.4、 dispose：释放播放器 _freeVideoPlayer，释放纹理_freeTexture，释放onMediaEvent

七、BasicVideoPlayer

BasicVideoPlayer

7.1、构造函数

videoElement就是创建了一个html的video dom标签，并把这个标签加到document.body上

_volume=1.0

this._muted = false;

this.onMediaEvent = undefined;

(this: any)._onMediaEvent = this._onMediaEvent.bind(this);

7.2、初始化视频 initializeVideo

设置video的src、crossOrigin(跨域)、给video标签绑定事件_bindMediaEvents(监听canplay、playing、pause、ended、error、durationchange、timeupdate)、调用video的load方法

7.3、 hasEnoughData

判断video标签存在，而且this.videoElement.readyState === this.videoElement.HAVE_ENOUGH_DATA

7.4、 setVolume、setMuted、play、pause、seekTo都是调用video标签的相应功能

7.5、 dispose 暂停播放pause、从document.body移除video，src设置为''，移除监听事件

上面就是这几个文件的方法和属性及相互调用关系，但是我们如何使用video的其他事件呢？

八、监听video的其他的功能

BasicVideoPlayer

8.1、首先在BasicVideoPlayer上，添加以上添加备注的东东，因为浏览器的video标签监听事件还有这些东东；

8.2、监听事件的回调就是VRVideoComponent的onMediaEvent，同样再次会回调给RCTVideoModule的_onMediaEvent的方法内；

在RCTVideoModule内部的加上剩余的东东：

RCTVideoModule

8.3、加上上面的东东，就可以增加其他的监听事件了，这里面会调向react 和 native各发送监听回调事件，

react这个方法是调用想下文的callFunction，调用RCTDeviceEventEmitter的emit方法，this._rnctx.callFunction('RCTDeviceEventEmitter','emit', [callbackName,handle,mediaEvent]);

另外一个是在native上增加监听

8.4、在RCTVideoPlayer中加入下面的代码