前端播放RTSP流视频
一、接入监控
开发Java web平台第一次遇到接入监控的需求,品牌大华录像机,提供RTSP视频流,本以为一个IP地址放到video标签就齐活了,没想到现在前端不支持RTSP视频流,需要转到Http视频流给前端。花了大半找到这个不怎么需要开发的方案,链接上面有gitee的demo地址,这个方案的命令是sh,应该是在linux下使用的,不过我在window上已经调试好。
二、jsmpeg+node+ffmpeg转码方案
将用到的软件放到这里:
- node.js 下载的是18.17版本
- ffmpeg 这个版本应该能直接下载https://www.gyan.dev/ffmpeg/builds/packages/ffmpeg-5.1.2-full_build.7z
- https://gitee.com/eightFlying/rtsp-demo.git
ffmpeg下载完需要添加环境变量到Path中。下载的文件目录如下:
├─package-lock.json
│
├─rtsp-video-canvas
│ │ index.html
│ │ play.png
│ │ video.png
│ │
│ ├─css
│ │ style.css
│ │
│ ├─js
│ │ jsmpeg.js
│ │
│ └─plugs
│ jquery.js
│
└─rtsp-video-node
app.js
cmd.js
package-lock.json
package.json
stop.sh
stopall.sh
test.sh
因为node构建的项目,cmd到项目录下运行npm i,安装依赖。
ps :windows上使用命令可生成文件树:
# 把目录树生成到123.txt中
tree js_ffmpeg_websocket_node /F > 123.txt
三、项目配置
流程是app.js后台请求rtsp流,调用ffmpeg解码后用websocket一帧帧图像传到前端,用canvas显示。所以app.js时起一个http服务,一个websocket服务
// 启动静态服务器,端口20000
app.listen(20000, () => {
console.log(`App listening at port 20000`);
});
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: false
})
);
// 后台api
app.post('/startRtspVideo', function (req, res) { // 每次请求都会重新加载
let data = JSON.parse(req.body.urls)
let diff = [] //ipcList中不存在的视频数据
data.forEach(item => {
let res = ipcList.filter(item1 => {
return item1.url === item.url && item1.port === item.port
})
if(res.length === 0){
diff.push(item)
}
})
//
diffList = diff.map((item, index) => {
return {
...item,
//此处判断是不是大华, 按大华的rtsp格式写地址。item参数是前端传过来的
rtsp: item.type !== 'dh' ? (item.url)
: (`rtsp://admin:admin@${item.url}/cam/realmonitor?channel=${item.ch}&subtype=${subtype}`), // parseInt(index + 32)
}
})
…………
})
前端index.html配置
let basUrl = 'localhost';
const rtspData = [
{
url: '192.168.0.1', //rtsp的服务器ip
port: '15000', //websocket端口,回传图片用的
type: 'dh',
coverSrc: '',
ch:1,
canvas: document.getElementById('video-canvas')
},
]
// 调接口把参数传给后台
$.ajax({
url: 'http://' + basUrl + ':20000/startRtspVideo',
type: 'post',
data: {
urls: JSON.stringify(rtspData)
},
success: function (res) {
console.log(res)
},
error: function (err) {
console.log(err)
}
})