下载RTSP服务器
下载rtsp-simple-server,现在叫做mediamtx,我用了和博文一样的版本,所以下载的还是rtsp-simle-server而不是现在的mediamtx
下载ffmpeg
然后将下载好的ffmpeg和rtsp放到同一个文件夹下
如图
推流
首先cd进入安装目录
E:
cd E:\Project\LabCockpit\USB摄像头推流测试
打开rtsp服务器
rtsp-simple-server.exe
#或者在linux服务器上运行在后台
nohup mediamtx &
再打开一个新的终端,同样cd进入安装目录
E:
cd E:\Project\LabCockpit\USB摄像头推流测试
查看自己的摄像头驱动名称
ffmpeg -list_devices true -f dshow -i dummy
查询到自己的摄像头设备名称为“H65 USB CAMERA”
输入指令开始推流,在指令最后可以修改url,在video处修改为你的摄像头设备
ffmpeg -f dshow -i video="H65 USB CAMERA" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/video
推流成功
拉流
下载并安装VLC,选中左上角媒体>打开网络串流,输入URL
点击播放,获取到摄像头影像
多摄像头
当连接入两个摄像头时
再次输入查看摄像头设备
ffmpeg -list_devices true -f dshow -i dummy
发现有两个H65 USB CAMERA
,这个时候推流就要用摄像头的别名,下面的Alternative name
ffmpeg -f dshow -i video="@device_pnp_\\?\usb#vid_0c45&pid_6368&mi_00#6&ba256cb&0&0000#{65e8773d-8f56-11d0-a3b9-00a0c9223196}\global" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/video1
ffmpeg -f dshow -i video="@device_pnp_\\?\usb#vid_0c45&pid_6368&mi_00#6&3483702d&0&0000#{65e8773d-8f56-11d0-a3b9-00a0c9223196}\global" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/video2
将video改成摄像头别名,然后将最后的URL改成video1和video2即可
rstp流在浏览器播放
现在的浏览器不支持rstp格式的视频流,在网上查询解决方式,最终方案是经转码后视频流通过websocket传送给客户端,再将视频流解码成图片通过canvas渲染出来,参考文章
首先在ubuntu服务器上安装node和npm
sudo apt install node
sudo apt install npm
然后新建一个文件夹rtsp-to-web
mkdir rtsp-to-web
cd rtsp-to-web
在里面安装node-rtsp-stream
npm install node-rtsp-stream -S
随后创建app.js并写入内容
touch app.js
const stream = require('node-rtsp-stream')
new stream({
name: 'video-stream',
streamUrl: 'rtsp://114.214.236.207:8554/video1',//rtsp地址
wsPort: 9999,//端口号
ffmpegOptions: {
'-stats': '',
'-r': 30 ,//视频帧数
'-s': '1920*1080' //视频分辨率
}
})
随后启动服务
node app.js
服务启动成功
随后在本地任意处通过git命令下载jsmpeg.min.js
git clone https://github.com/phoboslab/jsmpeg.git
编写测试界面,并把jsmpeg.min.js复制到同一目录下
<!DOCTYPE >
<html>
<head>
<script src="./jsmpeg.min.js"></script>
<style>
#video{
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<canvas id="video"></canvas>
<button onclick="onPlay()">播放</button>
<button onclick="onPause()">暂停</button>
<button onclick="onStop()">停止</button>
</body>
<script>
var canvas = document.getElementById("video");
var url = "ws://114.214.236.207:9999";//node服务ip+端口号,本机node服务默认127.0.0.1
var player = new JSMpeg.Player(url, { canvas });
//开始播放
function onPlay() {
player.play();
}
//暂停播放
function onPause() {
player.pause();
}
//停止播放
function onStop() {
player.stop();
}
</script>
</html>
打开index.html,得到如下界面
由于是晚上,1楼实验室太黑了,但隐隐约约还是能看出来有图像的,rtsp流播放成功