使⽤flv.js+websokect播放rtsp格式视频流
1.问题背景
在最近的项⽬中，涉及到海康接⼊的视频播放的问题，海康这边获取到的视频流是rtsp格式，web端⽬前没有直接可以播放的组件，于是最开始是后端处理了视频流，返回hls格式的m3u8地址，这样⽤videojs插件就可以播放了，但是问题就是处理了的m3u8地址播放效果⾮常差，第⼀次加载时间较长，且播放过程中很卡，尤其是项⽬的界⾯做的是视频监控墙，不⽌⼀个视频，导致没办法看了。想着最好的⽅式还是直接播放rtsp地址，不经过转码。于是问题回到了如何播放rtsp.
2.⽅案的筛选
播放rtsp格式的视频流，⽹上有很多⽅式，除了上述的转m3u8，还有转rtmp的，或者使⽤WebRTC、streamedian、h5stream等，其中webRTC我不太了解，看了⼀下⽂档，也⽐较复杂，就放弃了。然后是streamedian、h5stream这两个，前者是需要收费，另⼀个我看了⽂档，没有可以动态设置rtsp地址的地⽅，只有在配置⽂件⾥写好，这样不符合项⽬的要求，也放弃了，就在纠结到底该怎么办的时候，同事⼤佬提出了⼀个建议，看看⼈家bilibili也有直播，⼈家是怎么做的呢，于是顺⼿搜了⼀下B站直播原理，看到了⼀篇博⽂是说bilibili开发的flv.js，讲述了⾥⾯的⽤法，我看了看，确实算是⼀个⽐较可⾏的⽅法了，于是开⼲起来。
3.实际运⽤
⾸先了解这个⽅案的⼤致流程：1.需要⼀个node服务器处理rtsp流，转为flv流，2.前端安装flv.js显⽰flv视频流。其中第⼀步搭建的服务器实际上是搭建了⼀个websokect服务器，前端通过flv⾥提供的⽅法，通过websokect连接到node服务器，这样flv流就源源不断的送到了前端，虽然这⾥也对rtsp进⾏了处理，但是效果却出奇的好，⽐m3u8格式的效果好太多，基本上3、4s就加载出来了，如果同时加载的视频很多，那么差不多也在5-8s内加载出来了，最多的⼀次12个视频，最后⼀个加载出来⽤了12s左右。总得来说⽐之前m3u8单个都要加载10s左右，视频多了甚⾄加载不出来好太多了。
好了，介绍的话太多了，还是回到如何搭建吧。node搭建的服务器需要配合ffmpeg。所以⾸先安装ffmpeg，这个我在Windows上测试的，直接下载了⼀个压缩包，解压就好，然后是搭建node服务器，将以下package.json直接复制到⽂件⾥，然后npm install就可以得到⼀个服务器环境（前提是已经安装了node哦）。
1 {
2 "name": "ffmpeg-server",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1"
8 },
9 "author": "",
10 "license": "ISC",
11 "devDependencies": {
12 "express": "^4.17.1",
13 "express-ws": "^4.0.0",
14 "ffmpeg": "0.0.4",
15 "fluent-ffmpeg": "^2.1.2",
16 "http": "0.0.0",
17 "websocket-stream": "^5.5.0"
18 }
19 }
接下来是index.js
1var express = require("express");
2var expressWebSocket = require("express-ws");
3var ffmpeg = require("fluent-ffmpeg");
4 ffmpeg.setFfmpegPath("G:/ffmpeg/ffmpeg/ffmpeg-4.3.1-win64-static/bin/ffmpeg");
5var webSocketStream = require("websocket-stream/stream");
6var WebSocket = require("websocket-stream");
7var http = require("http");
8function localServer() {
9 let app = express();
10 app.use(express.static(__dirname));
11 expressWebSocket(app, null, {
12 perMessageDeflate: true
13 });
14 app.ws("/rtsp/:id/", rtspRequestHandle)
15 app.listen(8888);
16 console.log("express listened")
17 }
18function rtspRequestHandle(ws, req) {
19 console.log("rtsp request handle");
20 const stream = webSocketStream(ws, {
21 binary: true,
22 browserBufferTimeout: 1000000
23 }, {
24 browserBufferTimeout: 1000000
25 });
26 let url = req.query.url;
27// console.log("rtsp url:", url);
28// console.log("rtsp params:", req.params);
29try {
30 ffmpeg(url)
前端websocket怎么用31 .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400") // 这⾥可以添加⼀些 RTSP 优化的参数
32 .on("start", function () {
33 console.log(url, "Stream started.");
34 })
35 .on("codecData", function () {
36 console.log(url, "Stream codecData.")
37// 摄像机在线处理
38 })
39 .on("error", function (err) {
40 console.log(url, "An error occured: ", ssage);
41 })
42 .on("end", function () {
43 console.log(url, "Stream end!");
44// 摄像机断线的处理
45 })
46 .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
47 } catch (error) {
48 console.log(error);
49 }
50 }
51 localServer();
⽂件⽬录如下：
然后在backendNode这个⽂件下执⾏： node index.js就完成了服务器的搭建。
接下来是前端⽂件的写法：
前端也要先安装flv.js npm install flv.js -S -D
然后就是建⼀个⽂件显⽰视频：<template> <div class="video-box" v-loading="loading"> <video class="demo-video" ref="player" muted @dblclick="fullScreen"></video>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
props: {
rtsp: {
type: String,
default: ''
},
id: {
type: [String, Number],
default: ''
}
},
data () {
return {
// id: '1',
player: null,
loading: true
}
},
watch: {
rtsp: {
handler: function (val) {
if (val) {
if (this.player) {
this.player.unload()
this.player.destroy()
this.player = null
this.loading = true
}
this.$nextTick(() => {
this.playVideo()
})
}
},
immediate: true
}
},
methods: {
fullScreen () {
if (this.$questFullScreen) {
this.$questFullScreen()
} else if (this.$RequestFullScreen) {
this.$RequestFullScreen()
} else if (this.$refs.player.webkitRequestFullScreen) {
this.$refs.player.webkitRequestFullScreen()
}
},
playVideo () {
const time1 = new Date().getTime()
if (flvjs.isSupported()) {
let video = this.$refs.player
if (video) {
this.player = atePlayer({
type: 'flv',
isLive: true,
url: `ws://localhost:8888/rtsp/${this.id}/?url=${sp}`
})
this.player.attachMediaElement(video)
try {
this.player.load()
this.player.play().then(() => {
console.log(new Date().getTime() - time1)
this.loading = false
})
} catch (error) {
console.log(error)
}
}
}
}
},
beforeDestroy () {
if (this.player) {
this.player.unload()
this.player.destroy()
this.player = null
}
}
}
</script>
<style lang="scss">
.video-box {
width: 100%;
height: 100%;
video {
width: 100%;
height: 100%;
object-fit: fill;
}
/
/播放按钮
video::-webkit-media-controls-play-button {
display: none;
}
video::-webkit-media-controls-current-time-display {
display: none;
}
video::-webkit-media-controls-timeline {
display: none;
}
}
</style>
因为我是写成的⼀个组件，所以我的rtsp地址是传进来的。
这样就可以播放rtsp了，效果真的不错。
4，其他问题
出了上述的流程，还有其他的问题，⽐如这个是在本地搭建的，不存在代理的问题，如果要发布到线上环境，则node服务器肯定也是要搭建到线上的服务器的（线上搭建和之前的⽅式差不多，就是看服务器是Linux还是Windows了，两者区别在于ffmpeg的安装，其他index.js 是⼀样的），就会涉及到代理websokect的问题。因为之前没有代理过，所以也有些坑。
1.⾸先是本地代理
⽤vue+axios，通常代理http的都是直接在配置⽂件⾥写的，代理websokect的需要在此基础上加上ws:true字段，如下：
'/streamWs/**':{ //
target: 'ws:xxx',
secure: false,
changeOrigin: false,
pathRewrite: { '^/streamWs': '' },
ws: true//开启ws, 如果是http代理此处可以不⽤设置
}
这个地⽅都不难，主要还是在调⽤代理的地⽅，需要这样写：
this.player = atePlayer({
type: 'flv',
isLive: true,
// url: `ws://localhost:8888/rtsp/${this.id}/?url=${sp}`
// 代理ws需要写上ws://${location.host}，然后再是代理前缀/streamWs
url: `ws://${location.host}/streamWs/rtsp/${this.id}/?url=${sp}`
})
通过这样设置，就可以成功代理了。
2.然后是线上的代理
线上我⽤的是nginx代理，重点在于两个地⽅：
第⼀个地⽅是http下⾯加的东西：
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
第⼆个是在前端页⾯的端⼝下server下加的代理
location /streamWs/ {
# http地址是node服务器的地址
proxy_pass http:xxx;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#重点是下⾯这三条，写上了才是代理ws
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
好了，经过这⼀系列的配置，就可以在线上环境看到了。
------------------------------------------------------------------分割线，我⼜来了，还是视频的问题，这次优化了，提出了新的⽅案----------------------------------------------------------------------------------------------------------------------
原因在于，⽤户⽅⼀直抱怨视频不能播放h265格式的视频，然后⼜说延时⾼，rtsp都被嫌弃延时⾼了，真的是没办法了，⼀直拖着没去解决，正好公司有个后端⼤佬有空，就⼀起解决这个问题。前端要改的地⽅不多，就是将url从ws变为了xxxxx.flv格式的，其他的处理都在后端了，包括搭建了⼀个流服务器，将h265格式的视频转码为h264(再也不⽤⿇烦甲⽅去改视频流格式了)，然后推送给前端，使⽤的还是flv.js。值得⼀提的是，将rtsp换成了http-flv之后，加载视频的速度简直飞起了，基本上秒开了。之前我打印过时间戳，差不多⽹速好的时候，播放rtsp的视频，也要花费1000ms以上，这个直接就是250ms左右，看着真的是赏⼼悦⽬呀！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论