vue3 nodejs（websocket）实现监控拉rtsp流，使用flv.js ffmpeg包（主要建立websocket是为了转码传流）

关于拉取监控摄像头的流，我个人去查了很多资料，也是因为之前没有接触过这一模块，加上目前公司也没有后端去写接口，所以我直接用node去写websocket，与前端建立起通信，能够进行后续转码、传流，能够实现实时播放监控画面。
这里的rtsp流是要事先知道的，监控的这个rtsp流，只要你拿到了，且监控是接网络的，就可以先拿VLC播放器去测试跑网络串流试试看，如果能接通画面，那么就可以走下面的操作了

请认真看完下面的内容，不然最后效果可能因为小差错导致出现问题！！！
一.nodejs配置
这里nodejs我的版本是18+，正常去官网下载配置就好

接下来创建一个新的文件夹，与你前端写的项目通级就好

给大家看一下我的配置，来来回回下载了很多包，大家只看我圈红的就好

将文件初始化，然后下面是我写的代码，具体需要的包有在代码中体现
红色框框里面是是启服务器需要的包（直接通过npm 去下载就好，这里很简单）
注意一点的是，这个websocket下载的时候，直接npm install websocket-stream就可以，然后照我这个去引用就行

然后可以跑起来看看，会不会出现什么问题（当然放在这上面的代码是没问题的，我已经试过了！但是可能会有一些配置问题，具体就需要自己去解决了）

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

首先是页面布局代码

然后是script中的代码
要下载flv.js这个包，可以直接通过npm 去下载就好


当前后端都跑起来后，进入页面就可以实现了
但是注意请求的地方
url: "ws:/XXX.XXX.XXX.XXX:8888/"+ url,  其中url是你要写的 rtsp 流（一般是海康，还有其他的品牌，当然这个流是要通网络的，文章开头有讲到）
这里的ip要去写自己电脑的ip
这个就很简单了，直接去win + R，cmd 进去命令提示符，输入ipconfig去查看自己电脑的ip


那么这里就是本机电脑的ip地址

综上所述，到这里就可以在页面上面实现监控了
把最终画面给大家看一下

如果大家还有什么问题，请留言给我，大家可以一起共同去解决！！！一起进步！！！我个人也是个菜鸟，都是查阅各种资料，然后走了很多弯路，发现都实现不了，过程中发现大家都说使用flv比较好一点，延迟也是可以接受的，最终经过自己各种加工，让代码跑通了，实现了效果，但是后续还要去做能够控制多个监控画面的拉取以及各种布局与拉去画面产生的交互问题，也很头疼，目前还在进行中

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