html5中播放rtsp流实现监控、直播等方案

喜欢ヅ旅行 2023-10-13 13:22 72阅读 0赞

**浏览器网页上播放建筑工地摄像头监控的画面，如工地出入口通道画面、塔吊可视化，并且可兼容不同型号的摄像头设备**。  
由于摄像头大多都是通过 RTSP 协议传输视频流的，而HTML 并不标准支持 RTSP 流，经过网上各种查资料并一番讨论后初步拟定如下方案，`node + ffmpeg + websocket + flv.js`：

1.  在node服务中建立websocket
2.  通过fluent-ffmpeg转码，将RTSP 流转为flv格式
3.  前端通过flv.js连接websocket，并对获取的flv格式视频数据进行渲染播放

思路非常清晰，下面开始实践。  
一、node服务搭建  
首先是新建一个项目，配置基础的webpack和babel，并安装websocket相关的两个库 `ws`、`websocket-stream`。  
然后新建一个index.js文件，搭建websocket服务：

import WebSocket from 'ws'
    import webSocketStream from 'websocket-stream/stream'
    
    // 建立WebSocket服务
    const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
    
    // 监听连接
    wss.on('connection', handleConnection)
    
    // 连接时触发事件
    function handleConnection (ws, req) {
      console.log('一个客户端连接进来啦')
    }

如此，一个简单的websocket服务就搭建好了，可以通过配置脚本运行该文件：

"scripts": {
        "start": "nodemon --exec babel-node index.js"
    }

运行 `npm run start`即可启动websocket服务，端口是8888。可在前端通过websocket连接该地址，测试是否连接成功。  
二、ffmpeg转码  
接下来就是重点了，通过npm安装`fluent-ffmpeg`。  
注意，在安装fluent-ffmpeg之前，需要确认你的服务器环境中是否安装了**ffmpeg**这个工具，因为转码的核心其实就是通过 **ffmpeg命令** 转码，需要你通过在命令行里输入 `ffmpeg` 来确认安装。不同的系统安装方法可查阅ffmpeg官网，最终只要确认环境变量里有ffmpeg就好了。这样就可以通过ffmpeg命令来对视频进行各种转码、编码操作。  
而`fluent-ffmpeg`这个库类似语法糖，本质上就是通过nodejs在终端中执行ffmpeg的命令，它将繁琐的ffmpeg命令进行封装，转化成易于理解的链式调用，让我们不需要花费太多的时间去了解ffmpeg命令中琐碎的细节，只需通过封装好的一些显而易见的方法就可以操作视频转码。好了，直接上代码：

import WebSocket from 'ws'
    import webSocketStream from 'websocket-stream/stream'
    import ffmpeg from 'fluent-ffmpeg'
    
    // 建立WebSocket服务
    const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
    
    // 监听连接
    wss.on('connection', handleConnection)
    
    // 连接时触发事件
    function handleConnection (ws, req) {
      // 获取前端请求的流地址（前端websocket连接时后面带上流地址）
      const url = req.url.slice(1)
      // 传入连接的ws客户端 实例化一个流
      const stream = webSocketStream(ws, { binary: true })
      // 通过ffmpeg命令 对实时流进行格式转换 输出flv格式
      const ffmpegCommand = ffmpeg(url)
        .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')
        .on('start', function () { console.log('Stream started.') })
        .on('codecData', function () { console.log('Stream codecData.') })
        .on('error', function (err) {
          console.log('An error occured: ', err.message)
          stream.end()
        })
        .on('end', function () {
          console.log('Stream end!')
          stream.end()
        })
        .outputFormat('flv').videoCodec('copy').noAudio()
    
      stream.on('close', function () {
        ffmpegCommand.kill('SIGKILL')
      })
    
      try {
        // 执行命令 传输到实例流中返回给客户端
        ffmpegCommand.pipe(stream)
      } catch (error) {
        console.log(error)
      }
    }

这样，简单的websocket和流转码服务就搭建好了，运行起来。如果后续投入生产环境时，也可以通过docker进行服务端部署，开机自运行。  
三、前端flv.js获取视频数据并渲染  
服务端搭建完，接下来就等前端连接服务器上的websocket，获取转码后的flv格式数据，然后渲染出来就行了。我们通过flv.js这个库来便捷的实现它。  
flv.js 是B站开源的一款纯js编写的HTML5 Flash Video（FLV）播放器，完全不需要Flash。  
简单的说就是一款可以利用html5的video标签对flv格式数据进行实时播放的js版播放器。  
原理大概就是获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。  
所以从兼容性上说，支持Media Source Extensions的浏览器都是兼容flv.js的。而主流浏览器都是支持的，所以flv.js的兼容性是很不错的。  
  
安装flv.js，在vue中使用：

<template>
      <div class="wrap">
        <video class="video" muted autoplay controls ref="player"></video>
      </div>
    </template>
    
    <script>
    import flvjs from 'flv.js' // 引入flvjs
    export default {
      data () {
        return {
          player: null
        }
      },
      mounted () {
        // 如果浏览器支持flvjs，则执行相应的程序
        if (flvjs.isSupported()) {
          // 准备监控设备流地址
          const url = 'rtsp://admin:1234567@192.168.1.100:554/Streaming/Channels/101?transportmode=unicast'
          // 创建一个flvjs实例
          // 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
          this.player = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: 'ws://localhost:8888/' + url
          })
          
          this.player.on('error', (e) => {
            console.log(e)
          })
          
         // 将实例挂载到video元素上面
          this.player.attachMediaElement(this.$refs.player)
          
          try {
            // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
            this.player.load()
            this.player.play()
          } catch (error) {
            console.log(error)
          }  
        }
      },
      beforeDestroy () {
        // 页面销毁前 关闭flvjs
        this.player.destroy()
      }
    }
    </script>
    
    <style lang="scss" scoped>
      .wrap{
        .video {
          width: 300px;
          height: 300px;
        }
      }
    </style>

以上基本上实现了业务功能需求，运用到生产环境时，可进一步完善代码细节，测试各种异常情况，增加代码健壮性。

如果需要同时打开多个监控或直播画面，前端多实例化几个flvjs，挂载到video元素上即可。demo效果如下：![58f59d5aada84c6dbe5433dc1debe99e.png][]

四、方案总结  
这套方案主要的核心思路就是搭建服务端websocket服务并转码，客户端通过flv.js连接websocket并渲染画面。  
优点有：

1.  不需要flash
2.  可部署在本地环境中
3.  兼容性良好
4.  延迟较低，没有卡顿和花屏，CPU 占用率也不高
5.  服务端和客户端全部js实现，适合大前端路线的开发者来实践

以上就是在html5中播放rtsp流的一个方案，可实现监控、直播、播放视频等业务。

[58f59d5aada84c6dbe5433dc1debe99e.png]: https://img-blog.csdnimg.cn/58f59d5aada84c6dbe5433dc1debe99e.png