js前端实现单个或多个直播视频播放方法总结hls，rtsp

因为项目需要前端播放多个直播视频同时在pc端浏览器和移动端（android/ios浏览器）可以播放（静音），分辨率没要求，但要求实时性好，并随意选择直播列表里的直播视频，在右侧可以画出相应的直播视频窗口（数量不限，我想绘画出来的视频不能再用直播视频了，硬件和网络要求太高了，页面会卡死，于是使用canvas绘制视频），之前没有做过直播视频，先查找资料并写各种例子总结最终找一个相对较好的方法实现，记录如下：

一、互联网网络流媒体简介

　　1、HTTP stream是各家自己定义的http流，应用于国内点播视频网站。HTTP用于点播，本质上还是文件分发，实时性差。

       2、HLS是Apple公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，，拥有性能高、完美支持 iOS等优势，可支持流媒体的直播和点播，主要应用在 iOS 系统，为 iOS 设备（如 iPhone、iPad）提供音视频直播和点播方案。

HLS相比于 RTMP 协议，HLS 无需在移动端安装 APP，同时兼容HTML5，因此在移动直播的传播和体验上都拥有巨大的优势。不过HLS 的实时性较差，业界的平均直播延时达在10s ~35s。它会在服务器端将流媒体数据切割成连续的时长较短的 ts 小文件，并通过 M3U8 索引文件按序访问 ts 文件。客户端只要不停的按序播放从服务器获取到的文件，从而实现播放音视频。

HLS 的优势：

Apple 的全系列产品支持：由于 HLS 是苹果提出的，所以在 Apple 的全系列产品包括 iPhone、 iPad、safari 都不需要安装任何插件就可以原生支持播放 HLS， 现在 Android 也加入了对 HLS 的支持。穿透防火墙。基于 HTTP/80 传输，有效避免防火墙拦截

性能高。通过 HTTP 传输， 支持网络分发，CDN 支持良好，且自带多码率自适应，Apple 在提出 HLS 时，就已经考虑了码流自适应的问题。

HLS 的劣势：

实时性差，延迟高。HLS 的延迟基本在 10s+ 以上

文件碎片。特性的双刃剑，ts 切片较小，会造成海量小文件，对存储和缓存都有一定的挑战

       3、RTMP是实时消息传输协议，Real Time Messaging Protocol，是 Adobe Systems 公司为 Flash 播放器和服务器之间音频、视频和数据传输开发的开放协议。协议基于 TCP，是一个协议族，包括 RTMP 基本协议及 RTMPT/RTMPS/RTMPE 等多种变种。RTMP 是一种设计用来进行实时数据通信的网络协议，主要用来在 Flash/AIR 平台和支持RTMP协议的流媒体/交互服务器之间进行音视频和数据通信。

RTMP 是互联网 TCP/IP 五层体系结构中应用层的协议，本质上是流协议，主要优势就是实时性高，基本可将直播延时控制在3秒以内、稳定性高，因此广泛应用于低延时直播。主要用于直播应用，对实时性有一定要求。

在直播应用中，RTMP 和 HLS 是两种较为成熟且广泛应用的流媒体协议，基本上可以覆盖所有客户端。　

RTMP协议一般传输的是flv，f4v格式流，RTSP协议一般传输的是ts,mp4格式的流。HTTP没有特定的流。

RTMP对底层的优化比其它协议更加优秀，同时它 Adobe Flash 支持好，基本上所有的编码器（摄像头之类）都支持 RTMP 输出。现在 PC 市场巨大，PC 主要是 Windows，Windows 的浏览器基本上都支持 Flash。它也有不足的地方。一方面是它是基于 TCP 传输，非公共端口，可能会被防火墙阻拦；另一方面，也是比较坑的一方面是 RTMP 为 Adobe 私有协议，很多设备无法播放，特别是在 iOS 端，需要使用第三方解码器才能播放。

      4、RTSP（实时流媒体协议），是由Real network 和 Netscape共同提出的如何有效地在IP网络上传输流媒体数据的应用层协议。

浏览器不支持 现不支持rtsp，rtsp转成rtmp和hls来实现跨平台播放 延迟3-5秒

使用插件也得转成.flv或者 websoket ws： ws格式

     5、FLV (Flash Video) 是 Adobe 公司推出的另一种视频格式，是一种在网络上传输的流媒体数据存储容器格式。其格式相对简单轻量，不需要很大的媒体头部信息。整个 FLV 由 The FLV Header, The FLV Body 以及其它 Tag 组成。因此加载速度极快。采用 FLV 格式封装的文件后缀为 .flv。

二、下面是我查找前端实现直播视频的一些方案，包括插件，我需要对比并选出同时兼任pc浏览器和移动端（android/ios 谷歌浏览器）并且支持播放多个直播视频，而且要求实时性，并且需要使用canvas绘制视频的。你需求要求不高的话可以选择对应播放方案。

以下是我结合协议和插件写出案例后对比列出的一些总结（记录和写项目的时间相差较长也许有出入，大家可以根据实际情况测试。我会慢慢整理把使用的插件案例放在下方链接，插件案例也可以自己搜索）：

1、HLS   videojs

pc: 直播视频支持

ios: 直播视频支持，canvas绘图支持，延迟高

android：直播视频只有谷歌支持，canvas绘图不支持，延迟高

2、rtsp  jsmpeg+websocket     

ws://192.168.1.34:8082/live2  jsmpeg插件

ios：直播视频支持，canvas绘图支持，低延迟，播放时长累积，最多只能开8个直播视频

android：直播视频支持，canvas绘图支持，低延迟，播放时长累积，最多只能开8个直播视频

rtsp实时最好rtsp jsmpeg PC支持16个，ios最多8个，而且不同步 在苹果和性能低的安卓中卡顿严重，占流量

3、HDL（HTTP-FLV ）  flv.js

ios：直播视频不支持 。m3u8 的可以播放

android： .flv文件 直播视频只有谷歌支持，canvas绘图支持，延迟低

pc上使用flvjs 可以不错

flv.js受到 Media Source Extensions API的限制，不兼容IOS。

哔哩哔哩在移动端h5页面上也是使用的hls

flv.js 和 video.js 播放.m3u8 的文件，ios 和 android 是一样的，ios 可以播放画视频，但是android 的不能画m3u8的并且pc不支持。

4、RTMP flash 不支持

videojs + flash.js 谷歌已被屏蔽，需要手动打开flash

rtmp 移动端应该不支持flash 需要flash支持，html不支持

5、ijkplayer

一个开源库，基于ffmpeg bilibili 安卓IikMediaPlayer ijkplayer是一个基于FFmpeg的轻量级Android/iOS视频播放器 flv.js pc

6、EasyPlayer.js

集 rtmp, hls, flv, websocket 于一身的网页直播/点播播放器, 使用简单, 功能强大

EasyPlayer & EasyPlayerPro是由EasyDarwin团队开发和维护的一个完善的流媒体播放器项目，

目前支持Windows(支持多窗口、包含ActiveX，npAPI Web插件)、Android平台，iOS平台，

视频支持H.264，H.265，MPEG4，MJPEG，

音频支持G711A，G711U，G726，AAC，

支持RTSP over TCP/UDP、RTMP、HTTP、HLS等多种协议，支持硬解码，

pc网页测试：最多8个，严重卡顿

不能显示rtmp。flash已被屏蔽 ，http：//rtsp不能播放

webSocket ws://192.168.1.34:8082/live2 可以播放

android播放4个，卡顿

9、python搭建flask服务器播放rtsp、rtmp流媒体

https://www.cnblogs.com/FHC1994/p/11724484.html

有延迟问题 img 都可以播放多个

三、自身项目总结

最后项目经历三个版本

1、第一版本前端使用video.js 播放 .m3u8 的直播视频。可以播放多个，pc 和 移动端 都可以播放，但是多个视频都在发http请求切片数据，视频源越多，页面会越卡，pc端还算流畅，移动端卡一点（页面使用swiper 切换 视频源，我已经进行了优化，当前显示的视频发请求，例如页面显示5个视频，swiper 箭头切换后，看不到的视频就不发请求）。重点是我们要求实时性，pc端效果比较好，还要达到5s延迟，移动端延迟更高，项目使用看一段时间后进行优化。

2、第二版本前端使用的是jsmpeg+websocket  播放 rtsp 的直播视频。rtsp实时性最好，但是不能播放太多视频源，我测试的是pc 最多16个，移动8个就已经卡顿了，所以想用的话我们的解决方案是后端使用nodejs 把 rtsp协议的视频转成了 ws： 格式

ffmpeg -i "你的rtsp" -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret/live1

node websocket.js supersecret 8081 8082

'ws://192.168.0.59:9082/live1'

前端使用jsmpeg插件进行播放，实时性好，延迟1s左右。至于多视频的问题，后台把多个视频源拼接到了一个地址上，就是我只需要访问一个地址就可以拿到所有的视频源，然后在根据坐标来进行选择其中的视频源，这样既保证了实时性，又可以优化请求播放多个视频源。

3、第三版本使用MJPG-Stream，前端只需要把地址放到 img 标签里 即可，实时性好，清晰度相对好一些。2、3版本 都可以。

四、相关案例

1、video.js 播放hls直播视频（.m3u8）（暂时只展示了一个直播视频）

video.js 播放hls直播视频（.m3u8）谷歌正常播放示例（亲测有效附示例代码）_zcc的博客-CSDN博客

2、jsmpeg+websocket 播放 rtsp 实现低延迟播放直播视频（单个，多个）

https://blog.csdn.net/qq_40015157/article/details/113057166

3、使用VLC把MP4转成rtsp协议视频成功播放详细步骤，trsp地址可以用来当项目中的测试地址。

使用VLC把MP4转成rtsp协议视频成功播放详细步骤_zcc的博客-CSDN博客

4、canvas绘制视频小案例 

html5的video自动播放视频（静音），canvas绘制视频案例代码_zcc的博客-CSDN博客

5、MJPG-Stream

前端 js 使用 MJPG-Streamer 播放直播视频_zcc的博客-CSDN博客

后续代码整理中... 如果有出入的地方，请指出，勿喷，谢谢。