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>
        )}
        <video
            ref={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

---

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