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

发布于 2022-09-12 03:51:55 字数 3854 浏览 43 评论 0

Electron项目中需要试试播放摄像头的视频画面
摄像头是海康的网络摄像头
通过RTSP协议拿到实时的视频流
rtsp://admin:admin@192.168.0.253/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的解决方案

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文