2023年6月21日发(作者：)

浏览器播放RTSP、RTMP等⼏种编码格式视频流项⽬需求，需要前端页⾯实时展⽰摄像头采集的视频，视频啊，之前⼀点没接触过，经过⼀番调研、尝试，不得不说，⽹上⽂章真的⼤同⼩异，踩过许多坑，整理如下。⼀、科普⼀下1.流程2.常见视频流格式● RTMP（推流端、拉流端）● RTSP（推流端）● HLS（拉流端）● FLV（拉流端）● 原⽣video标签只⽀持Ogg、MPEG4、WebM三种格式● 默认需要安装flash插件才可以播放● bilibili开源插件可直接转码，vue项⽬直接使⽤○ 推流端视频编码必须是● 把整个流分成⼀个个⼩的基于HTTP的⽂件下载，所以不适⽤直播，延迟会⽐其他协议的⾼，对⽹络质量要求⾼● 前端处理HLS格式视频流，引⼊● 实时传输协议● ⼤屏项⽬⼤部分视频都是通过安装监测摄像头传输展⽰的● 延时低，⼚商直接提供，⽹络负载均衡● 不⽀持移动端，浏览器兼容性差，需要低版本浏览器，且安装插件● 基于TCP，实时性⾼、稳定性⾼，主要⽤于直播● ⼀般是传输的为flv流⼆、代码实现暂不考虑项⽬要求，对于现阶段前端可实现的途径进⾏了具体实现，如下：浏览器+vlc插件ie浏览器安装vlc插件，可直接播放rtsp、rtmp格式的视频，代码如下缺点：需要指定浏览器，安装指定插件vlc插件并不稳定，测试过程中，经常⽆响应2.直接播放flv格式vue在vue项⽬⾥，安装了，可直接播放flv编码格式的视频流3.直接播放hls格式播放4.1 ⽂档：4.2 webrtc可实现的功能特别强⼤，⽹上可参考的资料很少，⽬前尝试的是webrtc-streamer插件，实现了rtsp直接播放本地下载webrtc-streameran安装包，cmd起webrtc服务，命令⾏为：./webrtc-streamerrtsp://172.16.100.36:8554/cv/admin:123，坑是rtsp的地址⼀定要标准，不然⽆法播放rtsp地址不标准对应的展⽰rtsp地址标准后对应代码尝试了rtmp格式，不能播放，没有进⼀步验证错误原因，猜测可能是webrtc-streamer插件本⾝不⽀持rtmp4.3 vue-webrtc调研多⽤于直播类，⽬前未找到直接播放rtsp、rtmp的对应function三、⼩结从⼏种⽅案调研来看，浏览器不⽀持flash插件已成趋势，不建议ie+vlc插件的⽅案，⾄于其他⼏种直接播放的⽅法，看项⽬需求，不过个⼈看法，主流应该是webrtc（ps：代码截图涉及的很多本地测试地址，都是后台⼩哥哥⽤ffmpeg转的

2023年6月21日发(作者：)

浏览器播放RTSP、RTMP等⼏种编码格式视频流项⽬需求，需要前端页⾯实时展⽰摄像头采集的视频，视频啊，之前⼀点没接触过，经过⼀番调研、尝试，不得不说，⽹上⽂章真的⼤同⼩异，踩过许多坑，整理如下。⼀、科普⼀下1.流程2.常见视频流格式● RTMP（推流端、拉流端）● RTSP（推流端）● HLS（拉流端）● FLV（拉流端）● 原⽣video标签只⽀持Ogg、MPEG4、WebM三种格式● 默认需要安装flash插件才可以播放● bilibili开源插件可直接转码，vue项⽬直接使⽤○ 推流端视频编码必须是● 把整个流分成⼀个个⼩的基于HTTP的⽂件下载，所以不适⽤直播，延迟会⽐其他协议的⾼，对⽹络质量要求⾼● 前端处理HLS格式视频流，引⼊● 实时传输协议● ⼤屏项⽬⼤部分视频都是通过安装监测摄像头传输展⽰的● 延时低，⼚商直接提供，⽹络负载均衡● 不⽀持移动端，浏览器兼容性差，需要低版本浏览器，且安装插件● 基于TCP，实时性⾼、稳定性⾼，主要⽤于直播● ⼀般是传输的为flv流⼆、代码实现暂不考虑项⽬要求，对于现阶段前端可实现的途径进⾏了具体实现，如下：浏览器+vlc插件ie浏览器安装vlc插件，可直接播放rtsp、rtmp格式的视频，代码如下缺点：需要指定浏览器，安装指定插件vlc插件并不稳定，测试过程中，经常⽆响应2.直接播放flv格式vue在vue项⽬⾥，安装了，可直接播放flv编码格式的视频流3.直接播放hls格式播放4.1 ⽂档：4.2 webrtc可实现的功能特别强⼤，⽹上可参考的资料很少，⽬前尝试的是webrtc-streamer插件，实现了rtsp直接播放本地下载webrtc-streameran安装包，cmd起webrtc服务，命令⾏为：./webrtc-streamerrtsp://172.16.100.36:8554/cv/admin:123，坑是rtsp的地址⼀定要标准，不然⽆法播放rtsp地址不标准对应的展⽰rtsp地址标准后对应代码尝试了rtmp格式，不能播放，没有进⼀步验证错误原因，猜测可能是webrtc-streamer插件本⾝不⽀持rtmp4.3 vue-webrtc调研多⽤于直播类，⽬前未找到直接播放rtsp、rtmp的对应function三、⼩结从⼏种⽅案调研来看，浏览器不⽀持flash插件已成趋势，不建议ie+vlc插件的⽅案，⾄于其他⼏种直接播放的⽅法，看项⽬需求，不过个⼈看法，主流应该是webrtc（ps：代码截图涉及的很多本地测试地址，都是后台⼩哥哥⽤ffmpeg转的