使用flv.js + websokect播放rtsp格式视频流

时间:2024-02-21 10:58:18
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
 1 var express =  require("express");
 2 var expressWebSocket = require("express-ws");
 3 var ffmpeg = require("fluent-ffmpeg");
 4 ffmpeg.setFfmpegPath("G:/ffmpeg/ffmpeg/ffmpeg-4.3.1-win64-static/bin/ffmpeg");
 5 var webSocketStream = require("websocket-stream/stream");
 6 var WebSocket = require("websocket-stream");
 7 var http = require("http");
 8 function 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 }
18 function 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);
29     try {
30         ffmpeg(url)
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: ", err.message);
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.$refs.player.requestFullScreen) {
        this.$refs.player.requestFullScreen()
      } else if (this.$refs.player.mozRequestFullScreen) {
        this.$refs.player.mozRequestFullScreen()
      } 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 = flvjs.createPlayer({
            type: \'flv\',
            isLive: true,
            url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`
}) 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 = flvjs.createPlayer({
            type: \'flv\',
            isLive: true,
            // url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`
       // 代理ws需要写上ws://${location.host},然后再是代理前缀/streamWs
url: `ws://${location.host}/streamWs/rtsp/${this.id}/?url=${this.rtsp}` })
通过这样设置,就可以成功代理了。
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变为了http://xxxxx.flv格式的,其他的处理都在后端了,包括搭建了一个流服务器,将h265格式的视频转码为h264(再也不用麻烦甲方去改视频流格式了),然后推送给前端,使用的还是flv.js。值得一提的是,将rtsp换成了http-flv之后,加载视频的速度简直飞起了,基本上秒开了。之前我打印过时间戳,差不多网速好的时候,播放rtsp的视频,也要花费1000ms以上,这个直接就是250ms左右,看着真的是赏心悦目呀!