通过node调用, ws方式, 输出的是MPEG-TS格式的视频流; 接着通过JSMpeg喂给canvas;
缺点 : 只能同时播放一路视频
优点 : 低延时,1s
改进 : 可以自行二次封装,支持多路播放;
一种基于Media Source Extensions（简称MSE）技术实现的html5实时视频直播方案。Node.js调用ffmpeg包装rtsp流，然后通过socket.io转发包装后的流，前端html5获取流数据并通过MSE把流一点一点喂给video标签进行视频播放。能够支持谷歌浏览器、火狐浏览器、Edge浏览器、安卓原生浏览器，不支持IE。高性能，支持同时转发多路视频，占用硬件资源不多。低延时，延时1s。
缺点 : 在视频播放开始时, 是将视频流喂给video标签, video标签会有视频缓冲区,会造成每次打开视频时都会有加载等待时间
优点 : 支持多路多路视频同时播放。
优化 : 如果项目对视频初始加载速度无感的话, 可以直接使用该开源项目。
基于以上两种库的实现，进一步的去封装; 使用node去执行,前端使用JSMpeg播放
实现功能 ： 1.支持同时多路播放视频 ；2.低延迟(1s)，使用canvas绘制视频 ； 3. 视频秒加载 (同一个rtsp视频在第二次打开时是秒开,只有第一次打开略微等待1s); 缺点 : 对于画质要求非常高的项目不是很适用 优点 : 支持多路播放 , 低延迟, 视频秒开 缺点 : 画质需要提升
安装 npm i ws-rtsp
// node /app.js
var http = require('http');
var rtsp = require('ws-rtsp');
var server = http.createServer();
new rtsp.StreamingMediaServer(server);
server.listen(8089);
index.html
<html>
<body>
<button onclick="player()">播放</button>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript" src="./js/jsmpeg.min.js"></script>
<script type="text/javascript">
function player() {
new JSMpeg.Player('ws://localhost:8089/flv?url=cnRzcDovL2FkbWluOjEyMzQ1NmFhQDE3Mi4xNi4xLjcwL1N0cmVhbWluZy9DaGFubmVscy8xMDE=&channelid=2', {
canvas: document.getElementById('canvas'),
})
}
</script>
</html>