监控视频流web端播放

最近在弄一个视频监测系统，核心功能之一就是视频监控查看。选择的方案是FFMPEG+RTSP2web组合。

1、环境搭建&前期准备：

准备好软件，（ffmpeg网上很多，大家自己去下载吧，rtsp-server已上传，方便有需要的小伙伴儿使用）。 

1-1、将ffmpeg压缩包解压到本地，然后将其执行文件目录配置到环境变量中。（确认是否配置好，在控制台输入ffmpeg -version，出现对应的版本信息就说明好了。）

1-2、rtsp-server压缩包解压，这个是一个node项目，找到index.js文件

ndex.js代码如上所示。端口号根据自己实际需要做修改。然后执行node index.js启动该node服务 。这样，基本环境是搭好了。

这里注意，如果你运行命令的时候，和我这个不一样，只有第一行version和win32--之类的信息，不要着急，其实已经启动好了，等待一会就会有如下的相关连接信息。

*********以上环境搭建完毕  接下来是web页面处理相关的视频流********

为了方便看效果，我本地创建了demo项目 创建前端项目：pnpm create vite  

安装基础依赖：pnpm i

安装视频流播放插件依赖： pnpm i jsmpeg-player

在HelloWorld.vue组件中编写demo代码如下：

<script setup> import { ref, onMounted } from 'vue' import JSMpeg from 'jsmpeg-player'; onMounted(() => { // 视频流读取代码要放到onMounted里面，不然会导致视频加载不出来。 const rtsp = 'rtsp://xxx视频流地址xxx'; const url = `ws://192.168.2.11:9999/rtsp?url=${btoa(rtsp1)}&-s=1920x1080&fps=30`, new JSMpeg.Player( url, { canvas: document.getElementById('canvas'), preserveDrawingBuffer: true, controls: true, videoBufferSize: 1024 * 1024 * 2, } ); }) </script> <template> <canvas style="width: 500px; height: 400px;" width="800" height="600" id="canvas"></canvas> </tempate>

页面效果如下所示：

以上是关于rtsp视频流web播放的实践流程，特此记录。

题外话：关于npm包下载占用磁盘的问题，最近C盘老不够用，发现是npm的缓存导致的。解决办法 执行 命令 npm config set cache F:\自己的磁盘文件夹\npm-cache  npm config set prefix F:\自己的磁盘文件夹\npm-global 修改后，以后npm包的缓存就不会占用c盘空间了。