注意:浏览器不能直接播放RTSP,必须转换后才能播放。这一点所有的播放都是如此。
- 参考
https://github.com/kyriesent/node-rtsp-stream
GitHub - phoboslab/jsmpeg: MPEG1 Video Decoder in JavaScript
- 相关文件方便下载
https://download.csdn.net/download/quantum7/90459890
- 安装node/npm
- 安装ffmpeg
sudo apt install -y ffmpeg
- 服务器:安装node-rtsp-stream
npm install node-rtsp-stream
- 服务器:准备RTSP流
如果没有RTSP流或访问不到,可以自己模拟一个。具体参考:
Ubuntu搭建RTSP服务器_ubuntu安装rtsp服务器-CSDN博客
- 服务器:启动
文件app.js
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://10.0.2.15:8554/test.264',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
启动
node app.js
- 新建index.html
<!DOCTYPE html>
<html>
<head>
<title>JSMpeg Stream Client</title>
<style type="text/css">
html, body {
background-color: #111;
text-align: center;
}
</style>
</head>
<body>
<canvas id="video-canvas"></canvas>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById('video-canvas');
var url = 'ws://localhost:9999/';
var player = new JSMpeg.Player(url, {canvas: canvas});
</script>
</body>
</html>
- 直接打开index.html,就能播放。
========================================================================
下面是前端方案。
- 前端:搭建服务器
Ubuntu搭建最简单WEB服务器-CSDN博客
- 复制jsmpeg.min.js/index.html
默认工作目录是/var/www/html
- 测试
如果发现不能播放:
检查流是否正常,能否访问(比如在虚拟机中可能就无法访问外部流)。
流是否已结束(此时可以重启服务器,赶紧刷新)。
- 其他方案
node-rtsp-stream
node-media-server
rtsp-streaming-server
fluent-ffmpeg