nodejs将rtsp视频流打上水印后通过websocket发送给前端

网上有把rtsp流通过websocket发送到前端的方法,就是用rtspStream,具体代码如下:

javascript 复制代码
var stream = require('node-rtsp-stream')
stream = new stream({
  name: 'name',
  streamUrl: 'rtsp://xxxxx',
  wsPort: 9999,
})

我们还需要给视频加上水印,比如我需要给视频进行画框,可以采用ffmpeg来进行画框

ffmpeg的代码如下

javascript 复制代码
ffmpeg -i ${rtspUrl} -vf "drawbox=${watermarkX}:${watermarkY}:${watermarkWidth}:${watermarkHeight}:red@0.5" 

你可以使用ffplay试播放一下

javascript 复制代码
ffplay -i ${rtspUrl} -vf "drawbox=${watermarkX}:${watermarkY}:${watermarkWidth}:${watermarkHeight}:red@0.5"

但是如果将ffmpeg的这个代码推至留一个rtsp流中就会报错,而且报错没有报错信息,只有一些奇怪的东西报错上来(目前还不知道原因,如果知道了原因会补上)

javascript 复制代码
ffmpeg -i ${rtspUrl} -vf "drawbox=${watermarkX}:${watermarkY}:${watermarkWidth}:${watermarkHeight}:red@0.5" -f rtsp rtsp://localhost:8554/output

stderr: Input #0, rtsp, from 'rtsp://admin:shuju12345@192.168.120.201:554/Streaming/Channels/101':

Metadata:

title : Media Presentation

Duration: N/A, start: 0.040000, bitrate: N/A

stderr: Stream #0:0: Video: hevc (Main), yuv420p(tv), 1920x1080, 25 fps, 25 tbr, 90k tbn

stderr: Stream mapping:

Stream #0:0 -> #0:0 (hevc (native) -> mpeg4 (native))

后来在网上找了很多办法,最后发现可以在rtspstream里面使用ffmpeg,不用再新建一条rtsp流,代码如下:

javascript 复制代码
stream = new stream({
  name: 'name',
  streamUrl: 'rtsp://xxx',
  wsPort: 9999,
  ffmpegOptions: { // options ffmpeg flags
    '-stats': '', // 没有必要值的选项使用空字符串
    '-vf': `drawbox=${watermarkX}:${watermarkY}:${watermarkWidth}:${watermarkHeight}:red@0.5`,
    '-s': '1920*1080', // 视频窗口大小 1920*1080 或 2560*1920
    '-r': 25, // 视频帧率
  }
})

这样就可以在传输的过程中直接绘制图形。

相关推荐
雾恋16 分钟前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴1 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
眰恦ゞLYF1 小时前
TCP与HTTP协议以及爬虫
爬虫·网络协议·tcp协议·http协议
Java 码农2 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan2 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron
nyf_unknown2 小时前
(vue)将dify和ragflow页面嵌入到vue3项目
前端·javascript·vue.js
胡gh2 小时前
浏览器:我要用缓存!服务器:你缓存过期了!怎么把数据挽留住,这是个问题。
前端·面试·node.js
你挚爱的强哥3 小时前
SCSS上传图片占位区域样式
前端·css·scss
奶球不是球3 小时前
css新特性
前端·css
Nicholas683 小时前
flutter滚动视图之Viewport、RenderViewport源码解析(六)
前端