tiajinsha/JKVideo

TypeScript

高颜值第三方 B 站 React Native 客户端

androiddanmakudashexporeact-nativetypescriptvideo-playerzustand

Indicateurs clés

Croissance des étoiles

Étoiles

Forks

2.9k

Croissance hebdomadaire

—

Issues

4.8k4.9k5k

mars 26mars 26avr. 26mai 26juin 26juin 26juil. 26

Artefactsnpmnpm install jkvideo

README

JKVideo

高颜值第三方 B 站 React Native 客户端

A feature-rich Bilibili-like app with DASH playback, real-time danmaku, WBI signing & live streaming

English · 快速开始 · 功能亮点 · 贡献

⚠️ 重要公告

本项目已收到哔哩哔哩（bilibili）律师函，要求停止对 B 站 API 的调用及相关仿制行为。

为尊重知识产权及相关法律法规，本仓库即日起停止后续维护与更新，不再接受新的 Issue 和 Pull Request。

现有代码仅作学习参考保留，请勿将本项目用于任何商业或违法用途。

感谢所有支持过本项目的朋友。

截图预览

_{首页热门 · 内联视频 · 穿插直播}	_{首页直播 · 关注房间· 分区筛选}	_{直播详情 · 4K HDR · 多清晰度}
_{下载管理 · 局域网分享二维码}	_{直播详情 ·实时弹幕 · 清晰度切换}	_{视频弹幕 · 同步加载}

演示视频

https://github.com/tiajinsha/JKVideo/releases/download/v1.0.0/6490dcd9dba9a243a7cd8f00359cc285.mp4

功能亮点

🎬 DASH 完整播放 Bilibili DASH 流 → buildDashMpdUri() 生成本地 MPD → ExoPlayer 原生解码，支持 1080P + 4K HDR杜比视界

💬 完整弹幕系统 视频弹幕 XML 时间轴同步 + 5 车道飘屏覆盖；直播弹幕 WebSocket 实时接收 + 舰长标记 + 礼物计数

🔐 WBI 签名实现 纯 TypeScript 手写 MD5，无任何外部加密依赖，nav 接口 12h 自动缓存

🏠 智能首页排布 BigVideoCard 内联 DASH 静音自动播放 + 水平手势快进 + 直播卡片穿插 + 双列混排

📺 全局迷你播放器 切换页面后底部浮层续播，VideoStore 跨组件状态同步

🔑 扫码登录 二维码生成 + 2s 轮询 + 响应头 Cookie 自动提取 SESSDATA

📥 下载 + 局域网分享 多清晰度后台下载，内置 HTTP 服务器生成局域网 QR 码，同 Wi-Fi 设备扫码直接播放

🌐 跨平台运行 Android · iOS · Web，Expo Go 扫码 5 分钟运行，Dev Build 解锁完整 DASH 播放

技术架构

层	技术
框架	React Native 0.83 + Expo SDK 55
路由	expo-router v4（文件系统路由，Stack 导航）
状态管理	Zustand
网络请求	Axios
本地存储	@react-native-async-storage/async-storage
视频播放	react-native-video（DASH MPD / HLS / MP4）
降级播放	react-native-webview（HTML5 video 注入）
页面滑动	react-native-pager-view
图标	@expo/vector-icons（Ionicons）

快速开始

方式一：Expo Go（5 分钟，无需编译）

部分清晰度受限，视频播放降级为 WebView 方案

git clone https://github.com/tiajinsha/JKVideo.git
cd JKVideo
npm install
npx expo start

用 Expo Go App（Android / iOS）扫描终端二维码即可运行。

方式二：Dev Build（完整功能，推荐）

支持 DASH 1080P+ 原生播放、完整弹幕系统

npm install
npx expo run:android   # Android
npx expo run:ios       # iOS（需 macOS + Xcode）

方式三：Web 端

npm install
npx expo start --web

Web 端图片需本地代理服务器绕过防盗链：node scripts/proxy.js（端口 3001）

直接安装（Android）

前往 Releases 下载最新 APK，无需编译，安装即用。

需在 Android 设置中开启「安装未知来源应用」

项目结构

app/
  index.tsx            # 首页（PagerView 热门/直播 Tab）
  video/[bvid].tsx     # 视频详情（播放 + 简介/评论/弹幕）
  live/[roomId].tsx    # 直播详情（HLS 播放 + 实时弹幕）
  search.tsx           # 搜索页
  downloads.tsx        # 下载管理页
  settings.tsx         # 设置页（画质 + 退出登录）

components/            # UI 组件（播放器、弹幕、卡片等）
hooks/                 # 数据 Hooks（视频列表、播放流、弹幕等）
services/              # Bilibili API 封装（axios + Cookie 拦截）
store/                 # Zustand 状态（登录、下载、播放、设置）
utils/                 # 工具函数（格式化、图片代理、MPD 构建）

已知限制

限制	原因
4K / 1080P+ 需要大会员账号登录	B 站 API 策略限制
FLV 直播流不支持	HTML5 / ExoPlayer 均不支持 FLV，已自动选 HLS
Web 端需本地代理	B 站图片防盗链（Referer 限制）
动态流 / 投稿 / 点赞	需要 `bili_jct` CSRF Token，暂未实现
二维码 10 分钟过期	关闭登录弹窗重新打开即可刷新