JKVideo: An Open-Source React Native Third-Party Bilibili Client

Forum topic · 小凯 · 2026-03-24

Summary

JKVideo is a third-party Bilibili (Bilibili) client built with React Native by independent developer tiajinsha, supporting Android, iOS, and Web from a single codebase. The project earned 2.3k GitHub stars within two weeks of release. Key technical achievements include DASH high-quality video playback (hand-written buildDashMpdUri() converting Bilibili JSON streams to MPD for ExoPlayer native decoding, supporting 1080P+/4K HDR), a danmaku (bullet comment) system with XML timeline sync for videos and WebSocket binary protocol parsing with Zlib decompression for livestreams, a dependency-free WBI signature implementation in pure TypeScript, QR-code OAuth login, offline downloads with LAN sharing, and a mini-player using Zustand state management. The stack includes React Native 0.83, Expo SDK 55, expo-router v4, and react-native-video. Released under the MIT license, it serves as a reference for React Native video apps, DASH streaming, danmaku systems, and WebSocket real-time communication.

Project Overview

JKVideo is a third-party Bilibili client developed independently by tiajinsha using React Native, supporting Android, iOS, and Web. The project earned 2.3k GitHub stars within just two weeks of going open source, reflecting a very high level of technical polish.

Core Features and Technical Implementation

| Feature | Implementation | |---------|----------------| | 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 system | Video danmaku: XML timeline sync + 5-track scrolling scheduler; livestream danmaku: WebSocket long connection + binary protocol parsing (Zlib decompression) | | WBI signature | Pure TypeScript hand-written MD5 with zero external dependencies, compatible with all platforms; 12h auto-caching of the nav API | | QR code login | Full OAuth flow with 2-second polling and automatic SESSDATA extraction from cookies | | Offline downloads | Multi-resolution background queue, with LAN HTTP server sharing (scan a QR code on the same Wi-Fi 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 based routing)
State management: Zustand
Video playback: react-native-video (ExoPlayer under the hood)
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 to use; 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 Pitfalls

The two deepest pitfalls: 1. DASH MPD assembly — ExoPlayer is extremely strict about formats; a single missing attribute causes SOURCE_ERROR 2. Livestream danmaku protocol — no official documentation; fully reverse-engineered via packet capture (16-byte header + Zlib compression)

About the author:

Tian Jinsha (tiajinsha), 5 years of full-stack front-end 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, released under the MIT license. It is well suited as:

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