监控视频流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播放的实践流程，特此记录。