关于Electron播放FFpmeg转码视频延时的问题

Question

Electron项目中需要试试播放摄像头的视频画面
摄像头是海康的网络摄像头
通过RTSP协议拿到实时的视频流
rtsp://admin:[email protected]/main/Channels/
通过VLC播放器播放的时候会出现3s左右的延迟

然后在项目中使用的时在Electron中通过主进程创建一个websocket服务通过fluent-ffmpeg解码rtsp视频转成flv流推送给渲染进程，

import * as express from 'express'
import * as expressWebSocket from 'express-ws'
import ffmpeg from 'fluent-ffmpeg'
import webSocketStream from 'websocket-stream/stream'
const path = require('path')

let ffmpegPath
if (process.env.NODE_ENV === 'development') {
  ffmpegPath = path.join(__static, 'ffmpeg', 'bin', 'ffmpeg.exe')
} else {
  ffmpegPath = path.join(process.cwd(), 'ffmpeg', 'bin', 'ffmpeg.exe')
}
ffmpeg.setFfmpegPath(ffmpegPath)

// 启动视频转码服务服务
function videoServer () {
  let app = express()
  app.use(express.static(__dirname))
  expressWebSocket(app, null, {
    perMessageDeflate: true
  })
  app.ws('/rtsp/', rtspRequestHandle)
  app.listen(8888)
  console.log('创建监听服务')
}

// RTSP 转码方法
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)
  try {
    ffmpeg(url)
      .addInputOption('-rtsp_transport', 'tcp', '-buffer_size', '102400') // 这里可以添加一些 RTSP 优化的参数
      .outputOptions([
        '-fflags',
        'nobuffer',
        '-tune',
        'zerolatency'
      ])
      .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)
  }
}

export default videoServer

渲染进程通过flv.js解析视频流播放视频

<template>
  <div class="video">
    <video class="video-box" ref="player"></video>
  </div>
</template>

<script>
  import flvjs from 'flv.js'
  export default {
    name: 'videopage',
    props: {
      rtsp: String
    },
    data () {
      return {
        player: null
      }
    },
    mounted () {
      console.log(flvjs.isSupported())
      if (flvjs.isSupported()) {
        let video = this.$refs.player
        console.log(video)
        if (video) {
          this.player = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            url: 'ws://localhost:8888/rtsp/?url=' + this.rtsp
          }, {
            enableStashBuffer: true
          })
          console.log(this.player)
          this.player.attachMediaElement(video)
          try {
            this.player.load()
            this.player.play()
          } catch (error) {
            console.log(error)
          }
        }
      }
    },
    methods: {
      getCurrentFrame () {
        let video = this.$refs.player
        let scale = 1
        let canvas = document.createElement('canvas')
        canvas.width = video.videoWidth * scale
        canvas.height = video.videoHeight * scale
        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
        return canvas.toDataURL('image/png')
      }
    },
    beforeDestroy () {
      this.player && this.player.destory && this.player.destory()
    }
  }
</script>

<style lang="scss">
.video {
  width: 100%;
  height: 100%;
  font-size: 0;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>

然后播放的时候会出现 3s左右的延迟 而且延迟会随着播放时间变大
到后期会出现10几分钟的延迟

请问一下有什么办法能够控制这个延迟时间

或者有其他的解码方案可以使用的么

能够支持electron的解决方案

Answer 1

等待大神解答