前端视频流的解决方案（RTSP、RTMP、HLS、FLV）

1.RTSP

RTSP流不能直接在浏览器播放，所以需要转码

2.RTSP 转 RTMP

RTMP的流需要在浏览器中用flash播放器，但是谷歌已经在2020年底带头不支持flash插件了

3.RTSP 转 HLS

HLS：HTTP Live Streaming，是由苹果公司提出的基于HTT的流媒体网络传输协议。他的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从不同的备用源中以不同的速率下载同样的资源。在开始一个流媒体会话时，客户端会下载一个包含源数据的extended M3U（m3u8）playlist文件，用于寻找可用的媒体流。

HLS的出现是为了解决苹果原生环境中的流媒体播放。在苹果的相关系统上Safari浏览器是可以直接打开m3u8地址的。在别的系统上需要借助h5的video标签，前端在处理HLS的视频流时，引入了video.js。【后端将视频转成HLS流，以m3u8后缀结尾。通过浏览器用video.js可以正常播放，但是发现和原视频存在5秒左右的延迟，不符合项目的实时性需求，所以有实时视频的需求不建议用HLS流播放。 】

优点：客户端支持简单，只需要支持HTTP请求即可，方便通过防火墙或者代理服务器。因为他会将数据分割成多个片段，所以客户端可以很快的实现码率切换，以适应不同的带宽，主要应用于手机端。

缺点：因其自己的实现方式，需要多次请求，HLS存在延迟的延迟比别的协议会高，不适用于直播，HLS对于网络质量的要求比较高。

4.RTSP 转 FLV （采用）

FLV：FLASH VIDEO,基于flash来播放，是目前增长最快、最为广泛的视频传播格式。

优点: flv用http服务器即可实现传统的流媒体服务器的功能。flv文件体积小，视频质量良好。众多视频网站均采用此视频格式。

缺点：要基于flash插件，当浏览器未安插或禁用flash插件，就不能播放。

//flv
this.videoPlayer = Videojs(document.querySelector('#mmiid'),{autoplay: 'muted',//自动播放controls: true,//用户可以与之交互的控件loop:true,//视频一结束就重新开始muted:false,//默认情况下将使所有音频静音aspectRatio:"16:9",//显示比率fullscreen:{options: {navigationUI: 'hide'}},techOrder: ["html5", "flvjs"],// 兼容顺序flvjs: {mediaDataSource: {isLive: false,cors: true,withCredentials: false}},sources: [{ src: urlList[0].url, type: "video/x-flv" }]})

vue+video.js实现前端视频流（hls、MP4、flv）
前端VUE播放RTSP、RTMP、HLS、FLV视频流的解决方案
前端如何解决视频流

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！