# [오픈소스] Tauri 크로스플랫폼 B站 클라이언트 BBHouse, Vite + Vue 3 + Rust 기반

> 상황 1. 너무 많은 UP主(2000+)를 팔로우하고 있어 피드와 동영상을 빠르고 효과적으로 다 볼 수 없습니다 2. B站 웹 버전은 리소스를 너무 많이 차지해서 20~30개의 동영상 탭을 열면 새 Edge가 바로 크래시합니다 3. 최근 무작위로 나타나는 PCDN 때문에 프리미엄 멤버십 회원인 저는 몹시 불쾌합니다 4. CMD를 통해 BBDown을 사용하는 것은 다소 번거롭습니다 목표 …

- 게시일: 2022-08-14
- 태그: Rust, Vue, Web, tauri, 프론트엔드
- HTML 버전 보기: https://bilibili.cat/ko/posts/bbhouse
- 中文에서 AI 번역: https://bilibili.cat/posts/bbhouse

---

[![endcloud/bbhouse-tauri](https://opengraph.githubassets.com/e99b6d5fccc2c9ee0d3a4d515f8b337bd98f88bbb64bf7cb3102d0ec121f84f5/endcloud/bbhouse-tauri)](https://github.com/endcloud/bbhouse-tauri)

### 상황

1.  너무 많은 UP主(2000+)를 팔로우하고 있어 피드와 동영상을 빠르고 효과적으로 다 볼 수 없습니다
2.  B站 웹 버전은 리소스를 너무 많이 차지해서 20~30개의 동영상 탭을 열면 새 Edge가 바로 크래시합니다
3.  최근 무작위로 나타나는 PCDN 때문에 프리미엄 멤버십 회원인 저는 몹시 불쾌합니다
4.  CMD를 통해 BBDown을 사용하는 것은 다소 번거롭습니다

### 목표

1.  구독 피드의 분류별 보기 지원
2.  네이티브 클라이언트, 가능하면 크로스플랫폼
3.  PCDN 교체
4.  BBDown 명령 래핑

### 조치

1.  .NET 경험이 어느 정도 있어서 (이전 직장의 주요 기술 스택은 `ASP.NET Core`), 이전에 SwiftUI와 Android Compose 같은 MVVM 프레임워크도 실습해 본 적이 있어서, 몇 가지 유명한 서드파티 B站 클라이언트(BiliLite, 哔哩)의 소스 코드를 읽어 보려 했지만, XAML의 장황한 문법에 금방 질려 포기했습니다. 특히 Rider조차 XAML 지원이 그리 완벽하지 않아서 정신이 아득해졌습니다.
2.  C++와 QT를 처음부터 일주일 동안 살펴보았지만 진도가 매우 이상적이지 않아 일단 포기했습니다.
3.  이전에 사용했던 Android Compose에 Desktop 버전이 나왔다는 것이 기억나서 compose-jb를 일주일 정도 만져 보았고 어느 정도 성과는 있었습니다. 하지만 툴체인이 너무 원시적이었고, 많은 패키지가 dev-daily에서만 실행되었으며, 버그도 비교적 많았습니다. Swing 기반으로 래핑한 일부 컴포넌트의 결과가 매우 나빠서 포기했습니다.
4.  compose-jb 튜토리얼을 보다가 댓글창에서 Tauri를 보게 되었고, 소개를 보니 목표가 Electron을 대체하는 것이었습니다(처음부터 네이티브를 추구했기 때문에 Electron은 바로 제외했습니다). 자세히 보니 백엔드에서 node를 Rust로 대체해 운영체제와 소통하는 브리지로 사용하고 있었습니다. Rust의 명성은 몇 년째 많이 들어 왔고, 늘 고성능이라는 꼬리표가 따라붙어서 한번 시도해 보기로 했습니다.
5.  Tauri를 공부하면서 Vue3와 Vite를 알게 되었고, 사용해 본 뒤 속도에 감탄했습니다. Vue 3를 배우는 추가 목표를 가지고 개발 플랫폼을 정했습니다.

### 결과

1.  목표 모두 구현
2.  Github Actions를 통해 여러 플랫폼에서 Release를 자동 빌드합니다.
3.  Tauri의 Shell 부분에는 중국어 지원이 빠져 있으며, 개발 버전은 이미 업데이트되었으니 업스트림 업데이트를 기다리고 있습니다.

---

# Readme

## Tauri 크로스플랫폼 B站 클라이언트 플레이어

클라이언트라고는 하지만, 사실 재생과 피드 관련 기능만 구현했습니다… 다른 기능은 거의 사용하지 않기 때문입니다. 개인적으로 추천 피드는 저항할 수 없어서 모바일 버전과 Web의 첫 화면도 전혀 보지 않습니다.

먼저 몇 가지 유명한 서드파티 B站 클라이언트(BiliLite, 哔哩)의 소스 코드를 읽어 보려 했지만, XAML 문법이 너무 불편했고 크로스플랫폼도 불가능했습니다. 개인적으로 절반 조금 못 되는 시간을 Mac에서 보내고 있습니다.

여러 우여곡절 끝에 Tauri를 알게 되었습니다.  
Tauri + Vite + Vue 3로 구축했으며, 개인적으로 Vue 3를 배우는 연습 프로젝트이기도 합니다.

-   핵심 재생 기능과 탄막 지원은 [DPlayer.js](https://dplayer.js.org/zh/guide.html#%E5%AE%89%E8%A3%85)에서 제공됩니다
-   API는 Github의 공개 저장소 [bilibili-API-collect](https://github.com/SocialSisterYi/bilibili-API-collect/)에서 가져왔습니다
-   Rust가 로컬 프록시를 시작해 스트림을 가져옵니다

## 기능

-   미니멀: 동영상 피드와 재생 기능만 있고 추천 피드도, B博도 없습니다
-   동영상 피드 필터링 지원: 카테고리 | 제목 | UP主
-   단일 페이지 플레이어, 재생 목록 지원
-   무작위로 나타나는 PCDN을 교체했습니다
-   BBDown을 간단히 래핑했습니다
-   성능이 우수하고 점유율이 매우 작습니다. 실측으로 WIN 11에서 시작 속도가 네이티브 UWP와 비슷합니다
-   크로스플랫폼: 이미 macOS, Ubuntu, Win 설치 패키지를 Release했습니다
-   라이트/다크 테마 지원

## 문제

-   dplayer는 믹싱을 지원하지 않아, 이벤트 메커니즘과 네이티브 audio를 조합해 간단히 믹싱을 구현했습니다. 영상과 소리가 동기화되지 않는 경우가 발생할 수 있으며(주로 동영상을 전환할 때 나타남), 일시정지 후 다시 재생하면 완화됩니다
-   댓글 영역과 탄막 차단에는 고급 기능이 부족하여 단순한 탐색만 충족합니다

## 할 일

-   Rust + WASM으로 재생 믹싱 해결, DPlayer의 탄막 엔진 개선
-   댓글 영역 개선, 특색 기능 추가 – 사용자 성분 조회, 댓글 내용 중복 검사
-   B站 자막 연동
-   다중 창 재생 모드
-   사용자 정의 플러그인 지원
-   다른 기능 모듈도 구현할 수 있습니다

## 저장소 주소

Github: [bbhouse-tauri](https://github.com/endcloud/bbhouse-tauri)