JSMpeg 是用 JavaScript 编写的视频播放器。它包括 MPEG-TS 解码器，MPEG 1 视频和 MP2 音频解码器，WebGL 和 Canvas2D 渲染器和 WebAudio 声音输出。JSMpeg 可以通过 Ajax 加载静态视频，并允许通过 WebSocket 提供低延迟流(~50 ms)。
JSMpeg 可以在 iPhone5S 上以 30 fps 的速度解码 720 p 视频，在任何现代浏览器(Chrome、Firefox、Safari、Edge)中都可以使用，而且压缩速度只有 20 kb。
我的项目需求是播放多个直播视频，要求低延迟，最后选型 jsmpeg+websocket 播放rtsp协议，现在我的案例可以保证你在前端实现直播视频播放，希望能给你带来思路和帮助。
1、我的需求、直播协议介绍、技术选型详细过程等请看：
https://blog.csdn.net/qq_40015157/article/details/111192699
2、使用VLC把MP4转成rtsp协议视频成功播放详细步骤， 如果你需要rtsp视频地址测试请看：
https://blog.csdn.net/qq_40015157/article/details/111238330
3、canvas绘制视频小案例
https://blog.csdn.net/qq_40015157/article/details/111208048
4、video.js 播放hls直播视频（.m3u8）（暂时只展示了一个直播视频）
https://blog.csdn.net/qq_40015157/article/details/102611895
一、效果图
二、案例目录截图：
三、这个案例是我在前端使用node.js模拟播放，真实项目环境后台是根据这个案例，在后台ngnix配置好的，在后台执行node，所以我前端只需要拿到ws的地址就可以了。这个案例是两个视频源分别有自己的地址，我们项目最后后台是把多个信号源拼成了一个信号源，所以我只需要请求一个地址，根据坐标来截取每个视频。我只提供了思路，后台代码我也不会写，哈哈。现在我的案例可以保证你在前端实现直播视频播放，以下是操作步骤：
1、项目打开一个terminal 或者 cmd 到项目目录下 执行命令：
node websocket.js supersecret 8081 8082
2、再打开一个terminal 执行命令，第一个视频，我的项目使用的是rtsp协议，现在我以本地桌面上的MP4视频为例：
ffmpeg -re -stream_loop -1 -i "C:\Users\Administration\Desktop\oceans.mp4" -q 0 -f mpegts -codec:v mpeg1video -s 320x270 http://127.0.0.1:8081/supersecret/live1
3、再打开一个terminal 执行命令：
ffmpeg -re -stream_loop -1 -i "C:\Users\Administration\Desktop\m1.mp4" -q 0 -f mpegts -codec:v mpeg1video -s 320x270 http://127.0.0.1:8081/supersecret/live2
4、打开index.html 就可以看到效果了。（如一效果图）
四、项目下载地址：https://download.csdn.net/download/qq_40015157/14926414