web端播放视频,rtsp协议转HLS,H5网页播放器，浏览器播放

「爱情、让人受尽委屈。」 2024-03-24 18:18 18阅读 0赞

rtsp转hls协议  
一、前言  
不论是从事传统安防监控行业的或是做直播的行业都避免不了做音视频的播放，熟悉音视频播放的朋友应该知道，该行业设计的音视频对接协议很多，包括rtsp、rtmp、hls、onviff、gb28181等等，不同的协议针对不同的行业应用。接下来我们先来说说两个不同音视频行业对视频播放的行业做法，在说明之前我们先来了解一下相关的概念。

相关概念

HLS协议

HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件，用于寻找可用的媒体流。HLS只请求基本的HTTP报文，与实时传输协议（RTP)不同，HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。它也很容易使用内容分发网络来传输媒体流。苹果公司把HLS协议作为一个互联网草案（逐步提交），在第一阶段中已作为一个非正式的标准提交到IETF。但是，即使苹果偶尔地提交一些小的更新，IETF却没有关于制定此标准的有关进一步的动作。HLS （HTTP Live Streaming）是苹果公司实现的基于 HTTP 的流媒体协议，可以实现流媒体的点播和直播播放。当然，起初是只支持苹果的设备，目前大多数的移动设备也都实现了该功能。HTML5 直接支持该协议。

WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。它于2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

1、传统安防行业  
桌面播放器

由于音视频涉及到底层的编解码、视频对接协议等特性，需要大量的C/C++开发人员，传统的安防行业公司或做摄像机、录像机等硬件厂商从底层技术上讲都会有自己的一套独立的业务管理软件，其中集成了自家硬件音视频的播放以及行业各种音视频播放协议的对接，在销售自家硬件的同时都会赠送相关的软件，在监控室安装其软件即可做到实时视频、录像回放、云台控制、视频上墙、视频摘要、智能分析等多种多样的功能，其效果一般要好于其他对接方式，

其竞争优势在于：

（1）自家开发的软件通过c/c++底层协议对接效率更高、适配性更强、可扩展性更好。

（2）对接协议丰富，能几乎兼容行业所有的摄像机和接入协议，开放包容性强。

（3）能适配不同的机器，也可以采用硬件编解码，刷新速度快，视频渲染效率高。

（4）除传统的安防之外，可集成或扩展自家其他业务系统功能，业务扩展方便。

解决不了的硬伤：

（1）用户必须安装指定厂家的桌面应用，无法兼容所有行业硬件或兼容性受限。

（2）绑定集成商自家业务功能且部分软件都需要额外收费。

（3）软件存在的问题无法得到及时解决和升级。

（4）无法跨平台播放，各个平台都需要额外开发一套相应的桌面客户端软件。

浏览器播放

浏览器播放是传统行业的额外衍生，基于直播行业的兴起，用户对传统行业看视频的要求变得更高，从传统的桌面应用转移到免安装跨平台的安防应用，所以很多厂家相继推出了自己基于浏览器版本的安防系统，当然也包括了自己的业务应用，为了适应浏览器的应用，不同厂家有不同实现方法。

（1）ActiveX控件（OCX控件）

这种控件是微软的推出是基于其windows应用的一种com组件，可以应用到IE浏览器、桌面应用、word、excel开发或基于windows平台开发其他语言的应用中（如c\#)，对于自身windows平台的跨应用部署有很大优势，基于C/C++开发的厂家来说，从传统桌面应用转浏览器播放投入成本较少，只需将自家桌面应用稍作改动即可开发出自己的OCX控件，完成从桌面应用到浏览器应用的过渡，它有如下特性。

开发语言丰富，微软提供了C++/C\#/VB等多种语言开发OCX控件  
基于windows平台开发，只能应用于windows平台  
可以在windows平台中基于COM接口实现跨服务应用  
对浏览器限定较高，只能应用于IE浏览器（目前已经放弃IE使用edge，使用的还是谷歌内核）  
所有的浏览器使用都必须要安装微软的数字证书，浏览器配置复杂，需要相关证书费用  
无法兼容基于浏览器的视频相关协议如HLS、RTMP、webrtc等  
（2）RTSP协议播放器

rtsp是基于tcp/ip的握手协议，rtsp指令走tcp协议，数据包可以走基于udp的rtp打包协议或走基于rtsp指令连接的rtp打包协议，当然为了保证数据传输的稳定性，可能需要rtcp控制协议的支持。

浏览器不是操作系统，目前不支持tcp/ip协议，不过与tcp/ip协议对应长连接协议就是 websocket协议，所以网络上基于rtsp协议的播放器，其原理还是基于websocket协议负载rtsp指令或rtp数据包来实现音视频数据的传输，在前端接收到音视频数据之后，在使用ecmascripten（c语言转前端js）实现音视频解码成一帧一帧的图像数据，然后将图片渲染到canvas画布中，实现视频的渲染。

（3）HLS协议播放器

HLS是基于HTTP协议的边下边播放的协议，由于是基于http协议的，所以它是跨浏览器播放的，其通用性非常好，HLS的实现原理是服务器将视频切割成一小段一小段的ts文件，这些ts文件组成一个m3u8格式的商品描述文件，浏览器下载对应的m3u8文件后，根据其中的内容边下载边播放对应的视频文件。针对HLS协议视频播放有两种：第一种是实时播放，第二种是视频点播，如果是视频点播，则一次性将视频切割好并生成m3u8索引文件即可，如果是实时播放文件在由后台边切割边生成对应的m3u8索引文件，只不过该索引文件不生成结束标志即可，浏览器未发现结束标志会不停的请求索引文件和播放ts文件以达到实时点播的目的。

（4）websocket协议

根据上面的分析，我们知道，浏览器要支持握手协议则必须使用websocket进行播放，我们只需要后台将视频解码成图片，然后通过websocket协议将图片数据推送到前端即可，前端通过canvas画布渲染图片即可。这个在我的博客有提及如何实现以及对应demon，欢迎各位查询我的csdn（lixiang987654321）

2、新兴直播行业  
（1）rtmp播放协议

由于flash的强大，往年所有的浏览器都支持flash，我们使用action script即可实现雷同ocx控件的功能，包括设计到系统权限操作的功能，但是自从google带头宣布2021年12月份不在支持flash之后，这一可行方案也变得令人怀疑。由于rtmp是实时播放协议，和rtsp一样其实时性非常好，所以目前来讲依然在很多直播行业广泛应用。它有如下特性：

rtmp是实时点播协议，延迟低，实时性非常好  
rtmp基于flash，要求浏览器必须支持flash插件  
基于tcp协议，音视频同传，不存在丢包问题  
（2）webrtc播放协议

因为基于rtmp直播协议仍然具有浏览器不可跨域的障碍（flash支持、权限限制、跨浏览器），无法正在能满足直播行业的低延时、跨平台、跨浏览器的需求，为了解决视频的采集及播放问题，Google相应推出了webrtc，目前已得到大部分浏览器支持，所以未来webrtc是直播行业的福音。

总的来说，传统安防行业桌面应用向浏览器直播式的应用转变不是偶然，而是必然，是势在必行，技术永远是更新变化适应用户需求的，所以浏览器播放视频是一个硬性需求，是未来的发展趋势。而今天我要介绍的就是如何使用ffmpeg将传统行业的必然支持的rtsp协议视频转切割为ts文件并通过浏览器直接播放出来，而浏览器并不需要安装任何插件以及做任何配置即可实现web端播放实时视频的需求。

二、实现  
liveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

liveWeb支持多种协议(RTSP/RTMP/HLS/HTTP-FLV/WebSocket-FLV/GB28181/HTTP-TS/WebSocket-TS/HTTP-fMP4/WebSocket-fMP4/MP4/WebRTC),支持协议互转。

全面支持H265/H264/AAC/G711/OPUS。

支持WebRTC推流，支持转其他协议

支持WebRTC播放，支持其他协议转WebRTC

支持TWCC rtcp动态调整码率

支持remb/pli/sr/rr rtcp

支持rtp扩展解析

支持GOP缓冲，webrtc播放秒开

支持datachannel

支持webrtc over tcp模式

优秀的nack、jitter buffer算法, 抗丢包能力卓越

支持whip/whep协议

liveweb是一款超低延时(150-200毫秒)、秒启动、无插件web实时视频播放器，h5视频播放器，支持egde、firefox、Chrome、safari等常见浏览器。支持h264、h265、AAC、G711等常见音视频格式。liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。如果大家正在找寻一款供能强大的流媒体播放器，那么liveweb将会是一个不错的选择，我们也欢迎大家的了解和试用![42241af6faa34d71a4f9aafbcaf2a481.webp][]

[42241af6faa34d71a4f9aafbcaf2a481.webp]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5ba54e924f564a05879ea817300e04d7.png