一种基于H5/WebGL的改进多视角直播渲染的方法技术

技术编号:26263040 阅读:40 留言:0更新日期:2020-11-06 18:02
本发明专利技术提出一种基于H5/WebGL的改进多视角直播渲染的方法,采用多台摄像机对现场进行拍摄,将现场拍摄的画面通过合并设备进行合并,通过流媒体进行转码后,将播放流地址回传给H5播放器,通过H5播放器标签进行码流的播放,将播放的画面传递给WebGL进行处理,将播放器画面作为贴图纹理,对播放器播放画面进行逐帧渲染,canvas结合播放器内集成的自定义播放控制条最终展示画面给用户,播放器根据不同的场景展示显示,匹配不同的播放交互。本发明专利技术可以实现将多个视角画面合并在一起的直播画面进行单一视角的场景切换渲染显示,实现多机位、多场景、自由视角的直播渲染播放。

【技术实现步骤摘要】
一种基于H5/WebGL的改进多视角直播渲染的方法
本专利技术视频渲染处理开发领域,尤其涉及一种基于H5/WebGL的改进多视角直播渲染的方法。
技术介绍
超高清视频(4K、8K)显示包含更大的数据量、需要更快的信息传输速度,因此对硬件设施提出了一定挑战。随着5G的到来,带来的变化之一就是高带宽、低时延,恰恰可以进一步解决传输问题,带动整个采集、制作、播放内容的升级,进而推动了超高清视频应用场景的发展,越来越多的直播赛事也正在采用5G直播+4K/8K的画面的输出。然而,在手机浏览器端,虽然H5-video播放器可以实现直播码流(h264)的播放,但因为浏览器的限制(如:在1个页面内只能播放一路码流),目前在H5端解决多视角的切换播放的方式一般就是根据视角,每个视角一路流,从而实现切换视角播放,其实也就是切换码流播放。但这也就产生了在切换现场直播画面的时候,现场画面并不能完全同步,且会产生码流加载卡顿的过渡效果,影响观看体验。而WebGL(全写WebGraphicsLibrary)是一种3D绘图协议,这种绘图技术标准允许把Java本文档来自技高网...

【技术保护点】
1.一种基于H5/WebGL的改进多视角直播渲染的方法,其特征在于,所述方法包括以下步骤:/nS1、现场拍摄:采用多台摄像机对现场进行拍摄;/nS2、画面合并:将现场拍摄的画面通过合并设备进行合并;/nS3、画面传输至H5播放器:通过流媒体进行转码后,将播放流地址回传给H5播放器;/nS4、播放器播放:通过H5播放器标签进行码流的播放,将播放的画面传递给WebGL进行处理;/nS5、WebGL渲染:将播放器画面作为贴图纹理,对播放器播放画面进行逐帧渲染;/nS6、canvas呈现:结合播放器内集成的自定义播放控制条最终展示画面给用户;/nS7、播放画面呈现:播放器根据不同的场景展示显示,匹配不...

【技术特征摘要】
1.一种基于H5/WebGL的改进多视角直播渲染的方法,其特征在于,所述方法包括以下步骤:
S1、现场拍摄:采用多台摄像机对现场进行拍摄;
S2、画面合并:将现场拍摄的画面通过合并设备进行合并;
S3、画面传输至H5播放器:通过流媒体进行转码后,将播放流地址回传给H5播放器;
S4、播放器播放:通过H5播放器标签进行码流的播放,将播放的画面传递给WebGL进行处理;
S5、WebGL渲染:将播放器画面作为贴图纹理,对播放器播放画面进行逐帧渲染;
S6、canvas呈现:结合播放器内集成的自定义播放控制条最终展示画面给用户;
S7、播放画面呈现:播放器根据不同的场景展示显示,匹配不同的播放交互。


2.根据权利要求1所述的方法,其特征在于,步骤S2之后还包括步骤:
通过流媒体进行转码后,将播放流地址回传给前端页面。


3...

【专利技术属性】
技术研发人员:王嘉炀洪玉先
申请(专利权)人:天翼视讯传媒有限公司
类型:发明
国别省市:上海;31

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1