33a3148b38
- 新增 store/liveStore.ts：Zustand store，存储小窗直播状态（roomId/title/cover/hlsUrl） - 新增 components/LiveMiniPlayer.tsx：可拖动悬浮迷你直播播放器 - 原生端实际播放 HLS 流（react-native-video，有声） - Web 端降级展示封面图 + LIVE 徽标 - LIVE 红点徽标 + 标题条底部 - 关闭按钮（×）和点击进入直播间 - HLS 出错时自动关闭（onError → clearLive） - 视频 MiniPlayer 激活时自动上移避免重叠 - _layout.tsx：全局挂载 <LiveMiniPlayer /> - live/[roomId].tsx：顶部栏添加小窗按钮（browsers-outline） - 仅直播中且有流地址时显示，离线时占位保持 title 居中 - 点击后 setLive + router.back()，返回首页继续看直播 - 进入同房间时自动 clearLive() 避免双播
JKVideo
A feature-rich third-party Bilibili React Native client
DASH playback · Real-time danmaku · WBI signing · Live streaming · Cross-platform
中文 · Quick Start · Features · Contributing
Screenshots
 Home · Inline Video · Live Cards |
 Video Detail · Info · Recommendations |
 Player · 4K HDR · Quality Switch |
 Downloads · LAN Share QR Code |
 Live Tab · Followed Streamers · Categories |
 Live Room · Real-time Danmaku · Guard Marks |
Features
🎬 Full DASH Playback
Bilibili DASH stream → buildDashMpdUri() local MPD → ExoPlayer native decode, supports 1080P+ & 4K HDR
💬 Complete Danmaku System Video danmaku with XML timeline sync + 5-lane floating overlay; Live danmaku via WebSocket with guard marks & gift counting
🔐 WBI Signing Pure TypeScript MD5 implementation, zero external crypto dependencies, 12h auto-cached nav interface
🏠 Smart Home Layout BigVideoCard inline DASH muted autoplay + swipe-to-seek gesture + live card interleaving + dual-column grid
📺 Global Mini Player Persistent bottom overlay player survives navigation, VideoStore cross-component state sync
🔑 QR Code Login QR code generation + 2s polling + automatic SESSDATA extraction from response headers
📥 Download + LAN Sharing Multi-quality background download, built-in HTTP server generates LAN QR code for same-Wi-Fi playback
🌐 Cross-Platform Android · iOS · Web, Expo Go scan-to-run in 5 minutes, Dev Build unlocks full DASH playback
Tech Stack
| Layer | Technology |
|---|---|
| Framework | React Native 0.83 + Expo SDK 55 |
| Navigation | expo-router v4 (file-based, Stack) |
| State | Zustand |
| HTTP | Axios |
| Storage | @react-native-async-storage/async-storage |
| Video | react-native-video (DASH MPD / HLS / MP4) |
| Fallback | react-native-webview (HTML5 video injection) |
| Pager | react-native-pager-view |
| Icons | @expo/vector-icons (Ionicons) |
Quick Start
Option 1: Expo Go (5 minutes, no build required)
Some quality options limited; video falls back to WebView
git clone https://github.com/tiajinsha/JKVideo.git
cd JKVideo
npm install
npx expo start
Scan the QR code with Expo Go on Android or iOS.
Option 2: Dev Build (Full features, recommended)
Supports DASH 1080P+ native playback, full danmaku system
npm install
npx expo run:android # Android
npx expo run:ios # iOS (requires macOS + Xcode)
Option 3: Web
npm install
npx expo start --web
Web requires a local proxy server for image anti-hotlinking:
node scripts/proxy.js(port 3001)
Direct Install (Android)
Download the latest APK from Releases — no build needed.
Enable "Install from unknown sources" in Android settings
Project Structure
app/
index.tsx # Home (PagerView Hot/Live tabs)
video/[bvid].tsx # Video detail (player + info/comments/danmaku)
live/[roomId].tsx # Live room (HLS player + real-time danmaku)
search.tsx # Search page
downloads.tsx # Download manager
settings.tsx # Settings (quality + logout)
components/ # UI components (player, danmaku, cards, etc.)
hooks/ # Data hooks (video list, stream URLs, danmaku, etc.)
services/ # Bilibili API wrapper (axios + cookie interceptor)
store/ # Zustand stores (auth, download, playback, settings)
utils/ # Utilities (format, image proxy, MPD builder)
Known Limitations
| Limitation | Reason |
|---|---|
| 4K / 1080P+ requires premium account | Bilibili API restriction |
| FLV live streams not supported | Neither HTML5 nor ExoPlayer support FLV; HLS auto-selected |
| Web requires local proxy | Bilibili image Referer anti-hotlinking |
| Feed / like / collect features | Requires bili_jct CSRF token, not yet implemented |
| QR code expires after 10 minutes | Close and reopen the login modal to refresh |
Contributing
Issues and PRs are welcome! Please read CONTRIBUTING.md first.
Disclaimer
This project is for personal learning and research purposes only. Not for commercial use. All video content copyright belongs to the original authors and Bilibili. This project is not affiliated with Bilibili in any way.
License
MIT © 2026 JKVideo Contributors
If this project helps you, please give it a ⭐ Star!