CN106658212A - 一种基于html5的vr在线播放方法、系统及播放器 - Google Patents

一种基于html5的vr在线播放方法、系统及播放器 Download PDF

Info

Publication number
CN106658212A
CN106658212A CN201710040301.0A CN201710040301A CN106658212A CN 106658212 A CN106658212 A CN 106658212A CN 201710040301 A CN201710040301 A CN 201710040301A CN 106658212 A CN106658212 A CN 106658212A
Authority
CN
China
Prior art keywords
video
data
sphere
sphere model
created
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710040301.0A
Other languages
English (en)
Inventor
曹杰
冯雨晖
李屹楠
张涛
马进
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
BEIJING HONGMA MEDIA CULTURE DEVELOPMENT CO LTD
Original Assignee
BEIJING HONGMA MEDIA CULTURE DEVELOPMENT CO LTD
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by BEIJING HONGMA MEDIA CULTURE DEVELOPMENT CO LTD filed Critical BEIJING HONGMA MEDIA CULTURE DEVELOPMENT CO LTD
Priority to CN201710040301.0A priority Critical patent/CN106658212A/zh
Publication of CN106658212A publication Critical patent/CN106658212A/zh
Pending legal-status Critical Current

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/00—3D [Three Dimensional] image rendering
    • G06T15/10—Geometric effects
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving rendering scenes according to scene graphs, e.g. MPEG-4 scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8166—Monomedia components thereof involving executable data, e.g. software
    • H04N21/8173—End-user applications, e.g. Web browser, game
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2215/00—Indexing scheme for image rendering
    • G06T2215/08—Gnomonic or central projection

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Geometry (AREA)
  • Computer Graphics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

一种基于HTML5的VR在线播放方法、系统及播放器
技术领域
本发明涉及VR在线播放技术领域，尤其涉及一种基于HTML5的VR在线播放方法、系统及播放器。
背景技术
目前全景视频(Virtual Reality，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上的画面。
进一步的，所述调整模块，包括：
接收单元，用于接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；
调整单元，用于通过创建的重力及触摸控制组件根据角度及重力反馈的变换数据，实现拖动，调整场景相机的视角；
更新单元，用于在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；或在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据。
本发明另一方便还提供了一种基于HTML5的VR在线播放器，包括前述任一项所述的系统。
本发明通过创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值的技术方案，实现了Android与IOS设备在微信、QQ以及移动浏览器中观看VR全景视频。可以让很多VR广告，VR互动游戏，在移动端广泛的的传播，用户不再需要下载第三方的APP就能观看VR视频，降低了内容运营公司获取用户的成本。
附图说明
图1为根据本发明的一种基于HTML5的VR在线播放方法的实施例一的流程图；
图2为根据本发明的一种基于HTML5的VR在线播放方法实例的示意图；
图3为根据本发明的一种基于HTML5的VR在线播放系统的实施例二的示意图；
图4为根据本发明的创建模块的实施例二的示意图；
图5为根据本发明的渲染模块的实施例二的示意图；
图6为根据本发明的调整模块的实施例二的示意图；
图7为根据本发明的一种基于HTML5的VR在线播放器的实施例三的结构框图；
图8为根据本发明的透视相机的原理说明示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
实施例一
参照图1，图1示出了一种基于HTML5的VR在线播放方法的流程图。本实施例一为基于HTML5的video组件、Canvas组件。实现过程中有使用开源框架Three.js，包括：步骤S110至步骤S130。
在步骤S110中，创建球体模型。
包括：
在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。
在步骤S120中，获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频。
包括：
监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；
将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。
优选的，该步骤具体包括：
创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；
HTML5自带Video组件，默认支持MP4，以及基于HLS协议的流媒体播放，Android和IOS下都可以无障碍播放非VR视频文件或流媒体，在HTML5的Video组件播放传统视频的基础上，先将VR视频作为传统视频进行播放。
在Video的onPlay事件中做三维场景的初始化，在内存中建立球体缓冲区，将每一帧的画面视为球体的UV展开图，将每一帧画面做为材质贴图，贴在球面纹理上，再将球面纹理附着于球体模型上。初始化动作包括：
创建场景；
如图8所示，通过透视投影算法为场景添加透视相机；使用透视投影算法获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果，在THREE框架中透视投影算法的构造方式为：
THREE.PerspectiveCamera(fov,aspect,near,far)，图中锥体顶点所在位置为人眼所在位置。
将视频数据创建为视频纹理；
创建材质，将视频纹理贴在材质上；
创建网格，将材质附着于球体缓冲区上；
创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。
优选的，该步骤还包括：
创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；
在Video的onPlay事件中做三维场景的初始化，初始化动作包括：
创建Canvas，将Video的每帧画面复制于Cavans上；
创建场景；
通过透视投影算法为场景添加透视相机；
将视频数据创建为视频纹理；
创建材质，将视频纹理贴在材质上；
创建网格；将材质附着于球体缓冲区上；
创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。
在步骤S130中，接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。
包括：
接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；
通过创建的重力及触摸控制组件根据角度及重力反馈的变换数据，实现拖动，调整场景相机的视角；
在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；或在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据。
一具体应用例子，基于html5和javascript语言实现，其中为简化代码开发，使用Three.js框架。
H5版本在线播放MP4：
1.创建Video组件，为Video组件设置playsinline属性，监听Video的Play/Puse/Ended事件；
2.在Video的onPlay事件中做三维场景的初始化，初始化动作包括：
(1)创建场景THREE.Scene；
(2)为场景添加透视相机THREE.PerspectiveCamera；
(3)将视频数据创建为视频纹理THREE.VideoTexture(video)；
(4)创建球体缓冲区THREE.SphereBufferGeometry；
(5)创建材质，将视频纹理贴在材质上THREE.MeshBasicMaterial({map:videoTexture})；
(6)创建网格，将材质附着于球体缓冲区上THREE.Mesh(geometry,material)；
(7)创建渲染器THREE.WebGLRenderer，将渲染器渲染后的画面绘制在Canvas上；
(8)创建重力及触摸控制组件THREE.VRControls(camera)，重力及触摸控制组件实现拖动和根据重力反馈数据，改变场景相机的视角；
(9)在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；
controls.update()；
renderer.render(scene,camera)；
(10)动画循环requestAnimationFrame。
另一具体应用例子，基于html5和javascript语言实现，其中为简化代码开发，使用Three.js框架。
H5在线播放HLS点播或直播视频：
mp4视频播放只适用用于体积比较小的视频20M以下，再大对移动浏览器是个负担。因为mp4视频是先下载后播放，无论是下载还是播放都是要占用内存。
所以最佳策略就是播放基于HLS的流媒体视频，可以适用ffmpeg指令将mp4大视频转化为基于HLS的流媒体。
Video组件加载指定的m3u8地址就行，其他流程与MP4视频文件播放方式一致。但是在IOS的safari内核中，限制了webgl拷贝hls的视频画面到canvas上，因此HLS的视频在IOS下无法渲染。
为解决以上问题，在IOS下渲染时候，需要将Video中视频的每一帧画面拷贝到Canvas上。
另一具体应用例子，基于html5和javascript语言实现，其中为简化代码开发，使用Three.js框架。
H5在线播放HLS点播或直播视频解决IOS黑屏问题：
1.创建Video组件，为Video组件设置playsinline属性，监听Video的Play/Puse/Ended事件；
2.在Video的onPlay事件中做三维场景的初始化，初始化动作包括：
(1)创建Canva将Video的每帧画面复制于Cavans上；
(2)创建场景THREE.Scene；
(3)为场景添加透视相机THREE.PerspectiveCamera；
(4)将视频创建为视频纹理THREE.Texture(canvas)；
(5)创建球体缓冲区THREE.SphereBufferGeometry；
(6)创建材质，将视频纹理贴在材质上THREE.MeshBasicMaterial({map:videoCanvaTexture})；
(7)创建网格，将材质附着于球体缓冲区上THREE.Mesh(geometry,material)；
(8)创建渲染器THREE.WebGLRenderer，将渲染器渲染后的画面绘制在Canvas上；
(9)创建重力及触摸控制组件THREE.VRControls(camera)，重力及触摸控制组件实现拖动和根据重力反馈数据，改变场景相机的视角；
(10)在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据；
canvas.getConetxt(‘2d’).drawImage(video,0,0,window.width,window.height)；
controls.update()；
renderer.render(scene,camera)；
(11)动画循环requestAnimationFrame。
如图2所示，区域100相当于手机屏幕，旋转手机的时候，球体向相反的方向旋转，这样就可以看到球体上的画面了。HTML5的video组件获取的每一帧画面将最终作为材质贴在球体的内表面上。
本发明实施例一通过创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值的技术方案，实现了Android与IOS设备在微信、QQ以及移动浏览器中观看VR全景视频。可以让很多VR广告，VR互动游戏，在移动端广泛的的传播，用户不再需要下载第三方的APP就能观看VR视频，降低了内容运营公司获取用户的成本。
实施例二
参照图3，图3示出了本发明提供的一种基于HTML5的VR在线播放系统200一实施例的结构图，包括：
创建模块21，用于创建球体模型。
渲染模块22，用于获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频。
调整模块23，用于接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。
进一步的，如图4所示，所述创建模块21，包括：
创建单元211，用于在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。
进一步的，如图5所示，所述渲染模块22，包括：
监听单元221，用于监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；
合成单元222，用于将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。
进一步的，监听单元和合成单元的实现步骤包括：
创建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上的画面。
进一步的，如图6所示，所述调整模块23，包括：
接收单元231，用于接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；
调整单元232，用于通过创建的重力及触摸控制组件根据角度及重力反馈的变换数据，实现拖动，调整场景相机的视角；
更新单元233，用于在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；或在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据。
具体实现的功能和处理方式参见方法实施例一描述的具体步骤。
由于本实施例二的系统所实现的处理及功能基本相应于前述图1所示的方法的实施例、原理和实例，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此不做赘述。
本发明实施例二通过创建模块创建球体模型；渲染模块获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；调整模块接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值的技术方案，实现了Android与IOS设备在微信、QQ以及移动浏览器中观看VR全景视频。可以让很多VR广告，VR互动游戏，在移动端广泛的的传播，用户不再需要下载第三方的APP就能观看VR视频，降低了内容运营公司获取用户的成本。
实施例三
参照图7，图7示出了本发明提供的一种基于HTML5的VR在线播放器300，包括实施例二中的任一项所述的系统200。
本发明实施例三通过创建球体模型；获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值的技术方案，实现了Android与IOS设备在微信、QQ以及移动浏览器中观看VR全景视频。可以让很多VR广告，VR互动游戏，在移动端广泛的的传播，用户不再需要下载第三方的APP就能观看VR视频，降低了内容运营公司获取用户的成本。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
需要说明的是，对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置，可通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
需要指出，根据实施的需要，可将本申请中描述的各个步骤/部件拆分为更多步骤/部件，也可将两个或多个步骤/部件或者步骤/部件的部分操作组合成新的步骤/部件，以实现本发明的目的。
上述根据本发明的方法可在硬件、固件中实现，或者被实现为可存储在记录介质(诸如CD ROM、RAM、软盘、硬盘或磁光盘)中的软件或计算机代码，或者被实现通过网络下载的原始存储在远程记录介质或非暂时机器可读介质中并将被存储在本地记录介质中的计算机代码，从而在此描述的方法可被存储在使用通用计算机、专用处理器或者可编程或专用硬件(诸如ASIC或FPGA)的记录介质上的这样的软件处理。可以理解，计算机、处理器、微处理器控制器或可编程硬件包括可存储或接收软件或计算机代码的存储组件(例如，RAM、ROM、闪存等)，当所述软件或计算机代码被计算机、处理器或硬件访问且执行时，实现在此描述的处理方法。此外，当通用计算机访问用于实现在此示出的处理的代码时，代码的执行将通用计算机转换为用于执行在此示出的处理的专用计算机。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。

Claims (11)

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上；
创建场景；
通过透视投影算法为场景添加透视相机；
将视频数据创建为视频纹理；
创建材质，将视频纹理贴在材质上；
创建网格；将材质附着于球体缓冲区上；
创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。
6.如权利要求1所述的方法，其特征在于，所述接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值，包括：
接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；
通过创建的重力及触摸控制组件根据角度及重力反馈的变换数据，实现拖动，调整场景相机的视角；
在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；或在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据。
7.一种基于HTML5的VR在线播放系统，其特征在于，包括：
创建模块，用于创建球体模型；
渲染模块，用于获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；
调整模块，用于接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。
8.如权利要求7所述的系统，其特征在于，所述创建模块，包括：
创建单元，用于在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。
9.如权利要求7所述的系统，其特征在于，所述渲染模块，包括：
监听单元，用于监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；
合成单元，用于将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。
10.如权利要求7所述的系统，其特征在于，所述调整模块，包括：
接收单元，用于接收基于客户端载体发送的手势变换数据或通过角度传感器及重力传感器获取的客户端角度及重力变换数据；
调整单元，用于通过创建的重力及触摸控制组件根据角度及重力反馈的变换数据，实现拖动，调整场景相机的视角；
更新单元，用于在渲染过程中更新重力及触摸组件的数据信息，同时更新场景和相机数据；或在渲染过程中先完成Video画面的拷贝，更新重力及触摸组件的数据信息，同时更新场景和相机数据。
11.一种基于HTML5的VR在线播放器，其特征在于，包括如权利要求7-10任一项所述的系统。
CN201710040301.0A 2017-01-20 2017-01-20 一种基于html5的vr在线播放方法、系统及播放器 Pending CN106658212A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710040301.0A CN106658212A (zh) 2017-01-20 2017-01-20 一种基于html5的vr在线播放方法、系统及播放器

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710040301.0A CN106658212A (zh) 2017-01-20 2017-01-20 一种基于html5的vr在线播放方法、系统及播放器

Publications (1)

Publication Number Publication Date
CN106658212A true CN106658212A (zh) 2017-05-10

Family

ID=58840898

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710040301.0A Pending CN106658212A (zh) 2017-01-20 2017-01-20 一种基于html5的vr在线播放方法、系统及播放器

Country Status (1)

Country Link
CN (1) CN106658212A (zh)

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107248193A (zh) * 2017-05-22 2017-10-13 北京红马传媒文化发展有限公司 二维平面与虚拟现实场景进行切换的方法、系统及装置
CN108156429A (zh) * 2018-01-09 2018-06-12 罗建平 全景摄像系统及利用web浏览器查看全景摄像系统的方法
CN108174174A (zh) * 2017-12-29 2018-06-15 暴风集团股份有限公司 Vr视频显示方法、装置及终端
CN108289231A (zh) * 2017-06-20 2018-07-17 深圳市佳创视讯技术股份有限公司 一种融合的全景播放器
CN111080768A (zh) * 2019-10-16 2020-04-28 重庆灏漫科技有限公司 多类终端采集建模系统和建模方法
CN111200754A (zh) * 2018-11-16 2020-05-26 北京字节跳动网络技术有限公司 一种全景视频的播放方法、装置、终端及存储介质
CN111901616A (zh) * 2020-07-15 2020-11-06 天翼视讯传媒有限公司 一种基于H5/WebGL的改进多视角直播渲染的方法
CN112073675A (zh) * 2020-09-17 2020-12-11 中邮科通信技术股份有限公司 一种基于浏览器的全景视频会议的系统及其工作方法
CN112533002A (zh) * 2020-11-17 2021-03-19 南京邮电大学 一种用于vr全景直播的动态图像融合方法及系统
CN112567759A (zh) * 2018-04-11 2021-03-26 阿尔卡鲁兹公司 数字媒体系统
CN112702522A (zh) * 2020-12-25 2021-04-23 李灯 一种基于vr直播系统的自适应控制播放方法
CN113497967A (zh) * 2021-05-26 2021-10-12 浙江大华技术股份有限公司 基于浏览器的视频帧切换方法、装置和存储介质
CN114285994A (zh) * 2021-12-21 2022-04-05 众信方智(苏州)智能技术有限公司 基于全景工作空间显示设备信息的方法、装置及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160086306A1 (en) * 2014-09-19 2016-03-24 Sony Computer Entertainment Inc. Image generating device, image generating method, and program
CN105787920A (zh) * 2014-12-26 2016-07-20 秦永进 球幕标定方法、标定系统及控制设备
CN105898337A (zh) * 2015-11-18 2016-08-24 乐视网信息技术（北京）股份有限公司 全景视频的显示方法和装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20160086306A1 (en) * 2014-09-19 2016-03-24 Sony Computer Entertainment Inc. Image generating device, image generating method, and program
CN105787920A (zh) * 2014-12-26 2016-07-20 秦永进 球幕标定方法、标定系统及控制设备
CN105898337A (zh) * 2015-11-18 2016-08-24 乐视网信息技术（北京）股份有限公司 全景视频的显示方法和装置

Cited By (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107248193A (zh) * 2017-05-22 2017-10-13 北京红马传媒文化发展有限公司 二维平面与虚拟现实场景进行切换的方法、系统及装置
CN108289231A (zh) * 2017-06-20 2018-07-17 深圳市佳创视讯技术股份有限公司 一种融合的全景播放器
CN108174174A (zh) * 2017-12-29 2018-06-15 暴风集团股份有限公司 Vr视频显示方法、装置及终端
CN108156429A (zh) * 2018-01-09 2018-06-12 罗建平 全景摄像系统及利用web浏览器查看全景摄像系统的方法
CN112567759A (zh) * 2018-04-11 2021-03-26 阿尔卡鲁兹公司 数字媒体系统
CN112567759B (zh) * 2018-04-11 2023-09-29 阿尔卡鲁兹公司 支持关于虚拟现实内容的多个特征的数字媒体系统
US11589110B2 (en) 2018-04-11 2023-02-21 Alcacruz Inc. Digital media system
CN111200754A (zh) * 2018-11-16 2020-05-26 北京字节跳动网络技术有限公司 一种全景视频的播放方法、装置、终端及存储介质
CN111200754B (zh) * 2018-11-16 2021-08-10 北京字节跳动网络技术有限公司 一种全景视频的播放方法、装置、终端及存储介质
CN111080768A (zh) * 2019-10-16 2020-04-28 重庆灏漫科技有限公司 多类终端采集建模系统和建模方法
CN111901616A (zh) * 2020-07-15 2020-11-06 天翼视讯传媒有限公司 一种基于H5/WebGL的改进多视角直播渲染的方法
CN111901616B (zh) * 2020-07-15 2022-09-13 天翼视讯传媒有限公司 一种基于H5/WebGL的改进多视角直播渲染的方法
CN112073675A (zh) * 2020-09-17 2020-12-11 中邮科通信技术股份有限公司 一种基于浏览器的全景视频会议的系统及其工作方法
CN112533002A (zh) * 2020-11-17 2021-03-19 南京邮电大学 一种用于vr全景直播的动态图像融合方法及系统
CN112702522A (zh) * 2020-12-25 2021-04-23 李灯 一种基于vr直播系统的自适应控制播放方法
CN113497967A (zh) * 2021-05-26 2021-10-12 浙江大华技术股份有限公司 基于浏览器的视频帧切换方法、装置和存储介质
CN113497967B (zh) * 2021-05-26 2023-03-14 浙江大华技术股份有限公司 基于浏览器的视频帧切换方法、装置和存储介质
CN114285994A (zh) * 2021-12-21 2022-04-05 众信方智(苏州)智能技术有限公司 基于全景工作空间显示设备信息的方法、装置及存储介质

Similar Documents

Publication Publication Date Title
CN106658212A (zh) 一种基于html5的vr在线播放方法、系统及播放器
WO2017193576A1 (zh) 一种视频分辨率的适应方法、装置及虚拟现实终端
US10965783B2 (en) Multimedia information sharing method, related apparatus, and system
CN105610868B (zh) 一种信息交互的方法、设备及系统
US10750213B2 (en) Methods and systems for customizing virtual reality data
CN108391103A (zh) Vr视频观影区域划分方法及装置
US10699749B2 (en) Methods and systems for customizing virtual reality data
CN109644294A (zh) 一种直播分享的方法、相关设备及系统
CN106028115A (zh) 视频播放方法和装置
CN111586426B (zh) 全景直播的信息展示方法、装置、设备及存储介质
CN112843735B (zh) 游戏画面的拍摄方法、装置、设备及存储介质
CN114245228B (zh) 页面链接投放方法、装置及电子设备
CN105138216A (zh) 一种在虚拟座位上显示观众互动信息的方法及装置
US20220219090A1 (en) DYNAMIC AND CUSTOMIZED ACCESS TIERS FOR CUSTOMIZED eSPORTS STREAMS
JP2020522801A (ja) バーチャル・リアリティ・メディア・コンテンツ内に含める目的での現実世界シーンのカスタマイズされるビューの仮想化プロジェクションを生成するための方法及びシステム
CN111556357A (zh) 直播视频的播放方法、装置、设备及存储介质
CN115830224A (zh) 多媒体数据的编辑方法、装置、电子设备及存储介质
WO2020093862A1 (zh) 一种vr视频处理的方法及相关装置
US10891711B2 (en) Image processing method and apparatus
CN113230659A (zh) 一种游戏的显示控制方法及装置
CN111667313A (zh) 广告展示方法、装置、客户端设备及存储介质
CN109862385A (zh) 直播的方法、装置、计算机可读存储介质及终端设备
JP2024517702A (ja) シングルストリームを利用して関心領域の高画質映像を提供する方法、コンピュータ装置、およびコンピュータプログラム
CN105187887A (zh) 显示抽奖动画的方法和装置
CN105916046A (zh) 一种植入型互动方法和装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20170510

RJ01 Rejection of invention patent application after publication