vue3+nodejs(websocket)实现监控拉rtsp流,使用flv.js+ffmpeg包(主要建立websocket是为了转码传流)

这篇具有很好参考价值的文章主要介绍了vue3+nodejs(websocket)实现监控拉rtsp流,使用flv.js+ffmpeg包(主要建立websocket是为了转码传流)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于拉取监控摄像头的流,我个人去查了很多资料,也是因为之前没有接触过这一模块,加上目前公司也没有后端去写接口,所以我直接用node去写websocket,与前端建立起通信,能够进行后续转码、传流,能够实现实时播放监控画面。
这里的rtsp流是要事先知道的,监控的这个rtsp流,只要你拿到了,且监控是接网络的,就可以先拿VLC播放器去测试跑网络串流试试看,如果能接通画面,那么就可以走下面的操作了
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
请认真看完下面的内容,不然最后效果可能因为小差错导致出现问题!!!
一.nodejs配置
这里nodejs我的版本是18+,正常去官网下载配置就好

接下来创建一个新的文件夹,与你前端写的项目通级就好
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
给大家看一下我的配置,来来回回下载了很多包,大家只看我圈红的就好
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
将文件初始化,然后下面是我写的代码,具体需要的包有在代码中体现
红色框框里面是是启服务器需要的包(直接通过npm 去下载就好,这里很简单)
注意一点的是,这个websocket下载的时候,直接npm install websocket-stream就可以,然后照我这个去引用就行
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
然后可以跑起来看看,会不会出现什么问题(当然放在这上面的代码是没问题的,我已经试过了!但是可能会有一些配置问题,具体就需要自己去解决了)

二.前端vue3代码(我这里还使用了ts,如果遇到ts问题,那就根据个人需求要自己解决了)

首先是页面布局代码
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
然后是script中的代码
要下载flv.js这个包,可以直接通过npm 去下载就好
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
当前后端都跑起来后,进入页面就可以实现了
但是注意请求的地方
url: "ws:/XXX.XXX.XXX.XXX:8888/"+ url,  其中url是你要写的 rtsp 流(一般是海康,还有其他的品牌,当然这个流是要通网络的,文章开头有讲到)
这里的ip要去写自己电脑的ip
这个就很简单了,直接去win + R,cmd 进去命令提示符,输入ipconfig去查看自己电脑的ip
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
那么这里就是本机电脑的ip地址

综上所述,到这里就可以在页面上面实现监控了
把最终画面给大家看一下
nodejs处理 ws视频流,rtsp流的转码拉取,websocket,javascript,ffmpeg,vue,node.js
如果大家还有什么问题,请留言给我,大家可以一起共同去解决!!!一起进步!!!我个人也是个菜鸟,都是查阅各种资料,然后走了很多弯路,发现都实现不了,过程中发现大家都说使用flv比较好一点,延迟也是可以接受的,最终经过自己各种加工,让代码跑通了,实现了效果,但是后续还要去做能够控制多个监控画面的拉取以及各种布局与拉去画面产生的交互问题,也很头疼,目前还在进行中

如果你看完之后实现了的话,可以收藏起来,顺便给我点个赞吧!!!

文章来源地址https://www.toymoban.com/news/detail-830213.html

到了这里,关于vue3+nodejs(websocket)实现监控拉rtsp流,使用flv.js+ffmpeg包(主要建立websocket是为了转码传流)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • VUE3+TS+VITE+webrtc-streamer实现实时视频播放(监控设备-rtsp,进来保你成)

    目录 1、下载webrtc-streamer,下载最新window版本  2、解压下载包  3、双击webrtc-streamer.exe启动服务  4、引入webrtc-streamer         1、将下载包中html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下 2、在index.html文件里引入这两个js文件 5、使

    2024年02月05日
    浏览(38)
  • vue使用webrtcstreamer实现rtsp无转码播放实时监控

    因为video标签只能播放特定格式的视频,比如MP4、WebM和Ogg格式,而对于这种视频流文件则需要通过转码实现,而vue-video-player也只能播放特定格式的视频。所以要播放监控的实时视频,除了在浏览器的地址栏直接打开摄像头的地址,还可以通过webrtc-streamer和video标签在页面实现

    2024年02月06日
    浏览(82)
  • Vue实现摄像头视频分屏, 使用flv.js接收rtmp/flv视频流

    1. 现有的平台系统播放实时视频。 因为用户电脑都是Linux系统,无法直接使用海康前端SDK,讨论决定由后台推视频流,简单调研后发现最流行的是flv,而且有B站开源的flv.js适配。前期后台推给我RTMP前缀的视频流,我尝试使用video.js,西瓜视频等都失败了,后来后端改为http前

    2024年02月03日
    浏览(52)
  • 使用VUE和webrtc-streamer实现rtsp实时监控

    项目中遇到过的问题:通过 前端 Vue 或者后端Java 实现对监控的实时预览播放,截图等,刚开始肯定是没有头绪,通过多方面的查找和验证,就有了这篇文章。 提示:以下是本篇文章正文内容,下面案例可供参考 下载地址:https://github.com/mpromonet/webrtc-streamer/releases 如下图则启

    2024年01月20日
    浏览(43)
  • linux+nginx-http-flv-module+ffmpeg实现搭建简易流媒体服务器将rtsp流转flv格式在web端和微信小程序实时播放监控视频

    一.介绍背景 公司项目开发需求:将海康摄像头的rtsp流在web端及微信小程序端进行播放。之前我写过一篇关于web端使用webtrc+videojs播放rtsp流的文章,确实能够解决web端播放rtsp流的需求,但是这次多加了一个微信小程序....所以要考虑小程序的播放问题。本着探索实践的精神在

    2024年02月08日
    浏览(68)
  • uniapp(vue3)+node.js+websocket(实现实时通信效果)

    文章目录 概要 整体架构流程 技术名词解释 技术细节 小结 uniapp基于vue3,小程序的聊天功能 项目是基于node.js服务器搭建的简易双向通信网页,实现了实时更新在线人数以及用户间即时通讯的功能。 后台接口代码 1、首先我们可以通过Express 应用程序生成器快速搭建一个后台

    2024年03月26日
    浏览(54)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(下)

    在进入文章的正文之前,我们先一起了解一下关于 CSDN 今年的 1024 程序员节。与此同时这也是我在 CSDN 参与的第二个 1024 程序员节日,转眼间也快写博客两年时间,去年很遗憾没有去到深圳(疫情原因)线下参加这个有趣而充实的峰会。今年没有特殊情况的话一定会如约而至

    2024年02月06日
    浏览(48)
  • Vue3 开发实战分享——打印插件 Print.js 的使用(Vue3 + Nodejs + Print.js 实战)以及 el-table 与 el-pagination 的深入使用(上)

    今天久违的更新一下关于 Vue 的文章了,本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享,实战内容包括有打印插件 Print.js 的使用,以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章(axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联

    2024年02月06日
    浏览(44)
  • 使用vue3简单实现WebSocket通信

    关于WebSocket通信的简单介绍: 握手阶段:在建立WebSocket连接之前,客户端需要发送一个HTTP请求到服务器,请求升级为WebSocket协议。这个过程称为握手(Handshake)。如果服务器支持WebSocket协议,它将返回带有特定标头的HTTP响应,表示握手成功。 建立连接:客户端收到服务器的

    2024年02月16日
    浏览(36)
  • JAVACV 读取摄像头流将rtsp转flv 通过http-flv和flv.js播放 无插件 纯代码

    1、pom  2、摄像头类 3、服务实现  4、拉流转码 5、前端(vue) 安装flv.js   npm install --save flv.js

    2024年02月12日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包