项目名称

Live777播放器

基本信息

项目	详情
项目名称	Live777播放器
小组名称	Live777播放器
项目方向	Web 前端 / 流媒体 / WebRTC
项目周期	2026年7月 — 2026年8月

小组成员

姓名	角色	GitHub
刘忆	组长	@Hakkai04
高成楠	组员	@xianshengli12138
张望辉	组员	@zhangwanghui512
曾家琛	组员	@Jackreceive
万家丰	组员	@2322143403w-netizen

项目简介

Live777 Player 是基于 Live777 WebRTC SFU 引擎构建的独立高性能流媒体播放器客户端。项目实现了一个完整的 WebRTC 播放器，支持 WHEP 拉流播放与 WHIP 摄像头推流 双模式，提供全功能播放控制、实时流状态统计（分辨率/码率/RTT/丢包等 8 项指标）、多路摄像头切换（最大 16 路网格布局），以及响应式桌面/移动端跨平台适配。

背景：Live777 是一个开源的轻量级边缘 WebRTC SFU 服务器，但社区缺少一个功能完善的 Web 端播放器客户端。本项目的目标是为 Live777 生态提供一个开箱即用、类型安全、经过完整测试的播放器前端，降低 WebRTC 流媒体技术的使用门槛。

技术栈

前端

技术	版本	用途
TypeScript	5.6	类型安全（7 项 strict 标志全开）
React	18.3	UI 框架
Tailwind CSS + daisyUI	4.3 / 5.7	原子化 CSS + 语义组件库
Zustand	5.0	状态管理 + localStorage 持久化
whip-whep	1.2.0	WHIP/WHEP IETF 协议客户端库
Vite	5.4	构建工具和开发服务器
ESLint	10.x	strictTypeChecked 规则集
Playwright	1.62	E2E 自动化测试

后端（RTSP 桥接服务）

技术	用途
Rust + axum 0.8	RTSP → WHEP 桥接服务（编译期类型安全、零数据竞争）
tokio	异步运行时
tower-http	CORS + 请求追踪中间件
tracing	结构化 JSON 日志

核心功能

WebRTC/WHEP 拉流播放 — 通过 IETF 标准 WHEP 协议建立 RTCPeerConnection，支持看门狗自动重连
WHIP 摄像头推流 — getUserMedia 采集本地摄像头/麦克风，通过 WHIP 协议推流至 Live777 SFU
RTSP 协议桥接 — 输入 RTSP 地址自动通过 Rust/Go 桥接服务转为 WHEP 播放，接入 IP 摄像头
全功能播放控制 — 播放/暂停/停止、音量滑块 0-100%、静音、全屏、画中画、截图、键盘快捷键（Space/F/M/Escape）
实时流状态统计 — 分辨率、码率(kbps)、帧率(fps)、RTT(ms)、抖动(ms)、丢包率(%)、编解码器、连接状态，1 秒轮询
多路并发播放 — 频道 CRUD + 1/4/9/16 路网格布局，在线状态实时指示，频道列表 localStorage 持久化
Web 端与移动端适配 — 桌面三栏布局（侧边栏+播放区+设置），移动端全宽播放器+可展开底部抽屉+触摸交互，响应式旋转适配
自动化测试与 CI — Playwright 25 个 E2E 测试场景覆盖桌面+移动端，GitHub Actions 自动 TypeCheck/Build/E2E/Rust Check

项目 Logo

项目截图

Web 端主界面

Web端主界面

移动端界面

移动端主界面

系统架构图

┌─────────────────────────────────────────────────────┐
│              浏览器（Live777 Player）                 │
│                                                     │
│  ┌──────────┐  ┌──────────┐  ┌────────┐  ┌──────┐  │
│  │ WHEP 拉流 │  │ WHIP 推流 │  │ 控制栏  │  │统计  │  │
│  │ RTCPeer  │  │ getUser  │  │ 全屏   │  │分辨率 │  │
│  │ Connection│  │ Media    │  │ 音量   │  │码率   │  │
│  └────┬─────┘  └────┬─────┘  └────────┘  │RTT   │  │
│       │              │                    └──────┘  │
│       │ WHEP 订阅    │ WHIP 发布                    │
└───────┼──────────────┼─────────────────────────────┘
        │              │
        ▼              ▼
┌──────────────────────────────────────────────────┐
│          Live777 SFU（端口 7777）                  │
│          选择性转发单元 / 协议转换                   │
└──────┬───────────────────────────────────────────┘
       │
       ▼
┌──────────────────────────────────────────────────┐
│     RTSP 桥接 — Rust/axum（端口 4002）            │
│     POST /bridge/rtsp  →  WHEP URL               │
└──────┬───────────────────────────────────────────┘
       │ RTSP
       ▼
┌──────────────────────────────────────────────────┐
│             RTSP 摄像头 / IP 摄像头                 │
└──────────────────────────────────────────────────┘

代码仓库

项目源码: https://github.com/Hakkai04/Live777-Player
Live777 SFU 引擎: https://github.com/binbat/live777

演示

在线演示: 启动 Live777 SFU + 播放器后访问 http://localhost:3000

快速体验：

bash

# 1. 启动 Live777 引擎
docker run -d --name live777 -p 7777:7777 ghcr.io/binbat/live777-server:latest

# 2. 启动播放器
cd player && npm install && npm run dev

# 3. 浏览器打开 http://localhost:3000

项目亮点

类型安全第一: TypeScript 7 项 strict 标志全开 + ESLint strictTypeChecked，编译期即可拦截大量潜在 bug；Rust 桥接服务利用编译期所有权检查和错误穷举，消除数据竞争和 nil 指针风险
完整的 WebRTC 协议栈: 同时支持 WHEP（拉流）/ WHIP（推流）/ RTSP（桥接）三种协议，前端智能识别 URL 协议类型并自动路由
结构化日志系统: 自研 JSON 格式日志，含 correlationId（关联 ID）、module（模块标记），便于快速定位和归因问题
可量化的性能指标: 内置首帧计时（WhepClient.firstFrameMs），Buffering 策略（low/normal/high/auto）映射到 WebRTC playoutDelayHint，可精确控制延迟
自动化测试保障: Playwright 25+ E2E 测试场景 × 桌面+移动端双项目，GitHub Actions CI 自动执行 TypeCheck/Lint/Build/E2E/Rust Check
跨平台适配: 桌面三栏布局与移动端全宽布局无缝切换，响应式旋转适配，触摸交互（双击全屏、单击显示控制栏）

项目总结

本项目从零构建了一个功能完善的 WebRTC 流媒体播放器客户端。通过严格的类型系统约束和全面的自动化测试，在保持代码质量的同时实现了 8 项核心功能的完整交付。

主要收获：

深入理解了 WebRTC 协议栈（ICE/DTLS/SCTP/SDP）、WHIP/WHEP 标准的工作流程
实践了 TypeScript 严格模式 + Rust 编译期安全的前后端技术组合，体会到类型系统在工程中的实际价值
通过 Playwright E2E 测试搭建了自动化回归验证体系，迭代效率显著提升
在响应式布局、触摸交互、多路并发等用户体验细节上积累了实践经验

项目名称 ​

基本信息 ​

小组成员 ​

项目简介 ​

技术栈 ​

前端 ​

后端（RTSP 桥接服务） ​

核心功能 ​

项目 Logo ​

项目截图 ​

Web 端主界面 ​

移动端界面 ​

系统架构图 ​

代码仓库 ​

演示 ​

项目亮点 ​

项目总结 ​