English static mirror for SEO/GEO · AI-assisted translation · Read Chinese original

JKVideo: A Beautiful React Native Third-Party Bilibili Client

Forum topic · 小凯 · 2026-03-24

Summary

JKVideo is an open-source, third-party Bilibili client built with React Native by developer tiajinsha, supporting Android, iOS, and Web. The project earned 2.3k GitHub stars within two weeks of release. Key technical highlights include hand-written DASH MPD generation to enable native 1080P+/4K HDR playback via ExoPlayer, a danmaku (bullet comment) system using XML timeline sync and WebSocket binary protocol parsing with Zlib decompression for live streams, a zero-dependency TypeScript MD5 implementation for WBI signing, QR-code login, offline downloads with LAN HTTP sharing, and a mini-player using Zustand. The stack includes React Native 0.83, Expo SDK 55, expo-router v4, and react-native-video. Licensed under MIT, it serves as a reference for React Native video apps, DASH streaming, and real-time communication.

Project Overview

JKVideo is a third-party Bilibili client developed independently by tiajinsha, built with React Native and supporting Android, iOS, and Web. The project gained 2.3k stars within two weeks of going open source, with exceptionally high technical polish.

---

Core Features and Technical Implementation

| Feature | Technical Approach | |------|----------| | DASH HD playback | Bilibili returns separate audio/video streams; the author hand-wrote buildDashMpdUri() to convert JSON into MPD format, fed to ExoPlayer for native decoding, supporting 1080P+ / 4K HDR | | Danmaku (bullet comments) system | Video danmaku: XML timeline sync + 5-track scrolling scheduler; live danmaku: WebSocket long connection + binary protocol parsing (Zlib decompression) | | WBI signing | Pure TypeScript hand-written MD5 with zero external dependencies, compatible with all platforms; nav API cached automatically for 12h | | QR code login | Full OAuth flow, 2-second polling + automatic SESSDATA extraction from cookies | | Offline downloads | Multi-quality background queue, with LAN HTTP server sharing (scan QR code on the same WiFi to play) | | Mini player | Zustand cross-component state sync; playback continues in a bottom overlay after leaving the detail page |

---

Tech Stack

  • Framework: React Native 0.83 + Expo SDK 55
  • Routing: expo-router v4 (file-system routing)
  • State management: Zustand
  • Video playback: react-native-video (ExoPlayer underneath)
  • Fallback: react-native-webview (HTML5 video)
  • Local storage: @react-native-async-storage/async-storage
  • ---

    How to Run

    | Method | Command | Notes | |------|------|------| | Expo Go (5 minutes) | npx expo start | Scan and run; video falls back to WebView | | Dev Build (recommended) | npx expo run:android | Unlocks native DASH playback | | Direct install | Download APK from Releases | Works out of the box |

    ---

    Technical Highlights and Lessons Learned

    The two deepest pitfalls: 1. DASH MPD assembly — ExoPlayer is extremely strict about format; a single missing attribute causes SOURCE_ERROR 2. Live danmaku protocol — Officially undocumented; reverse-engineered entirely via packet capture (16-byte header + Zlib compression)

    About the author:

  • Tian Jinsha (tiajinsha), 5 years of front-end full-stack experience
  • Heavy user of AI tools (Claude/Gemini/Cursor)
  • Proficient with MCP/Agent Skills, combined with git worktree for efficient parallel development
  • ---

    Project Value

    This is a complete, production-grade open-source project (not a demo) with high code quality, MIT licensed. It's well suited as:

  • A reference for React Native video app development
  • A learning case for DASH streaming playback
  • A reference for danmaku system implementation
  • Practice for WebSocket real-time communication
  • ---

    Links

  • GitHub: https://github.com/tiajinsha/JKVideo
  • Technical write-up: https://juejin.cn/post/7618903951497609225
  • Author profile: https://github.com/tiajinsha

Tags

#react-native#bilibili#open-source#video-player#dash-streaming#websocket#danmaku#expo

This page is an English static mirror generated for search and AI citation. It may be a full translation or structured summary of the Chinese original. Canonical interactive discussion lives on the Chinese page: https://zhichai.net/topic/177169010