VUE3+TS+VITE+webrtc-streamer实战：从零搭建RTSP监控视频Web播放器（避坑指南）

1. 环境准备与工具安装

搭建RTSP监控视频Web播放器的第一步是准备好开发环境。我推荐使用Vue3 + TypeScript + Vite的组合，这个技术栈在开发效率和运行性能上都有不错的表现。首先确保你的系统已经安装了Node.js（建议版本16以上），然后通过以下命令创建一个Vite项目：

bash复制npm create vite@latest my-vue-project --template vue-ts

安装完成后，我们需要下载webrtc-streamer这个关键组件。它是实现RTSP转WebRTC的核心工具，可以直接从GitHub仓库下载最新的Windows版本。解压后你会看到一个包含可执行文件和资源文件的目录结构。这里有个小技巧：建议把解压后的文件夹放在项目根目录下，方便后续引用。

2. 服务部署与配置

启动webrtc-streamer服务时，默认会使用8000端口。但实际开发中经常会遇到端口冲突的问题，特别是当你同时运行多个服务时。我遇到过mediamtx占用8000端口的情况，解决方案是指定其他端口：

bash复制webrtc-streamer.exe -H 127.0.0.1:9000

这个命令将服务端口改为9000，同时绑定到本地地址。启动成功后，你可以在浏览器访问http://127.0.0.1:9000来验证服务是否正常运行。如果看到测试页面，说明服务已经就绪。

3. 前端集成关键步骤

将webrtc-streamer集成到Vue项目中有几个关键点需要注意。首先要把下载包中的webrtcstreamer.js和adapter.min.js复制到项目的public目录下。然后在index.html中通过script标签引入：

html复制<script src="/webrtcstreamer.js"></script>
<script src="/adapter.min.js"></script>

这里有个容易踩坑的地方：在TypeScript项目中直接import这些JS文件会导致编译错误。正确的做法是通过声明文件来告诉TypeScript这些全局变量的存在。创建一个types目录，添加webrtc-streamer.d.ts文件：

typescript复制declare class WebRtcStreamer {
  constructor(elementId: string, serverUrl: string);
  connect(rtspUrl: string): void;
  disconnect(): void;
}

4. 视频流测试与调试

为了模拟真实环境，我使用mediamtx作为流媒体服务器，配合ffmpeg进行推流测试。这个组合非常轻量，适合本地开发：

bash复制ffmpeg -re -stream_loop -1 -i test.mp4 -c copy -rtsp_transport tcp -f rtsp rtsp://127.0.0.1:8554/stream

在Vue组件中，视频播放的核心代码如下：

vue复制<template>
  <video id="video" autoplay controls width="800"></video>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

let webRtcServer: WebRtcStreamer | null = null;

onMounted(() => {
  const videoElement = document.getElementById('video');
  if (videoElement) {
    webRtcServer = new WebRtcStreamer('video', `${location.protocol}//127.0.0.1:9000`);
    webRtcServer.connect('rtsp://127.0.0.1:8554/stream');
  }
});

onUnmounted(() => {
  webRtcServer?.disconnect();
});
</script>

5. 常见问题解决方案

在实际开发中，我遇到过几个典型问题。首先是协议头缺失导致的连接失败。正确的服务器地址应该包含协议头（http://或https://），很多新手会忽略这一点。

另一个常见问题是跨域访问。如果前端和服务不在同一个域名下，需要在启动webrtc-streamer时添加CORS支持：

bash复制webrtc-streamer.exe -H 127.0.0.1:9000 --allow-origin="*"

视频无法播放时，建议按以下步骤排查：

1. 检查流媒体服务器是否正常运行
2. 确认ffmpeg推流命令没有报错
3. 查看浏览器控制台是否有错误信息
4. 检查webrtc-streamer控制台日志

6. 性能优化建议

当视频流出现卡顿时，可以考虑以下几个优化方向。首先是降低分辨率，在ffmpeg推流时添加缩放滤镜：

bash复制ffmpeg -i input.mp4 -vf scale=640:360 -c:v libx264 -f rtsp rtsp://127.0.0.1:8554/stream

其次是调整webrtc-streamer的编码参数。启动时添加--hwaccel参数可以启用硬件加速：

bash复制webrtc-streamer.exe -H 127.0.0.1:9000 --hwaccel=auto

对于多路视频流的场景，建议使用多个webrtc-streamer实例，每个实例处理一路视频流，避免单进程资源竞争。

7. 生产环境部署

将开发好的应用部署到生产环境时，有几个注意事项。首先是安全性，不要使用默认端口和简单密码。建议配置Nginx反向代理，添加HTTPS支持：

nginx复制server {
    listen 443 ssl;
    server_name yourdomain.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
    }
    
    location /webrtc {
        proxy_pass http://127.0.0.1:9000;
        proxy_set_header Host $host;
    }
}

对于长期运行的webrtc-streamer服务，建议使用PM2等进程管理工具来保证稳定性：

bash复制pm2 start webrtc-streamer.exe --name "webrtc-service" -- -H 127.0.0.1:9000

8. 高级功能扩展

基础功能实现后，可以考虑添加一些增强功能。比如视频录制，可以通过MediaRecorder API实现：

typescript复制const startRecording = () => {
  const videoStream = videoElement.captureStream();
  const mediaRecorder = new MediaRecorder(videoStream);
  const chunks: Blob[] = [];
  
  mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
  mediaRecorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' });
    // 处理录制好的视频
  };
  
  mediaRecorder.start();
};

另一个实用功能是截图，利用canvas可以实现：

typescript复制const takeSnapshot = () => {
  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;
  canvas.getContext('2d')?.drawImage(videoElement, 0, 0);
  
  const imageUrl = canvas.toDataURL('image/png');
  // 处理生成的图片
};

在实际项目中，我还实现了多摄像头切换功能。通过维护一个视频源列表，动态调用connect方法切换视频流：

typescript复制const switchCamera = (rtspUrl: string) => {
  if (webRtcServer) {
    webRtcServer.disconnect();
    webRtcServer.connect(rtspUrl);
  }
};

这些功能扩展让基础的视频监控系统变得更加实用和强大。根据项目需求，你还可以考虑添加移动端适配、异常报警、历史回放等功能模块。