关于Electron播放FFpmeg转码视频延时的问题
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论