最近用Wails框架开发了一个跨平台的RTSP播放器，通过WebRTC技术实现了RTSP到Web端的低延迟转换，效果非常不错。今天就来分享一下整个开发过程和技术方案。
🖼️ 平台预览
| Windows 平台 | macOS 平台 |
|---|---|
 |
 |
🎯 项目背景
痛点分析
- 浏览器兼容性差：RTSP协议不被主流浏览器原生支持
- 延迟过高：传统HLS/DASH方案延迟通常在1-10秒
- 部署复杂：需要额外的流媒体服务器
- 跨平台困难：不同平台需要不同的客户端
技术选型思考
经过调研，我选择了以下技术栈：
- 后端：Go + deepch/vdk（强大的视频处理能力）
- 前端：React + TypeScript（现代化UI）
- 桌面框架：Wails v2（完美的Go+Web结合）
- 核心技术：WebRTC（低延迟的关键）
🏗️ 架构设计
整体架构
RTSP源 → Go后端处理 → WebRTC转换 → React前端播放
核心模块
- 流媒体核心（streamCore.go）
- WebRTC转换（streamWebRTC.go）
- 前端播放器（WebRtcPlayer.tsx）
💻 核心实现
1. RTSP流处理
使用deepch/vdk库处理RTSP流，这是整个系统的核心：
func StreamServerRunStream(streamID string, opt *StreamST) (int, error) {// 建立RTSP连接RTSPClient, err := rtspv2.Dial(rtspv2.RTSPClientOptions{URL: opt.URL,InsecureSkipVerify: opt.InsecureSkipVerify,DisableAudio: !opt.Audio,DialTimeout: 3 * time.Second,ReadWriteTimeout: 5 * time.Second,Debug: opt.Debug,OutgoingProxy: true,})if err != nil {return 0, err}// 处理视频包for {select {case packetAV := <-RTSPClient.OutgoingPacketQueue:if packetAV.IsKeyFrame {keyTest.Reset(20 * time.Second)}// 广播到所有客户端Storage.StreamChannelCast(streamID, packetAV)}}
}
2. WebRTC集成
前端使用标准WebRTC API与后端建立P2P连接：
const open = async (): Promise<void> => {const pc = new RTCPeerConnection();const stream = new MediaStream();pc.onnegotiationneeded = async (): Promise<void> => {const offer = await pc.createOffer();await pc.setLocalDescription(offer);// 通过Wails调用Go后端const res = await Play(url, btoa(pc.localDescription.sdp));pc.setRemoteDescription(new RTCSessionDescription({type: "answer",sdp: atob(res),}));};pc.ontrack = (event): void => {stream.addTrack(event.track);videoRef.current.srcObject = stream;};pc.addTransceiver("video", { direction: "sendrecv" });
};
🔥 技术亮点
1. 低延迟实现
通过WebRTC的P2P特性，实现了毫秒级延迟：
- 传统HLS：1-10秒延迟
- 本方案：100-500毫秒延迟
2. 跨平台支持
基于Wails框架，一套代码支持：
- Windows
- macOS
- Linux
3. 现代化UI
使用React + TailwindCSS构建响应式界面：
return (<div className="relative w-full bg-black rounded overflow-hidden">{loading && (<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"><Loading /></div>)}<videoref={videoRef}className="w-full aspect-video"onDoubleClick={onDoubleClick}onLoadedData={onLoadedData}/></div>
);
📊 性能表现
延迟对比
| 方案 | 延迟 | 兼容性 | 部署难度 |
|---|---|---|---|
| 原生RTSP | 不支持 | 差 | - |
| HLS | 1-10s | 好 | 中 |
| WebRTC转码 | 0.1-0.5s | 好 | 低 |
资源占用
- 内存占用：约50MB
- CPU占用：1-3%（单路1080p流）
- 启动时间：< 2秒
🛠️ 开发体验
热重载支持
wails dev
开发模式下支持：
- 前端热重载
- 后端自动重编译
- 浏览器调试模式
一键构建
wails build
生产部署
构建后直接运行可执行文件，无需额外依赖。
📈 总结
通过Wails + Go + React的技术组合，我们成功实现了：
- ✅ 低延迟：WebRTC实现毫秒级延迟
- ✅ 跨平台：一套代码支持多平台
- ✅ 易部署：单文件分发，无需依赖
- ✅ 现代化：React构建的美观界面
- ✅ 高性能：Go语言的高效处理能力
🔗 相关资源
- 项目开源地址：GitHub
- Wails官网：https://wails.io/
- deepch/vdk：https://github.com/deepch/vdk
如果这篇文章对你有帮助，欢迎点赞收藏！有任何问题也欢迎在评论区讨论交流 🚀