最近在用 Electron 开发一个客户端 需要集成监控摄像头
摄像头是海康的网络摄像头 通过 RTSP 协议获取到推流视频
通过在 node 主进程创建一个服务 通过 websocket 接受 rtsp 连接
在通过 ffmpeg 转码通过 stream 推到渲染进程
渲染进程通过 flv.js 播放视频
通过转码可以实现 web 页面播放 rtsp 的视频流
但是会有 5~6 秒的延迟 体验很不好
而且 客户端集成 ffmpeg 体积太大了
想了解下 关于 rtsp 转码的方法还有那些 在 node 端可以实现的
主进程创建的 web 服务 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('express listened') } // 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 优化的参数 .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
渲染进程通过播放视频 <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 () { if (flvjs.isSupported()) { let video = this.$refs.player if (video) { this.player = flvjs.createPlayer({ type: 'flv', isLive: true, url: 'ws://localhost:8888/rtsp/?url=' + this.rtsp }) 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.destory() } } </script> <style lang="scss"> .video { width: 100%; height: 100%; font-size: 0; video { width: 100%; height: 100%; } } </style>