SuperAPI AI 工具集

jkvideo-bilibili-react-native

编程与开发

查看项目

更新于 10-14 05:57

技能介绍

JKVideo 是一个功能完整的第三方 Bilibili 客户端,基于 React Native 0.83 与 Expo SDK 55 构建。

【用途】 本项目用于构建和扩展一个类似 Bilibili 的移动端客户端,涵盖视频播放、弹幕、登录、直播与下载等核心功能。

【主要能力】 支持 DASH 自适应流媒体播放、实时弹幕(bullet comments)、WBI API 签名、二维码登录、带 WebSocket 弹幕的直播,以及带局域网二维码分享的下载管理器。视频播放以 react-native-video 处理 DASH MPD / HLS / MP4,并以 react-native-webview 作为回退方案。

【安装与配置】 前置条件:Node.js 18+、npm 或 yarn;Android 需 Android Studio + SDK;iOS 需 macOS + Xcode 15+。

快速开始(Expo Go,无需编译): git clone https://github.com/tiajinsha/JKVideo.git cd JKVideo npm install npx expo start 然后用 Expo Go 应用扫描二维码。注意:DASH 1080P+ 需要 Dev Build。

Dev Build(完整功能,推荐): npm install npx expo run:android # Android npx expo run:ios # iOS(需 macOS + Xcode)

Web 加图像代理: npm install npx expo start --web

在另一个终端:

node scripts/proxy.js # 在端口 3001 启动代理,以绕过 Bilibili referer 限制

直接安装 APK(Android):从 Releases 下载,并在 Android 设置中启用“从未知来源安装”。

【项目结构】 app/:index.tsx(首页,PagerView 热门/直播标签)、video/[bvid].tsx(视频详情,播放 + 评论 + 弹幕)、live/[roomId].tsx(直播详情,HLS + 实时弹幕)、search.tsx(搜索页)、downloads.tsx(下载管理器)、settings.tsx(设置,清晰度、登出)。 components/:UI,播放器、弹幕覆盖层、卡片。 hooks/:数据 hooks,视频列表、流、弹幕。 services/:Bilibili API(axios + cookie 拦截器)。 store/:Zustand 存储,auth、download、video、settings。 utils/:辅助函数,format、图像代理、MPD 构建器。

【技术栈】 框架 React Native 0.83 + Expo SDK 55;路由 expo-router v4(文件系统,Stack 导航);状态 Zustand;HTTP Axios;存储 @react-native-async-storage/async-storage;视频 react-native-video(DASH MPD / HLS / MP4);回退 react-native-webview(HTML5 视频注入);分页 react-native-pager-view;图标 @expo/vector-icons(Ionicons)。

【WBI 签名】 Bilibili 对大多数 API 调用要求 WBI 签名。JKVideo 使用纯 TypeScript MD5 实现,并带 12 小时 nav 缓存。utils/wbi.ts 中包含 MIXIN_KEY_ENC_TAB、getMixinKey、signWbi 与 getWbiKeys 等函数,用于对参数排序、过滤特殊字符、生成 w_rid,并从 /x/web-interface/nav 获取并缓存 imgKey 与 subKey。

【Bilibili API 服务】 services/api.ts 创建 axios 实例,baseURL 为 https://api.bilibili.com,设置 User-Agent 与 Referer;通过请求拦截器注入 SESSDATA cookie。提供 getPopularVideos(热门视频列表,WBI 签名)、getVideoStream(视频流信息,DASH,参数含 bvid、cid、qn、fnval、fnver、fourk)、getLiveStreamUrl(直播流 URL,返回 HLS m3u8)等方法。

【DASH MPD 构建】 ExoPlayer 需要本地 MPD 文件。utils/buildDashMpd.ts 中的 buildDashMpdUri 根据 Bilibili 的 DASH 响应生成包含视频与音频 AdaptationSet 的 MPD,并写入临时文件,返回 file:// URI 供 ExoPlayer 使用。

【视频播放器组件】 components/VideoPlayer.tsx 加载视频流,若有 DASH 数据则构建 MPD URI 并使用 react-native-video 播放;否则回退到 WebView 加载 Bilibili 视频页。

【弹幕系统】 视频弹幕(XML 时间轴同步):hooks/useDanmaku.ts 通过 /x/v1/dm/list.so?oid={cid} 获取并解析 XML 弹幕;components/DanmakuOverlay.tsx 实现 5 轨道浮动显示。 直播弹幕(WebSocket):hooks/useLiveDanmaku.ts 连接 wss://broadcastlv.chat.bilibili.com/sub,发送加入房间数据包(op=7),启动心跳,解压数据包,处理 DANMU_MSG 与 SEND_GIFT 等命令。

【Zustand 状态存储】 store/videoStore.ts 管理当前视频、迷你播放器状态与清晰度(80=1080P,112=1080P+,120=4K);store/authStore.ts 管理 SESSDATA、登录状态与登录登出逻辑。

【二维码登录】 hooks/useQrLogin.ts 调用 /x/passport-login/web/qrcode/generate 生成二维码,轮询 /x/passport-login/web/qrcode/poll 获取状态,code 为 0 时从 Set-Cookie 头提取 SESSDATA 并登录。

【下载管理与局域网分享】 store/downloadStore.ts 使用 expo-file-system 的 createDownloadResumable 下载视频,带 Referer 头,并更新进度。局域网 HTTP 服务器用于二维码分享,通过 os.networkInterfaces 获取局域网 IP。

【expo-router 导航】 app/video/[bvid].tsx 使用 useLocalSearchParams 获取 bvid;使用 router.push(/video/${bvid}) 跳转视频,router.push(/live/${roomId}) 跳转直播间,router.back() 返回。

【图像代理(Web)】 Bilibili 图片因 Referer 头在浏览器中阻止直接加载。使用捆绑的 scripts/proxy.js(端口 3001),在组件中通过 proxyImage 函数在 Web 平台将图片 URL 包装为 http://localhost:3001/proxy?url=...;原生平台直接返回原 URL。

【限制】 资料中未提供具体的收费、价格、平台支持范围、性能效果等事实;DASH 1080P+ 需要 Dev Build;iOS 构建需要 macOS + Xcode;Web 端图片需依赖代理。