一种基于HTML5的VR在线播放方法、系统及播放器技术方案

本发明专利技术提供了一种基于HTML5的VR在线播放方法、系统及播放器，方法包括：创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。解决VR视频在微信、QQ以及手机浏览器中播放的技术问题，实现了Android与IOS设备在微信、QQ以及移动浏览器中观看VR全景视频。可以让很多VR广告，VR互动游戏，在移动端广泛的传播，用户不再需要下载第三方的APP就能观看VR视频，降低了内容运营公司获取用户的成本。

【技术实现步骤摘要】
一种基于HTML5的VR在线播放方法、系统及播放器
本专利技术涉及VR在线播放
，尤其涉及一种基于HTML5的VR在线播放方法、系统及播放器。
技术介绍
目前全景视频(VirtualReality，VR)，又叫虚拟实境视频，是指能工巧匠利用专业的VR摄影功能将现场环境真实地记录下来，再通过计算机进行后期处理，所形成的可以实现三维的空间展示功能的视频。目前在VR领域，最缺乏的就是内容，而对于视频行业来说，内容总是会不断产生的。如果能将视频内容和VR技术很好地结合，对于影视行业来说，将为其增添可看性；对于VR设备来说，丰富的视频会为其增添内容，使其赢得大众的认可；对于用户来说，他们对VR视频有极高的期待，VR技术与视频的结合将给他们带来好的体验。移动终端为载体的VR视频播放的过程中，95％的视频都要基于App来播放，但是很多VR版本的广告、直播、宣传片需要通过微信、QQ等社交软件进行传播和扩散，用户体验较差，因此，将VR视频通过HTML5播放，会给用户带来更好的观看体验。由于Krpano是html5VR视频播放器的先驱，也是全球最大，使用最为广泛的html5VR视频播放器SDK，但是这款播放器至今都只能播放mp4视频文件，不支持HLS协议，同时也不支持Android端的播放。不支持HLS，就意味着mp4视频必须要完全下载完毕才能播放，这样用户等待的时间比较长，如果视频较大，将会导致移动端浏览器直接崩溃。不支持Android端意味着将损失移动领域80％以上的受众群体。
技术实现思路
本专利技术提供了一种基于HTML5的VR在线播放方法、系统及播放器，主要解决VR视频在微信、QQ以及手机浏览器中播放的技术问题；达到支持IOS和Android版本，并支持基于HLS协议点播视频和直播视频的播放的目的。为达到上述目的，本专利技术一方面提供了一种基于HTML5的VR在线播放方法，包括：创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。进一步的，所述创建球体模型，包括：在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。进一步的，所述获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频，包括：监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。进一步的，所述监听并获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频包括：创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；在Video的onPlay事件中做三维场景的初始化，初始化动作包括：创建场景；通过透视投影算法为场景添加透视相机；将视频数据创建为视频纹理；创建材质，将视频纹理贴在材质上；创建网格，将材质附着于球体缓冲区上；创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。进一步的，所述监听并获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频包括：创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；在Video的onPlay事件中做三维场景的初始化，初始化动作包括：创建Canvas，将Video的每帧画面复制于Cavans上；创建场景；通过透视投影算法为场景添加透视相机；将视频数据创建为视频纹理；创建材质，将视频纹理贴在材质上；创建网格；将材质附着于球体缓冲区上；创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。进一步的，所述接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值，包括：接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；通过创建的重力及触摸控制组件根据角度及重力反馈的变换数据，实现拖动，调整场景相机的视角；在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；或在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据。本专利技术另一方面还提供了一种基于HTML5的VR在线播放系统，包括：创建模块，用于创建球体模型；渲染模块，用于获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；调整模块，用于接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。进一步的，所述创建模块，包括：创建单元，用于在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。进一步的，所述渲染模块，包括：监听单元，用于监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；合成单元，用于将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。进一步的，监听单元和合成单元的实现步骤包括：创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；在Video的onPlay事件中做三维场景的初始化，初始化动作包括：创建场景；通过透视投影算法为场景添加透视相机；将视频数据创建为视频纹理；创建材质，将视频纹理贴在材质上；创建网格，将材质附着于球体缓冲区上；创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。进一步的，监听单元和合成单元的实现步骤还包括：创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；在Video的onPlay事件中做三维场景的初始化，初始化动作包括：创建Canvas，将Video的每帧画面复制于Cavans上；创建场景；通过透视投影算法为场景添加透视相机；将视频数据创建为视频纹理；创建材质，将视频纹理贴在材质上；创建网格；将材质附着于球体缓冲区上；创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。进一步的，所述调整模块，包括：接收单元，用于接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；调整单元，用于本文档来自技高网...

【技术保护点】
一种基于HTML5的VR在线播放方法，其特征在于，包括：创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。

【技术特征摘要】
1.一种基于HTML5的VR在线播放方法，其特征在于，包括：创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。2.如权利要求1所述的方法，其特征在于，所述创建球体模型，包括：在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。3.如权利要求1所述的方法，其特征在于，所述获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频，包括：监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。4.如权利要求3所述的方法，其特征在于，所述监听并获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频包括：创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；在Video的onPlay事件中做三维场景的初始化，初始化动作包括：创建场景；通过透视投影算法为场景添加透视相机；将视频数据创建为视频纹理；创建材质，将视频纹理贴在材质上；创建网格，将材质附着于球体缓冲区上；创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。5.如权利要求3所述的方法，其特征在于，所述监听并获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频包括：创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；在Video的onPlay事件中做三维场景的初始化，初始化动作包括：创建Canvas，将Video的每帧画面复制于Cavans上；创...

【专利技术属性】
技术研发人员：曹杰，冯雨晖，李屹楠，张涛，马进，
申请(专利权)人：北京红马传媒文化发展有限公司，
类型：发明
国别省市：北京,11