Wails + Go + React跨平台RTSP播放器分享

最近用Wails框架开发了一个跨平台的RTSP播放器，通过WebRTC技术实现了RTSP到Web端的低延迟转换，效果非常不错。今天就来分享一下整个开发过程和技术方案。

🖼️ 平台预览

Windows 平台	macOS 平台

🎯 项目背景

痛点分析

1. 浏览器兼容性差：RTSP协议不被主流浏览器原生支持
2. 延迟过高：传统HLS/DASH方案延迟通常在1-10秒
3. 部署复杂：需要额外的流媒体服务器
4. 跨平台困难：不同平台需要不同的客户端

技术选型思考

经过调研，我选择了以下技术栈：

• 后端：Go + deepch/vdk（强大的视频处理能力）
• 前端：React + TypeScript（现代化UI）
• 桌面框架：Wails v2（完美的Go+Web结合）
• 核心技术：WebRTC（低延迟的关键）

🏗️ 架构设计

整体架构

RTSP源 → Go后端处理 → WebRTC转换 → React前端播放

核心模块

1. 流媒体核心（streamCore.go）
2. WebRTC转换（streamWebRTC.go）
3. 前端播放器（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

---

如果这篇文章对你有帮助，欢迎点赞收藏！有任何问题也欢迎在评论区讨论交流 🚀