使用ffmpeg+flv.js + websokect播放rtsp格式视频流
对于rtsp的视频流网上有很多种的解决方案，但是大的趋势还是利用ffmpeg的工具进行rtsp的视频解析进行一个推流，我最终选择bilibili开源的flv.js，代码十分的简单全部都在底层封装好了。实现的方式也比较容易理解，ffmpeg进行rtsp的视频流解析转为flv视频流通过websocket通信把flv的流推给前端。其中两个地方比较坑需要注意linux搭建ffmpeg比较麻烦，一定要安装编译后的版本，不能取源码。
一、搭建服务端
1、安装node
服务端主要是用node运行解析rtsp转为flv的服务。安装过程并不多说了。
2、安装ffmpeg
- Linux：这里由于不是我安装的，后续补充...................
- windows：网盘连接：提取码8888 直接解压这个文件，配置环境变量 Path，加入D:\flvWbsockectPlayRESP\ffmpeg\bin，在cmd中输入ffmpeg出现版本信息等说明配置成功了
3、搭建后端服务
找一个文件夹创建一个package.json文件，将下面代码粘入
{
"name": "ffmpeg-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"express": "^4.17.1",
"express-ws": "^4.0.0",
"ffmpeg": "0.0.4",
"fluent-ffmpeg": "^2.1.2",
"http": "0.0.0",
"websocket-stream": "^5.5.0"
}
}然后再此文件夹运行upm install，服务器的环境搭建好了，在此文件夹创建一个index.js文件把下面代码粘入
var express = require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("D:/Gsafety/project-demo/flvWbsockectPlayRESP/ffmpeg/bin/ffmpeg");// 这里的目录指向先前安装好的ffmpeg
var webSocketStream = require("websocket-stream/stream");
var WebSocket = require("websocket-stream");
var http = require("http");
function localServer() {
let app = express();
app.use(express.static(__dirname));
expressWebSocket(app, null, {
perMessageDeflate: true
});
app.ws("/rtsp/:id/", rtspRequestHandle)
app.listen(8888);//进行websocket通信的服务端端口
console.log("express listened")
}
function rtspRequestHandle(ws, req) {
console.log("rtsp request handle");
const stream = webSocketStream(ws, {
binary: true,
browserBufferTimeout: 1000000
}, {
browserBufferTimeout: 1000000
});
let url = req.query.url;
console.log("rtsp url:", url);
console.log("rtsp params:", req.params);
try {
ffmpeg(url)
.addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400") // 这里可以添加一些 RTSP 优化的参数
.on("start", function () {
console.log(url, "Stream started.");
})
.on("codecData", function () {
console.log(url, "Stream codecData.")// 摄像机在线处理
})
.on("error", function (err) {
console.log(url, "An error occured: ", err.message);
})
.on("end", function () {
console.log(url, "Stream end!");// 摄像机断线的处理
})
.outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
} catch (error) {
console.log(error);
}
}
localServer();在此文件cmd的窗口运行node.js，如果打印日志出现express listened，这样服务端就搭建成功了
【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~
二、前端搭建
安装flv.js依赖
定义一个video来播放flv视频流的容器。
- html代码：
ts代码：
private id='1';//websokect的通信id（自己定义一个，一个地址对应一个id）
private rtsp= 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov';//播放rtsp的地址
private player:any= null;//播放的对象
这里我在mounted的钩子函数中进行的播放操作
if (flvjs.isSupported()) {
let video = this.$refs.player;
let videoUrl=publishObjectPath.value.videoUrl;
if (video) {
this.player = flvjs.createPlayer({
type: "flv",
isLive: true,
url: videoUrl+`/rtsp/${this.id}/?url=${this.rtsp}`//这里的videoUrl我在json配置文件中进行配置连接的地址
});
this.player.attachMediaElement(video);
try {
this.player.load();
this.player.play(); // 他还有很多的函数可以看一下flv.js的官方文档
} catch (error) {
console.log(error);
};
}
}
"videoUrl": "ws://172.20.0.188:8998/streamWs" //streamWs是通过nginx进行代理 三、搭建到互联网环境上，不在同一个服务器和不同网段需要使用nginx代理
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 8998;
server_name localhost;
location /streamWs/ {
proxy_pass http://172.20.0.34:8888/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
}在配置proxy_pass的时候后面不加/，会将代理的字段再拼接上去这样你的接口是通的，但是不能进行通信，加上/才会把代理字段替换代理成你要代理的地址。这样线上就可以看到效果啦！
原文链接 使用ffmpeg+flv.js + websokect播放rtsp格式视频流