一种前端解码的Web浏览器流媒体播放技术的制作方法

一种前端解码的web浏览器流媒体播放技术
技术领域
1.本发明涉及计算机多媒体技术领域，特别是涉及一种前端解码的浏览器流媒体播放技术。


背景技术：

2.近年随着现代计算机流媒体技术的发展，越来越多的单位企业从自身管理需要出发，大量引入或新建视频监控系统，一般采用“后端rtmp协议推送数据 前端浏览器flash插件播放”的技术方式来进行过程管理。与此同时，随着web浏览器技术的发展与安全性考虑，主流web浏览器厂商谷歌已于2020年12月在chrome浏览器中正式禁用flash插件，这使得大量以rtmp协议为基础的既有视频监控系统无法在最新版本web浏览器上运行，只能在低旧版本web浏览器上以兼容方式运行，给各单位企业带来网络安全隐患。
3.为解决这个问题，各大视频监控生产厂商与软件技术公司普遍采用“实时转换rtmp数据流格式”技术，使得转换后的数据流(rtsp或mpegts)可在最新版本web浏览器上获得播放支持。
4.采用“实时转换rtmp数据流格式”技术，虽可以在最新版本web浏览器播放流媒体数据，但也存在技术弊端：1、该技术采用“后端服务器实时解码再编码”转换机制，转换过程非常消耗服务器的cpu运算性能，仅是1路高清视频的流畅转换至少要消耗2～4个cpu运算核，这将大量增加监控数量较多单位企业的服务器购置成本。2、rtmp数据流转换为rtsp数据流，会产生有5～10秒的过程延时，这对于监控实时性要求较高的单位是较难接受的；3、rtmp数据流转换为mpegts数据流，网络带宽使用会急剧上升，仅是1路高清视频的流畅转换至少占用8mb/s带宽(转换前的rtmp是250kb/s左右)，究其原因是mpegts协议自身“编码压缩率较低”特点所致，这将大量增加监控数量较多单位企业的网络环境改造成本。
5.由此，以上所述的“实时转换rtmp数据流格式”技术，虽可以在最新版本web浏览器播放视频流数据，但因其技术弊端较为突出，多数时候还是以技术预研与方案演示的方式出现，并没有在“监控设备多、实时性要求高”的需求领域有大量成熟应用案例。


技术实现要素：

6.本发明的目的在于提供一种前端解码的web浏览器流媒体播放技术，以解决上述背景技术中提出的问题。
7.为实现上述目的，本发明提供如下技术方案：一种前端解码的web浏览器流媒体播放技术，所述实现步骤如下：
8.步骤一：构建转发服务器；
9.步骤二：构建websocket网络通讯组件；
10.步骤三：构建ffmpeg解码组件；
11.步骤四：构建音视频播放器。
12.根据权利要求1所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，
所述步骤一通过构建运行在服务器操作系统上的转发服务器，采用“上下沿数据交换机制”实现流数据代理转发，上沿通过调用ffmpeg链接库连接到流媒体数据源并持续获取流数据，下沿使用websocket协议与前端播放器的网络模块通讯，将上沿获取的流数据，实时传输到前端播放器。转发服务器目前采用开源库libwebsockets作为通讯组件。
13.根据权利要求1所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述步骤二构建websocket网络通讯组件，开发基于websocket协议的网络通讯组件，使前端可向转发服务器发送打开流媒体请求，可从转发服务器获取流媒体信息与流数据。
14.根据权利要求3所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述构建ffmpeg解码组件，使用emscripten对ffmpeg开源库进行编译，获得ffmpeg的webassembly解码组件，可在浏览器前端对获取的流数据进行实时解码。
15.根据权利要求3所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述构建音视频播放器：web浏览器前端解码后的流媒体数据，音频数据采用sdi2库进行播放，视频数据使用opengles2.0库进行绘制，实现音视频数据在浏览器前端的流畅播放。
16.与现有技术相比，本发明的有益效果是：
17.1、实施成本低
18.转发服务器运行过程只转发流媒体数据，整个数据转发过程cpu运算消耗极低。转发服务器并不对流媒体数据进行解码、编码操作，故而网络延迟极低，也不增加额外网路带宽。转发服务器的这种设计模式，在满足“监控设备多、实时性要求高”需求的同时，还大幅度降低相关单位企业的实施成本；
19.2、解码性能高
20.采用webassembly技术编译的ffmpeg解码组件(wasm)，可在web浏览器端以高性能运行，实际解码性能基本接近桌面程序。
21.3、兼容性好
22.本发明依托ffmpeg组件与无插件播放技术的结合，可支持大多数主流的流媒体协议与音视频编码协议，而不受限于浏览器自身组件的功能范围。支持的流媒体协议包括：rtmp、rtsp、hls等，音视频编码协议包括：mpeg、mp4、h263、h264、h265、ac3、aac等。
23.4、扩展性强
24.本发明采用“转发服务器 前端ffmpeg解码 无插件播放”的设计模式，整个技术架构具有很强的可扩展性。以后无论是新流媒体协议或者新音视频编码协议出现，都可以通过升级ffmpeg解码组件的方式，获得最新的功能支持。
附图说明
25.图1为本发明的实现方法流程图；
26.图2为本发明的功能结构图。
具体实施方式
27.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他
实施例，都属于本发明保护的范围。
28.如图1所示，一种前端解码的web浏览器流媒体播放技术，所述实现步骤如下：
29.步骤一：构建转发服务器；
30.步骤二：构建websocket网络通讯组件；
31.步骤三：构建ffmpeg解码组件；
32.步骤四：构建音视频播放器。
33.根据权利要求1所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述步骤一通过构建运行在服务器操作系统上的转发服务器，采用“上下沿数据交换机制”实现流数据代理转发，上沿通过调用ffmpeg链接库连接到流媒体数据源并持续获取流数据，下沿使用websocket协议与前端播放器的网络模块通讯，将上沿获取的流数据，实时传输到前端播放器。转发服务器目前采用开源库libwebsockets作为通讯组件。
34.根据权利要求1所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述步骤二构建websocket网络通讯组件，开发基于websocket协议的网络通讯组件，使前端可向转发服务器发送打开流媒体请求，可从转发服务器获取流媒体信息与流数据。
35.根据权利要求3所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述构建ffmpeg解码组件，使用emscripten对ffmpeg开源库进行编译，获得ffmpeg的webassembly解码组件，可在浏览器前端对获取的流数据进行实时解码。
36.根据权利要求3所述的一种前端解码的web浏览器流媒体播放技术，其特征在于，所述构建音视频播放器：web浏览器前端解码后的流媒体数据，音频数据采用sdi2库进行播放，视频数据使用opengles2.0库进行绘制，实现音视频数据在浏览器前端的流畅播放。
37.下面是本发明的一个实际算例，结合算例说明一种前端解码的web浏览器流媒体播放技术的具体实施方式。
38.实施例1：(局域网测试rtmp流媒体)
39.数据源：rtmp://192.168.2.104/live/stream
40.数据源视频属性：编码h264，yuv420p，分辨率1920*1080
41.数据源音频属性：编码aac，采样率48000，双通道
42.播放帧率：80.2帧/秒
43.播放效果：音视频流畅
44.实施例2：(互联网测试在线rtmp流媒体)
45.数据源：rtmp://media3.scctv.net/live/scctv_800
46.播放帧率：30.4帧/秒
47.数据源视频属性：编码h264，yuv420p，分辨率240*160
48.数据源音频属性：编码aac，采样率12000，双通道
49.实施例3：(互联网测试在线rtsp流媒体)
50.数据源：
51.rtsp://wowzaec2demo.streamlock.net/vod/mp4:bigbuckbunny_115k.mov
52.数据源视频属性：编码h264，yuv420p，分辨率240*160
53.数据源音频属性：编码aac，采样率12000，双通道
54.播放帧率：36.2帧/秒
55.播放效果：音视频流畅
56.对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。