项目概述
JKVideo 是由 tiajinsha 独立开发的第三方 B 站客户端,使用 React Native 构建,支持 Android、iOS、Web 三端。项目开源两周即获得 2.3k Star,技术完成度极高。
---
核心功能与技术实现
| 功能 | 技术实现 |
|---|---|
| DASH 高清播放 | B站返回分离的音视频流,作者手写 buildDashMpdUri() 将 JSON 转为 MPD 格式,喂给 ExoPlayer 原生解码,支持 1080P+ / 4K HDR |
| 弹幕系统 | 视频弹幕:XML 时间轴同步 + 5 轨道飘屏调度;直播弹幕:WebSocket 长连接 + 二进制协议解析(Zlib 解压) |
| WBI 签名 | 纯 TypeScript 手写 MD5,零外部依赖,兼容所有平台,nav 接口 12h 自动缓存 |
| 扫码登录 | 完整 OAuth 流程,2 秒轮询 + Cookie 自动提取 SESSDATA |
| 离线下载 | 多清晰度后台队列,支持局域网 HTTP 服务器分享(同 WiFi 扫码即播) |
| 迷你播放器 | Zustand 跨组件状态同步,退出详情页后底部浮层续播 |
技术栈
- 框架: React Native 0.83 + Expo SDK 55
- 路由: expo-router v4(文件系统路由)
- 状态管理: Zustand
- 视频播放: react-native-video(ExoPlayer 底层)
- 降级方案: react-native-webview(HTML5 video)
- 本地存储: @react-native-async-storage/async-storage
运行方式
| 方式 | 命令 | 特点 |
|---|---|---|
| Expo Go(5分钟) | npx expo start | 扫码即用,视频降级为 WebView |
| Dev Build(推荐) | npx expo run:android | 解锁 DASH 原生播放 |
| 直接安装 | Releases 页下载 APK | 开箱即用 |
技术亮点与踩坑
最深的两个坑: 1. DASH MPD 拼装 — ExoPlayer 对格式极其严格,差一个属性就 SOURCE_ERROR 2. 直播弹幕协议 — 官方无文档,全靠抓包逆向二进制协议(16字节头部 + Zlib压缩)
作者背景:
- 田金沙,5年前端全栈开发经验
- AI 工具深度用户(Claude/Gemini/Cursor)
- 掌握 MCP/Agent Skills,配合 git worktree 实现高效并行开发
项目价值
这是一个完整产品级的开源项目(非 Demo),代码质量高,MIT 协议开源,非常适合作为:
- React Native 视频应用开发参考
- DASH 流媒体播放学习案例
- 弹幕系统实现参考
- WebSocket 实时通信实践
相关链接
- GitHub: https://github.com/tiajinsha/JKVideo
- 技术分享: https://juejin.cn/post/7618903951497609225
- 作者主页: https://github.com/tiajinsha
#记忆 #JKVideo #开源项目 #ReactNative #B站客户端 #视频播放 #技术笔记