├── .gitattributes
├── .github
    ├── FUNDING.yml
    └── workflows
    │   └── pages-deploy.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── public
    ├── index.html
    └── live.html
├── src
    ├── components
    │   ├── DanmakuItem.vue
    │   ├── DanmakuList.vue
    │   ├── InputGroup.vue
    │   └── Live.vue
    ├── pages
    │   ├── index
    │   │   ├── App.vue
    │   │   └── main.js
    │   └── live
    │   │   ├── App.vue
    │   │   └── main.js
    └── utils
    │   ├── biliOpen.js
    │   ├── bufferPolyfill.js
    │   ├── face.js
    │   ├── loadImg.js
    │   ├── props.js
    │   ├── protobuf.js
    │   ├── qrLogin.js
    │   ├── request.js
    │   └── storage.js
├── vercel.json
├── vue.config.js
└── yarn.lock


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: jindaikirin
2 | custom: ['https://afdian.net/@jindaikirin']
3 | 


--------------------------------------------------------------------------------
/.github/workflows/pages-deploy.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy to Pages
 2 | 
 3 | on:
 4 |   workflow_dispatch:
 5 | 
 6 | jobs:
 7 |   build-and-deploy:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - name: Checkout
11 |         uses: actions/checkout@v2
12 |         with:
13 |           ref: master
14 |           persist-credentials: false
15 |       - name: Install dependencies
16 |         run: yarn install --frozen-lockfile
17 |       - name: Build
18 |         run: yarn run build
19 |       - name: Deploy
20 |         uses: JamesIves/github-pages-deploy-action@3.7.1
21 |         with:
22 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
23 |           BRANCH: dist
24 |           FOLDER: dist
25 |           CLEAN: true
26 |           SINGLE_COMMIT: true
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 120,
 3 |   "singleQuote": true,
 4 |   "trailingComma": "es5",
 5 |   "arrowParens": "avoid",
 6 |   "htmlWhitespaceSensitivity": "css",
 7 |   "useTabs": false,
 8 |   "tabWidth": 2,
 9 |   "semi": true
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 神代綺凜
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Bilibili Live Chat
  2 | 
  3 | ![Preview](https://i.loli.net/2020/06/20/vXuZKCq396co2HO.gif)
  4 | 
  5 | 这是一个无后端的，仿 YouTube Live Chat 的，箱都不用开就能食用的 Bilibili 直播弹幕姬
  6 | 
  7 | 主要用于 OBS，为的是在低功能需求的情况下，不依靠任何第三方本地软件实现弹幕和礼物的展示
  8 | 
  9 | 老版本在 `v1` 分支，新版本是使用 Vue 3 重构的版本，并增加了一些新特性，成品直接部署在 Github Pages
 10 | 
 11 | ## 食用步骤
 12 | 
 13 | 1. 打开 [blc.lolicon.app](https://blc.lolicon.app/)
 14 | 2. 输入房间号，填写设置项，点击“Go!”，然后复制新页面的地址
 15 | 3. 在 OBS 中添加“浏览器”来源，将地址粘贴到“URL”处，根据自己需要调整宽高和缩放
 16 | 4. Enjoy~
 17 | 
 18 | ## 其他说明
 19 | 
 20 | ### 连接模式
 21 | 
 22 | B站在2023年7月左右开始对游客模式下的直播弹幕进行用户名打码、限流等操作，如果需要正常使用有两种方法
 23 | 
 24 | 1. 在“普通模式”下额外提供 [live.bilibili.com](https://live.bilibili.com/) 的 cookie，**可以连接任意直播间**
 25 | 2. 【推荐】使用“开放平台”模式，需要注册 Bilibili 开放平台个人开发者并提供一些参数，**只能连接自己的直播间**
 26 | 
 27 | #### 普通模式
 28 | 
 29 | 该模式若未提供 cookie 则为游客身份连接，会出现收到的弹幕用户名被打码且随机限流（部分弹幕收不到）的情况
 30 | 
 31 | 若提供 [live.bilibili.com](https://live.bilibili.com/) 的 cookie，则会使用该 cookie 调用B站 API 获取直播弹幕连接 token
 32 | 
 33 | 支持手机 APP 扫码登录（仅限本项目官方站点）（[隐私声明](#隐私声明)）
 34 | 
 35 | > [!NOTE]  
 36 | > 由于需要发送 cookie，因此无论是否开启跨域模式，调用该 API 都需要依赖反代服务（详见[跨域模式](#跨域模式)）
 37 | 
 38 | #### 开放平台
 39 | 
 40 | 该模式只能连接自己的直播间，但为 Bilibili 官方开放的连接方式，因此更推荐使用
 41 | 
 42 | 1. 前往开放平台注册个人开发者（[注册地址](https://open-live.bilibili.com/open-register-form/personal)），提交注册后需要等待审核通过
 43 | 2. 前往[创作者服务中心](https://open-live.bilibili.com/open-manage)-我的项目，随意创建一个项目，点进项目拿到**项目ID**
 44 | 3. 前往[创作者服务中心](https://open-live.bilibili.com/open-manage)-个人资料，拿到 **access_key_id** 和 **access_key_secret**
 45 | 4. 获取**身份码**，两种方法任选其一
 46 |    - [我的直播间](https://link.bilibili.com/p/center/index/#/my-room/start-live)-开始直播-身份码
 47 |    - [互动应用中心](https://play-live.bilibili.com/)-右下角菜单-身份码
 48 | 
 49 | ### 跨域模式
 50 | 
 51 | B站 API 无法被跨域调用，若不开启跨域模式，则会使用反代服务（[隐私声明](#隐私声明)）
 52 | 
 53 | 若在 OBS 使用，则推荐开启跨域模式，方法如下：
 54 | 
 55 | 任何基于 Chromium 的浏览器（例如 OBS Browser 和 Chrome）都可以通过添加 `--disable-web-security` 启动参数来禁用网页安全机制，此时可以开启“跨域模式”选项，几乎所有B站 API 将被直接跨域调用（需要 cookie 的除外），这样就不需要依赖反代服务
 56 | 
 57 | 示例：
 58 | 
 59 | - OBS：直接在启动的快捷方式后追加该参数，然后通过快捷方式启动即可  
 60 |   ![obs](https://i.loli.net/2020/06/20/QkXOfoTalnpAvt3.png)
 61 | - Chrome：和 OBS 同理，不过必须额外添加一个  `--user-data-dir` 参数来指定用户目录，随意新建一个空文件夹来指定即可  
 62 |   该操作看上去十分麻烦，实则是 Chrome 的一个安全措施，因为**禁用网页安全机制是危险行为，日常使用时千万别这么做**  
 63 |   ![chrome](https://s2.loli.net/2023/09/24/KL8UkX93p2ZdYSe.png)
 64 | 
 65 | 其他内核的浏览器可以自行搜索相应参数来禁用网页安全机制
 66 | 
 67 | ### 显示头像
 68 | 
 69 | > 已支持从弹幕信息中获取头像，不再需要调用 API  
 70 | > 不过普通模式下可能没有头像，不知道为什么B站又不提供 `dm_v2` 了
 71 | 
 72 | 头像加载机制：
 73 | 
 74 | - 获取到头像后，图片会被预加载，加载完毕或超时（5 秒）后弹幕才会被插入弹幕列表
 75 | - 非 GIF 头像会优先加载小头像（48x48）以节省流量，若首包到达时间超过 2 秒（B站 COS 图片压缩处理卡了，偶尔可能发生），则会回退为加载完整大小的头像图片
 76 | 
 77 | ## 隐私声明
 78 | 
 79 | 本项目官方站点 [blc.lolicon.app](https://blc.lolicon.app/) 会额外使用到以下两个本人开源并部署在公共平台上的服务：
 80 | 
 81 | 1. B站API反向代理服务 [Tsuk1ko/blc-proxy](https://github.com/Tsuk1ko/blc-proxy) 部署于 HuggingFace
 82 | 2. B站扫码登录服务 [Tsuk1ko/bilibili-qr-login](https://github.com/Tsuk1ko/bilibili-qr-login) 部署于 HuggingFace
 83 | 
 84 | 本站及上述服务不会收集任何信息，若不信任请勿在【关闭跨域模式】或【在普通连接模式下提供 cookie】的情况下使用本项目及【扫码登录】功能
 85 | 
 86 | ## Project setup
 87 | 
 88 | ```bash
 89 | yarn install
 90 | ```
 91 | 
 92 | ### Compiles and hot-reloads for development
 93 | 
 94 | ```bash
 95 | yarn serve
 96 | ```
 97 | 
 98 | ### Compiles and minifies for production
 99 | 
100 | ```bash
101 | yarn build
102 | ```
103 | 
104 | ### Lints and fixes files
105 | 
106 | ```bash
107 | yarn lint
108 | ```
109 | 
110 | ### Customize configuration
111 | 
112 | See [Configuration Reference](https://cli.vuejs.org/config/).
113 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ['lodash', '@babel/plugin-proposal-nullish-coalescing-operator', '@babel/plugin-proposal-optional-chaining'],
3 |   presets: ['@vue/cli-plugin-babel/preset'],
4 | };
5 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["./src/**/*"],
 3 |   "compilerOptions": {
 4 |     "target": "ESNext",
 5 |     "baseUrl": ".",
 6 |     "moduleResolution": "node",
 7 |     "resolveJsonModule": true,
 8 |     "paths": {
 9 |       "@/*": ["src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bilibili-live-chat",
 3 |   "version": "2.8.1",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "postversion": "tpv"
10 |   },
11 |   "dependencies": {
12 |     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
13 |     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
14 |     "bilibili-live-ws": "^6.3.1",
15 |     "buffer": "^6.0.3",
16 |     "core-js": "^3.32.2",
17 |     "lodash": "^4.17.21",
18 |     "lru-cache": "^10.0.1",
19 |     "md5": "^2.3.0",
20 |     "pako": "^2.1.0",
21 |     "protobufjs": "^7.2.5",
22 |     "query-string": "^7.1.3",
23 |     "uuid": "^9.0.1",
24 |     "vue": "^3.3.4"
25 |   },
26 |   "devDependencies": {
27 |     "@tsuk1ko/postversion": "^1.0.2",
28 |     "@vue/cli-plugin-babel": "^5.0.8",
29 |     "@vue/cli-plugin-eslint": "^5.0.8",
30 |     "@vue/cli-service": "^5.0.8",
31 |     "@vue/compiler-sfc": "^3.3.4",
32 |     "babel-eslint": "^10.1.0",
33 |     "babel-plugin-lodash": "^3.3.4",
34 |     "eslint": "^7.32.0",
35 |     "eslint-plugin-vue": "^9.17.0",
36 |     "lint-staged": "^13.3.0",
37 |     "prettier": "^3.0.3",
38 |     "sass": "^1.68.0",
39 |     "sass-loader": "^13.3.2"
40 |   },
41 |   "eslintConfig": {
42 |     "root": true,
43 |     "env": {
44 |       "node": true
45 |     },
46 |     "extends": [
47 |       "plugin:vue/vue3-essential",
48 |       "eslint:recommended"
49 |     ],
50 |     "parserOptions": {
51 |       "parser": "babel-eslint"
52 |     },
53 |     "rules": {
54 |       "no-empty": "off",
55 |       "no-unused-vars": "warn",
56 |       "vue/multi-word-component-names": "off"
57 |     }
58 |   },
59 |   "browserslist": [
60 |     "> 1%",
61 |     "last 2 versions",
62 |     "not dead"
63 |   ],
64 |   "gitHooks": {
65 |     "pre-commit": "lint-staged"
66 |   },
67 |   "lint-staged": {
68 |     "*.{js,vue}": [
69 |       "vue-cli-service lint",
70 |       "prettier --write",
71 |       "git add"
72 |     ]
73 |   }
74 | }
75 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
 9 |     />
10 |     <meta name="referrer" content="no-referrer" />
11 |     <link rel="icon" href="https://www.bilibili.com/favicon.ico" type="image/x-icon" crossorigin="anonymous" />
12 |     <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico" type="image/x-icon" crossorigin="anonymous" />
13 |     <title>Bilibili Live Chat</title>
14 |     <link rel="dns-prefetch" href="https://ghbtns.com/" />
15 |     <link rel="preconnect" href="https://ghbtns.com/" crossorigin="anonymous" />
16 |     <link rel="dns-prefetch" href="https://i0.hdslb.com/" />
17 |     <link rel="dns-prefetch" href="https://i1.hdslb.com/" />
18 |     <link rel="dns-prefetch" href="https://i2.hdslb.com/" />
19 |     <link rel="dns-prefetch" href="https://i3.hdslb.com/" />
20 |     <link rel="dns-prefetch" href="https://blc-proxy.lolicon.app/" />
21 |     <link rel="dns-prefetch" href="https://api.live.bilibili.com/" />
22 |     <link rel="dns-prefetch" href="https://live-open.biliapi.com/" />
23 |     <link
24 |       href="https://code.bdstatic.com/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"
25 |       rel="stylesheet"
26 |       crossorigin="anonymous"
27 |     />
28 |   </head>
29 |   <body>
30 |     <noscript><strong>请启用 JavaScript，否则页面无法正常工作。</strong></noscript>
31 |     <div id="app"></div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/public/live.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta
 7 |       name="viewport"
 8 |       content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
 9 |     />
10 |     <meta name="referrer" content="no-referrer" />
11 |     <link rel="icon" href="https://www.bilibili.com/favicon.ico" type="image/x-icon" crossorigin="anonymous" />
12 |     <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico" type="image/x-icon" crossorigin="anonymous" />
13 |     <title>Bilibili Live Chat</title>
14 |     <link rel="dns-prefetch" href="https://i0.hdslb.com/" />
15 |     <link rel="dns-prefetch" href="https://i1.hdslb.com/" />
16 |     <link rel="dns-prefetch" href="https://i2.hdslb.com/" />
17 |     <link rel="dns-prefetch" href="https://i3.hdslb.com/" />
18 |     <link rel="dns-prefetch" href="https://blc-proxy.lolicon.app/" />
19 |     <link rel="dns-prefetch" href="https://api.live.bilibili.com/" />
20 |     <link rel="dns-prefetch" href="https://live-open.biliapi.com/" />
21 |     <link
22 |       rel="stylesheet"
23 |       href="https://fonts.loli.net/css?family=Changa One"
24 |       type="text/css"
25 |       crossorigin="anonymous"
26 |     />
27 |     <link rel="stylesheet" href="https://fonts.loli.net/css?family=Imprima" type="text/css" crossorigin="anonymous" />
28 |   </head>
29 |   <body>
30 |     <noscript><strong>请启用 JavaScript，否则页面无法正常工作。</strong></noscript>
31 |     <div id="app"></div>
32 |   </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/src/components/DanmakuItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="danmaku-item" :class="{ hidden: isHidden }">
  3 |     <img v-if="showFace && face" class="danmaku-author-face" :src="face" />
  4 |     <div v-if="type === 'message'" class="danmaku-content">
  5 |       <span class="danmaku-author-name with-colon" :class="{ anchor: isAnchor, owner: isOwner }">{{ uname }}</span>
  6 |       <span class="danmaku-message">{{ message }}</span>
  7 |     </div>
  8 |     <div v-else-if="type === 'gift'" class="danmaku-content">
  9 |       <span class="danmaku-message">感谢&nbsp;</span>
 10 |       <span class="danmaku-author-name">{{ uname }}</span>
 11 |       <span class="danmaku-message">&nbsp;赠送的&nbsp;</span>
 12 |       <span class="danmaku-gift-name">{{ giftName }}</span>
 13 |       <template v-if="num">
 14 |         <span class="danmaku-message">&nbsp;×&nbsp;</span>
 15 |         <span class="danmaku-gift-num">{{ num }}</span>
 16 |       </template>
 17 |     </div>
 18 |     <div v-else-if="type === 'sc'" class="danmaku-content">
 19 |       <span class="danmaku-message">感谢&nbsp;</span>
 20 |       <span class="danmaku-author-name">{{ uname }}</span>
 21 |       <span class="danmaku-message">&nbsp;的SC：{{ message }}</span>
 22 |     </div>
 23 |     <div v-else-if="type === 'info'" class="danmaku-content">
 24 |       <span class="danmaku-message info">{{ message }}</span>
 25 |     </div>
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script>
 30 | import { toRefs, ref, computed, onBeforeUnmount } from 'vue';
 31 | 
 32 | export default {
 33 |   props: {
 34 |     type: {
 35 |       type: String,
 36 |       default: 'message',
 37 |     },
 38 |     showFace: Boolean,
 39 |     face: String,
 40 |     uid: Number,
 41 |     uname: String,
 42 |     message: String,
 43 |     isAnchor: Boolean,
 44 |     isOwner: Boolean,
 45 |     giftName: String,
 46 |     num: Number,
 47 |     stay: Number,
 48 |     hidden: Boolean,
 49 |   },
 50 |   setup(props) {
 51 |     const hidden = ref(false);
 52 |     const needRemoved = ref(false);
 53 |     if (props.stay) {
 54 |       const stayTimeout = setTimeout(() => {
 55 |         hidden.value = true;
 56 |         if (props.type === 'info') {
 57 |           setTimeout(() => (needRemoved.value = true), 800);
 58 |         }
 59 |       }, props.stay);
 60 |       onBeforeUnmount(() => clearTimeout(stayTimeout));
 61 |     }
 62 |     const isHidden = computed(() => props.hidden || hidden.value);
 63 |     return { ...toRefs(props), isHidden, needRemoved };
 64 |   },
 65 | };
 66 | </script>
 67 | 
 68 | <style lang="scss">
 69 | @keyframes danmakuIn {
 70 |   from {
 71 |     opacity: 0;
 72 |   }
 73 |   to {
 74 |     opacity: 1;
 75 |   }
 76 | }
 77 | .danmaku {
 78 |   &-item {
 79 |     padding: 4px;
 80 |     display: flex;
 81 |     flex-direction: row;
 82 |     align-items: flex-start;
 83 |     transition: opacity 0.5s;
 84 |     user-select: none;
 85 |     text-shadow:
 86 |       -2px -2px #000000,
 87 |       -2px -1px #000000,
 88 |       -2px 0 #000000,
 89 |       -2px 1px #000000,
 90 |       -2px 2px #000000,
 91 |       -1px -2px #000000,
 92 |       -1px -1px #000000,
 93 |       -1px 0 #000000,
 94 |       -1px 1px #000000,
 95 |       -1px 2px #000000,
 96 |       0 -2px #000000,
 97 |       0 -1px #000000,
 98 |       0 0 #000000,
 99 |       0 1px #000000,
100 |       0 2px #000000,
101 |       1px -2px #000000,
102 |       1px -1px #000000,
103 |       1px 0 #000000,
104 |       1px 1px #000000,
105 |       1px 2px #000000,
106 |       2px -2px #000000,
107 |       2px -1px #000000,
108 |       2px 0 #000000,
109 |       2px 1px #000000,
110 |       2px 2px #000000;
111 |     animation: 0.5s danmakuIn;
112 |     opacity: 1;
113 |     &.hidden {
114 |       opacity: 0;
115 |     }
116 |   }
117 |   &-author-face {
118 |     width: 24px;
119 |     height: 24px;
120 |     border-radius: 24px;
121 |     margin-right: 6px;
122 |     display: inline-block;
123 |     pointer-events: none;
124 |   }
125 |   &-content {
126 |     overflow: initial;
127 |     align-self: center;
128 |   }
129 |   &-author-name {
130 |     color: #8cd9ff;
131 |     &.with-colon::after {
132 |       content: '：';
133 |       margin-left: 2px;
134 |     }
135 |     // 主播
136 |     &.anchor {
137 |       color: #fff248;
138 |     }
139 |     // 房管
140 |     &.owner {
141 |       color: #ff9800;
142 |     }
143 |   }
144 |   &-message,
145 |   &-gift-num {
146 |     color: #fff;
147 |   }
148 |   &-gift-name {
149 |     color: #eb76ff;
150 |   }
151 |   &-message {
152 |     font-family: 'Imprima', 'Microsoft YaHei';
153 |     font-size: 18px;
154 |     line-height: 18px;
155 |     &.info {
156 |       white-space: pre-wrap;
157 |     }
158 |   }
159 |   &-gift-num {
160 |     font-family: 'Imprima', 'Microsoft YaHei';
161 |     font-size: 20px;
162 |     line-height: 20px;
163 |     font-weight: 500;
164 |   }
165 |   &-author-name,
166 |   &-gift-name {
167 |     font-family: 'Changa One', 'Microsoft YaHei';
168 |     font-size: 20px;
169 |     line-height: 20px;
170 |     font-weight: 500;
171 |   }
172 | }
173 | </style>
174 | 


--------------------------------------------------------------------------------
/src/components/DanmakuList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="isGiftList" class="danmaku-list-pinned" ref="danmakuListRef">
  3 |     <div class="danmaku-list hidden">
  4 |       <danmaku-item
  5 |         v-for="i in giftPin"
  6 |         :key="i"
  7 |         :show-face="giftShowFace"
  8 |         type="gift"
  9 |         uname="某人"
 10 |         giftName="礼物"
 11 |         :num="i"
 12 |       />
 13 |     </div>
 14 |     <div class="danmaku-list absolute" ref="giftListRef">
 15 |       <danmaku-item
 16 |         v-for="item in danmakuList"
 17 |         :key="item.key"
 18 |         v-bind="item.props"
 19 |         :hidden="item.hidden"
 20 |         :ref="el => (item.el = el)"
 21 |       />
 22 |     </div>
 23 |   </div>
 24 |   <div v-else class="danmaku-list" ref="danmakuListRef">
 25 |     <div v-if="display === 'bottom'" class="danmaku-list-placeholder"></div>
 26 |     <danmaku-item
 27 |       v-for="item in danmakuList"
 28 |       :key="item.key"
 29 |       v-bind="item.props"
 30 |       :hidden="item.hidden"
 31 |       :ref="el => (item.el = el)"
 32 |     />
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | import { ref, toRefs, onBeforeUnmount, nextTick, onMounted, unref } from 'vue';
 38 | import { v4 as uuid } from 'uuid';
 39 | import { propsType } from '@/utils/props';
 40 | import { loadFace } from '@/utils/face';
 41 | import { sampleSize } from 'lodash';
 42 | 
 43 | import DanmakuItem from '@/components/DanmakuItem';
 44 | 
 45 | export default {
 46 |   components: { DanmakuItem },
 47 |   props: {
 48 |     ...propsType,
 49 |     isGiftList: Boolean,
 50 |     giftShowFace: Boolean,
 51 |   },
 52 |   setup(props) {
 53 |     // 运行状态
 54 |     let RUNNING = true;
 55 |     onBeforeUnmount(() => (RUNNING = false));
 56 | 
 57 |     // 弹幕列表
 58 |     const danmakuList = ref([]);
 59 |     const danmakuListRef = ref(null);
 60 |     const giftListRef = ref(null);
 61 | 
 62 |     // 移除不可见弹幕
 63 |     onMounted(() => {
 64 |       const topOfList = danmakuListRef.value.getBoundingClientRect().top - 5;
 65 |       const removeInvisibleDanmaku = () => {
 66 |         const i = danmakuList.value.findIndex(item => {
 67 |           const { top = topOfList, height = 0 } = item.el?.$el?.getBoundingClientRect() ?? {};
 68 |           if (top < topOfList) item.hidden = true;
 69 |           return top + height > topOfList && !item.el?.needRemoved;
 70 |         });
 71 |         if (i > 0) danmakuList.value.splice(0, i);
 72 |       };
 73 |       const danmakuInterval = setInterval(removeInvisibleDanmaku, 100);
 74 |       onBeforeUnmount(() => clearInterval(danmakuInterval));
 75 |     });
 76 | 
 77 |     // 滚动到最底部（为了平滑滚动）
 78 |     const scrollList = () => {
 79 |       const el = unref(props.isGiftList ? giftListRef : danmakuListRef);
 80 |       if (el) el.scrollTop = el.scrollHeight;
 81 |     };
 82 |     if (!props.isGiftList) {
 83 |       onMounted(() => window.addEventListener('resize', scrollList));
 84 |       onBeforeUnmount(() => window.removeEventListener('resize', scrollList));
 85 |     }
 86 | 
 87 |     // 普通弹幕队列
 88 |     const danmakuQueue = [];
 89 |     const handleDanmakuQueue = () => {
 90 |       let sleep = 200;
 91 |       const { length } = danmakuQueue;
 92 |       if (length > 0) {
 93 |         sleep = Math.min(sleep, 1000 / length);
 94 |         danmakuList.value.push(danmakuQueue.shift());
 95 |         nextTick(scrollList);
 96 |       }
 97 |       if (RUNNING) setTimeout(handleDanmakuQueue, sleep);
 98 |     };
 99 |     handleDanmakuQueue();
100 | 
101 |     // 添加弹幕
102 |     const addDanmaku = async danmaku => {
103 |       if (danmaku.showFace && danmaku.face) {
104 |         danmaku.face = await loadFace(danmaku.uid, danmaku.face);
105 |       }
106 |       danmaku.stay = danmaku.stay || (props.display === 'bottom' ? props.stay : 0);
107 |       danmakuQueue.push({
108 |         props: danmaku,
109 |         key: uuid(),
110 |         el: null,
111 |         hidden: false,
112 |       });
113 |     };
114 | 
115 |     // 限速弹幕队列
116 |     const speedLimitQueue = [];
117 |     if (props.limit) {
118 |       const handleSpeedLimitInterval = setInterval(() => {
119 |         let temp = speedLimitQueue.splice(0);
120 |         if (!temp.length) return;
121 |         if (temp.length > props.limit) {
122 |           temp = sampleSize(Object.keys(temp), props.limit)
123 |             .sort()
124 |             .map(i => temp[i]);
125 |         }
126 |         temp.forEach(danmaku => addDanmaku(danmaku));
127 |       }, 1000);
128 |       onBeforeUnmount(() => clearInterval(handleSpeedLimitInterval));
129 |     }
130 | 
131 |     // 添加限速弹幕
132 |     const addSpeedLimitDanmaku = danmaku => speedLimitQueue.push(danmaku);
133 | 
134 |     return {
135 |       ...toRefs(props),
136 |       danmakuList,
137 |       danmakuListRef,
138 |       giftListRef,
139 |       addDanmaku,
140 |       addSpeedLimitDanmaku,
141 |     };
142 |   },
143 | };
144 | </script>
145 | 
146 | <style lang="scss">
147 | .danmaku-list {
148 |   flex-grow: 1;
149 |   width: 100%;
150 |   overflow: hidden;
151 |   scroll-behavior: smooth;
152 |   &.hidden {
153 |     visibility: hidden;
154 |   }
155 |   &.absolute {
156 |     position: absolute;
157 |     top: 0;
158 |     right: 0;
159 |     bottom: 0;
160 |     left: 0;
161 |   }
162 |   &-pinned {
163 |     position: relative;
164 |     flex-grow: 0;
165 |     flex-shrink: 0;
166 |     width: 100%;
167 |   }
168 |   &-placeholder {
169 |     height: 100%;
170 |   }
171 | }
172 | </style>
173 | 


--------------------------------------------------------------------------------
/src/components/InputGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="input-group">
 3 |     <span class="input-group-addon front">{{ header }}</span>
 4 |     <slot></slot>
 5 |     <span v-if="footer" class="input-group-addon bl-0">{{ footer }}</span>
 6 |     <span v-else-if="$slots.footer" class="input-group-addon bl-0"><slot name="footer"></slot></span>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: {
13 |     header: String,
14 |     footer: String,
15 |   },
16 | };
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/components/Live.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="live">
  3 |     <danmaku-list
  4 |       ref="giftPinList"
  5 |       v-bind="props"
  6 |       :gift-show-face="showFace"
  7 |       :is-gift-list="true"
  8 |       v-if="props.giftPin"
  9 |     />
 10 |     <danmaku-list ref="danmakuList" v-bind="props" />
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | import { onBeforeUnmount, ref, onMounted, computed } from 'vue';
 16 | import { KeepLiveWS } from 'bilibili-live-ws';
 17 | import { propsType } from '@/utils/props';
 18 | import { decodeDmV2 } from '@/utils/protobuf';
 19 | 
 20 | import DanmakuList from '@/components/DanmakuList';
 21 | 
 22 | export default {
 23 |   components: { DanmakuList },
 24 |   props: {
 25 |     ...propsType,
 26 |     anchor: Number,
 27 |     liveWsOptions: Object,
 28 |   },
 29 |   setup(props) {
 30 |     const giftPinList = ref(null);
 31 |     const danmakuList = ref(null);
 32 | 
 33 |     const giftCombMap = new Map();
 34 |     const showFace = computed(() => props.face !== 'false');
 35 | 
 36 |     const blockUIDs = computed(() => new Set(props.blockUID.split(/,|\|/).map(uid => uid.trim())));
 37 |     const isBlockedUID = uid => blockUIDs.value.has(String(uid));
 38 | 
 39 |     let failedTimestamps = [];
 40 | 
 41 |     const addInfoDanmaku = message => {
 42 |       danmakuList.value.addDanmaku({
 43 |         type: 'info',
 44 |         message,
 45 |         stay: props.stay || 5000,
 46 |       });
 47 |     };
 48 |     const addDanmaku = danmaku => {
 49 |       if (props.limit) danmakuList.value.addSpeedLimitDanmaku(danmaku);
 50 |       else danmakuList.value.addDanmaku(danmaku);
 51 |     };
 52 | 
 53 |     onMounted(() => {
 54 |       console.log('正在连接直播弹幕服务器', props.room);
 55 |       const live = new KeepLiveWS(props.room, props.liveWsOptions || { protover: 3, uid: 0 });
 56 |       live.interval = 1000;
 57 |       onBeforeUnmount(() => live.close());
 58 |       live.on('open', () => {
 59 |         if (live.closed) return;
 60 |         console.log('已连接直播弹幕服务器');
 61 |         addInfoDanmaku('已连接直播弹幕服务器');
 62 |       });
 63 |       live.on('live', () => {
 64 |         if (live.closed) return;
 65 |         console.log('已连接直播间', props.room);
 66 |         addInfoDanmaku(`已连接直播间 ${props.room}`);
 67 |       });
 68 |       live.on('close', () => {
 69 |         if (live.closed) return;
 70 |         console.log('连接已断开');
 71 |         addInfoDanmaku('连接已断开');
 72 |         const now = Date.now();
 73 |         failedTimestamps = failedTimestamps.filter(time => now - time < 10000);
 74 |         failedTimestamps.push(now);
 75 |         if (failedTimestamps.length >= 3) {
 76 |           console.log('连接失败过于频繁，停止重连');
 77 |           addInfoDanmaku('连接失败过于频繁，停止重连');
 78 |           live.close();
 79 |         }
 80 |       });
 81 | 
 82 |       // 礼物
 83 |       const giftList = props.giftPin ? giftPinList : danmakuList;
 84 |       live.on('SEND_GIFT', ({ data }) => {
 85 |         handleSendGift(data);
 86 |       });
 87 |       live.on('LIVE_OPEN_PLATFORM_SEND_GIFT', ({ data: { uid, uname, gift_name, gift_num, uface } }) => {
 88 |         handleSendGift({ uid, uname, giftName: gift_name, num: gift_num, face: uface });
 89 |       });
 90 |       const handleSendGift = ({ uid, uname, giftName, num, face }) => {
 91 |         if (isBlockedUID(uid)) {
 92 |           console.log(`屏蔽了来自[${uname}]的礼物：${giftName}*${num}`);
 93 |           return;
 94 |         }
 95 |         if (props.giftComb) {
 96 |           const key = `${uid}-${giftName}`;
 97 |           const existComb = giftCombMap.get(key);
 98 |           if (existComb) {
 99 |             giftCombMap.set(key, {
100 |               ...existComb,
101 |               num: existComb.num + num,
102 |             });
103 |           } else {
104 |             giftCombMap.set(key, {
105 |               type: 'gift',
106 |               showFace: showFace.value,
107 |               uid,
108 |               uname,
109 |               giftName,
110 |               num,
111 |               face,
112 |             });
113 |             setTimeout(() => {
114 |               giftList.value.addDanmaku(giftCombMap.get(key));
115 |               giftCombMap.delete(key);
116 |             }, props.giftComb);
117 |           }
118 |         } else {
119 |           giftList.value.addDanmaku({
120 |             type: 'gift',
121 |             showFace: showFace.value,
122 |             uid,
123 |             uname,
124 |             giftName,
125 |             num,
126 |             face,
127 |           });
128 |         }
129 |       };
130 | 
131 |       // 弹幕
132 |       live.on('DANMU_MSG', ({ info: [, message, [uid, uname, isOwner]], dm_v2 }) => {
133 |         handleDanmaku({ uid, uname, message, isOwner, dmV2: dm_v2 });
134 |       });
135 |       live.on('LIVE_OPEN_PLATFORM_DM', ({ data: { uid, uname, msg, uface } }) => {
136 |         handleDanmaku({ uid, uname, message: msg, face: uface });
137 |       });
138 |       const handleDanmaku = ({ uid, uname, message, isOwner, dmV2, face }) => {
139 |         if (isBlockedUID(uid)) {
140 |           console.log(`屏蔽了来自[${uname}]的弹幕：${message}`);
141 |           return;
142 |         }
143 |         const danmaku = {
144 |           type: 'message',
145 |           showFace: showFace.value,
146 |           uid,
147 |           uname,
148 |           message,
149 |           isAnchor: uid === props.anchor,
150 |           isOwner: !!isOwner,
151 |           face,
152 |         };
153 |         if (dmV2) {
154 |           try {
155 |             const {
156 |               user: { face },
157 |             } = decodeDmV2(dmV2);
158 |             danmaku.face = face;
159 |           } catch (error) {
160 |             console.error('[decode dmV2 error]', error);
161 |           }
162 |         }
163 |         if (props.delay > 0) setTimeout(() => addDanmaku(danmaku), props.delay * 1000);
164 |         else addDanmaku(danmaku);
165 |       };
166 | 
167 |       // SC
168 |       live.on(
169 |         'SUPER_CHAT_MESSAGE',
170 |         ({
171 |           data: {
172 |             uid,
173 |             user_info: { uname, face },
174 |             message,
175 |           },
176 |         }) => {
177 |           handleSuperChat({ uid, uname, message, face });
178 |         }
179 |       );
180 |       live.on('LIVE_OPEN_PLATFORM_SUPER_CHAT', ({ data: { uid, uname, message, uface } }) => {
181 |         handleSuperChat({ uid, uname, message, face: uface });
182 |       });
183 |       const handleSuperChat = ({ uid, uname, message, face }) => {
184 |         giftList.value.addDanmaku({
185 |           type: 'sc',
186 |           showFace: showFace.value,
187 |           uid,
188 |           uname,
189 |           message,
190 |           face,
191 |         });
192 |       };
193 | 
194 |       // 舰长
195 |       const guardLevelMap = { 1: '总督', 2: '提督', 3: '舰长' };
196 |       live.on('GUARD_BUY', ({ data: { uid, username, gift_name, num } }) => {
197 |         handleGuard({ uid, uname: username, giftName: gift_name, num });
198 |       });
199 |       live.on('USER_TOAST_MSG', ({ data: { uid, username, role_name, num, unit } }) => {
200 |         handleGuard({ uid, uname: username, giftName: role_name, num, unit });
201 |       });
202 |       live.on(
203 |         'LIVE_OPEN_PLATFORM_GUARD',
204 |         ({
205 |           data: {
206 |             user_info: { uid, uname, uface },
207 |             guard_level,
208 |             guard_num,
209 |             guard_unit,
210 |           },
211 |         }) => {
212 |           handleGuard({
213 |             uid,
214 |             uname,
215 |             giftName: guardLevelMap[guard_level],
216 |             num: guard_num,
217 |             unit: guard_unit,
218 |             face: uface,
219 |           });
220 |         }
221 |       );
222 |       const handleGuard = ({ uid, uname, giftName, num, unit, face }) => {
223 |         giftList.value.addDanmaku({
224 |           type: 'gift',
225 |           showFace: showFace.value,
226 |           uid,
227 |           uname,
228 |           giftName: unit ? `${num}个${unit}${giftName}` : giftName,
229 |           num: unit ? 0 : num,
230 |           face,
231 |         });
232 |       };
233 |     });
234 | 
235 |     return { props, showFace, giftPinList, danmakuList };
236 |   },
237 | };
238 | </script>
239 | 
240 | <style lang="scss">
241 | #live {
242 |   margin: 0;
243 |   padding: 0;
244 |   height: 100%;
245 |   width: 100%;
246 |   background-color: transparent;
247 |   display: flex;
248 |   flex-direction: column;
249 | }
250 | </style>
251 | 


--------------------------------------------------------------------------------
/src/pages/index/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="panel" class="panel panel-default" spellcheck="false">
  3 |     <div class="panel-heading">
  4 |       <h2 class="panel-title" style="font-size: 30px; display: inline-block; margin-right: 10px">Bilibili Live Chat</h2>
  5 |       <iframe
  6 |         src="https://ghbtns.com/github-btn.html?user=Tsuk1ko&amp;repo=bilibili-live-chat&amp;type=star&amp;count=true&amp;size=large"
  7 |         frameborder="0"
  8 |         scrolling="0"
  9 |         width="160px"
 10 |         height="30px"
 11 |         style="vertical-align: bottom"
 12 |       ></iframe>
 13 |       <button class="btn btn-primary" type="button" :disabled="!canGo" @click="goLive">Go!</button>
 14 |       <button class="btn" :class="copyLinkClass" type="button" :disabled="!canGo" @click="copyLink">
 15 |         {{ copyLinkText }}
 16 |       </button>
 17 |     </div>
 18 |     <div class="panel-body">
 19 |       <!-- 连接模式 -->
 20 |       <InputGroup header="连接模式">
 21 |         <select class="form-control" v-model="form.auth">
 22 |           <option v-for="{ value, text } in options.auth" :key="value" :value="value">{{ text }}</option>
 23 |         </select>
 24 |         <template #footer>
 25 |           <a href="https://github.com/Tsuk1ko/bilibili-live-chat#连接模式" target="_blank">查看说明</a>
 26 |         </template>
 27 |       </InputGroup>
 28 |       <template v-if="form.auth === 'normal'">
 29 |         <!-- 直播间号 -->
 30 |         <InputGroup header="直播间号">
 31 |           <input
 32 |             class="form-control"
 33 |             type="number"
 34 |             min="0"
 35 |             step="1"
 36 |             placeholder="必填，支持短号"
 37 |             v-model.number="form.room"
 38 |           />
 39 |         </InputGroup>
 40 |         <!-- Cookie -->
 41 |         <InputGroup header="Cookie">
 42 |           <input class="form-control" type="text" placeholder="选填，不填则为游客模式" v-model="form.cookie" />
 43 |           <template #footer v-if="showQrLogin">
 44 |             <a style="cursor: pointer" @click="openQrLoginWindow">扫码登录</a>
 45 |           </template>
 46 |         </InputGroup>
 47 |       </template>
 48 |       <template v-else-if="form.auth === 'open'">
 49 |         <!-- AKId -->
 50 |         <InputGroup header="AKId">
 51 |           <input
 52 |             class="form-control"
 53 |             type="text"
 54 |             placeholder="必填，开放平台 - 个人资料 - access_key_id"
 55 |             v-model="form.akId"
 56 |           />
 57 |         </InputGroup>
 58 |         <!-- AKSecret -->
 59 |         <InputGroup header="AKSecret">
 60 |           <input
 61 |             class="form-control"
 62 |             type="text"
 63 |             placeholder="必填，开放平台 - 个人资料 - access_key_secret"
 64 |             v-model="form.akSecret"
 65 |           />
 66 |         </InputGroup>
 67 |         <!-- AppId -->
 68 |         <InputGroup header="AppId">
 69 |           <input
 70 |             class="form-control"
 71 |             type="number"
 72 |             min="0"
 73 |             step="1"
 74 |             placeholder="必填，开放平台 - 我的项目 - 项目ID"
 75 |             v-model.number="form.appId"
 76 |           />
 77 |         </InputGroup>
 78 |         <!-- 身份码 -->
 79 |         <InputGroup header="身份码">
 80 |           <input class="form-control" type="text" placeholder="必填，直播间开播后可见" v-model="form.code" />
 81 |         </InputGroup>
 82 |       </template>
 83 |       <!-- 跨域模式 -->
 84 |       <InputGroup header="跨域模式">
 85 |         <select class="form-control" v-model="form.cors">
 86 |           <option v-for="{ value, text } in options.cors" :key="value" :value="value">{{ text }}</option>
 87 |         </select>
 88 |         <template #footer>
 89 |           <a href="https://github.com/Tsuk1ko/bilibili-live-chat#跨域模式" target="_blank">查看说明</a>
 90 |         </template>
 91 |       </InputGroup>
 92 |       <!-- 显示头像 -->
 93 |       <InputGroup header="显示头像">
 94 |         <select class="form-control" v-model="form.face">
 95 |           <option v-for="{ value, text } in options.face" :key="value" :value="value">{{ text }}</option>
 96 |         </select>
 97 |       </InputGroup>
 98 |       <!-- 弹幕排列 -->
 99 |       <InputGroup header="弹幕排列">
100 |         <select class="form-control" v-model="form.display">
101 |           <option v-for="{ value, text } in options.display" :key="value" :value="value">{{ text }}</option>
102 |         </select>
103 |       </InputGroup>
104 |       <!-- 弹幕停留 -->
105 |       <InputGroup header="弹幕停留" footer="毫秒">
106 |         <input
107 |           class="form-control"
108 |           type="number"
109 |           min="0"
110 |           step="1"
111 |           placeholder="选填，弹幕过这么久后会被隐藏，仅弹幕排列为“自底部”时有效"
112 |           v-model.number="form.stay"
113 |         />
114 |       </InputGroup>
115 |       <!-- 频率限制 -->
116 |       <InputGroup header="频率限制" footer="条/秒">
117 |         <input
118 |           type="number"
119 |           min="1"
120 |           step="1"
121 |           class="form-control"
122 |           placeholder="选填，限制弹幕频率（不包括礼物），若超出频率则会随机丢弃弹幕"
123 |           v-model.number="form.limit"
124 |         />
125 |       </InputGroup>
126 |       <!-- 礼物合并 -->
127 |       <InputGroup header="礼物合并" footer="毫秒">
128 |         <input
129 |           class="form-control"
130 |           type="number"
131 |           min="0"
132 |           step="1"
133 |           placeholder="选填，合并统计的等待时间，不知道填多少可填 5000"
134 |           v-model.number="form.giftComb"
135 |         />
136 |       </InputGroup>
137 |       <!-- 礼物置顶 -->
138 |       <InputGroup header="礼物置顶" footer="条">
139 |         <input
140 |           class="form-control"
141 |           type="number"
142 |           min="0"
143 |           step="1"
144 |           placeholder="选填，可将礼物置顶，与弹幕分开展示，此项相当于设置礼物区域的高度"
145 |           v-model.number="form.giftPin"
146 |         />
147 |       </InputGroup>
148 |       <!-- 弹幕延迟 -->
149 |       <InputGroup header="弹幕延迟" footer="秒">
150 |         <input
151 |           class="form-control"
152 |           type="number"
153 |           min="0"
154 |           step="1"
155 |           placeholder="选填，收到弹幕后延迟这么久才会显示"
156 |           v-model.number="form.delay"
157 |         />
158 |       </InputGroup>
159 |       <!-- 屏蔽用户 -->
160 |       <InputGroup header="屏蔽用户">
161 |         <input
162 |           class="form-control"
163 |           type="text"
164 |           placeholder="选填，将不显示指定UID用户的弹幕和礼物，用英文逗号(,)分隔"
165 |           v-model="form.blockUID"
166 |         />
167 |       </InputGroup>
168 |       <InputGroup header="自定义CSS">
169 |         <textarea
170 |           class="form-control"
171 |           placeholder="OBS在添加浏览器的时候可以设置自定义CSS，不需要该设置项"
172 |           v-model="form.customCss"
173 |         />
174 |       </InputGroup>
175 |     </div>
176 |   </div>
177 | </template>
178 | 
179 | <script>
180 | import { defineComponent, unref, reactive, watch, computed, readonly, ref, onBeforeUnmount } from 'vue';
181 | import InputGroup from '@/components/InputGroup.vue';
182 | import { sget, sset } from '@/utils/storage';
183 | import { defaultProps, intProps, selectOptions } from '@/utils/props';
184 | import { stringify as qss } from 'query-string';
185 | import { fromPairs, pick, omit } from 'lodash';
186 | import { bindQrLogin, openQrLoginWindow, unbindQrLogin } from '@/utils/qrLogin';
187 | 
188 | export default defineComponent({
189 |   components: { InputGroup },
190 |   setup() {
191 |     const form = reactive({
192 |       ...defaultProps,
193 |       ...sget('setting', {}),
194 |     });
195 |     // 迁移
196 |     if (form.face !== 'false') form.face = true;
197 |     intProps.forEach(key => {
198 |       watch(
199 |         () => form[key],
200 |         value => {
201 |           if (typeof value !== 'number') return;
202 |           const newVal = Math.max(Math.floor(value), 0);
203 |           if (value === newVal) return;
204 |           form[key] = newVal;
205 |         },
206 |         { immediate: true }
207 |       );
208 |     });
209 | 
210 |     const canGo = computed(() => {
211 |       const { auth, room, akId, akSecret, appId, code } = form;
212 |       switch (auth) {
213 |         case 'normal':
214 |           return !!room;
215 |         case 'open':
216 |           return !!(akId && akSecret && appId && code);
217 |       }
218 |       return false;
219 |     });
220 | 
221 |     const simpleForm = computed(() =>
222 |       pick(
223 |         fromPairs(
224 |           Object.entries(form)
225 |             .filter(([k, v]) => {
226 |               const val = unref(v);
227 |               return val && val !== defaultProps[k];
228 |             })
229 |             .map(([k, v]) => [k, unref(v)])
230 |         ),
231 |         Object.keys(defaultProps)
232 |       )
233 |     );
234 |     watch(simpleForm, value => {
235 |       sset('setting', value);
236 |     });
237 | 
238 |     const getFinalForm = () => {
239 |       let data = simpleForm.value;
240 |       switch (form.auth) {
241 |         case 'normal':
242 |           data = omit(data, ['akId', 'akSecret', 'appId', 'code']);
243 |           break;
244 |         case 'open':
245 |           data = omit(data, ['room', 'cookie']);
246 |           break;
247 |       }
248 |       return data;
249 |     };
250 | 
251 |     const copyLinkStatus = ref('');
252 |     const copyLinkClass = computed(() => (copyLinkStatus.value ? `btn-${copyLinkStatus.value}` : 'btn-primary'));
253 |     const copyLinkText = computed(() => {
254 |       switch (copyLinkStatus.value) {
255 |         case 'success':
256 |           return '复制成功';
257 |         case 'error':
258 |           return '复制失败';
259 |         default:
260 |           return '复制链接';
261 |       }
262 |     });
263 | 
264 |     const copyLink = async () => {
265 |       if (copyLinkStatus.value) return;
266 |       try {
267 |         await navigator.clipboard.writeText(new URL(`live.html#${qss(getFinalForm())}`, location.origin).href);
268 |         copyLinkStatus.value = 'success';
269 |       } catch {
270 |         copyLinkStatus.value = 'error';
271 |       } finally {
272 |         setTimeout(() => {
273 |           copyLinkStatus.value = '';
274 |         }, 2000);
275 |       }
276 |     };
277 | 
278 |     const showQrLogin =
279 |       window.location.origin === 'https://blc.lolicon.app' || window.location.origin === 'http://localhost:8080';
280 | 
281 |     if (showQrLogin) {
282 |       bindQrLogin(cookie => {
283 |         form.cookie = cookie;
284 |       });
285 | 
286 |       onBeforeUnmount(() => {
287 |         unbindQrLogin();
288 |       });
289 |     }
290 | 
291 |     return {
292 |       form,
293 |       canGo,
294 |       goLive: () => (window.location.href = `live.html#${qss(getFinalForm())}`),
295 |       copyLink,
296 |       copyLinkClass,
297 |       copyLinkText,
298 |       options: readonly(selectOptions),
299 |       showQrLogin,
300 |       openQrLoginWindow,
301 |     };
302 |   },
303 | });
304 | </script>
305 | 
306 | <style lang="scss">
307 | body,
308 | html {
309 |   width: 100%;
310 |   height: 100%;
311 | }
312 | body {
313 |   display: flex;
314 |   align-items: center;
315 |   justify-content: center;
316 | }
317 | #app {
318 |   margin: 16px;
319 | }
320 | @media screen and (min-width: 800px) {
321 |   #app {
322 |     width: 70%;
323 |     min-width: 768px;
324 |     max-width: 1024px;
325 |   }
326 | }
327 | @media screen and (max-width: 799px) {
328 |   #app {
329 |     width: 100%;
330 |   }
331 | }
332 | #panel {
333 |   margin: 0;
334 |   .btn {
335 |     float: right;
336 |     margin-left: 8px;
337 |   }
338 | }
339 | .btn {
340 |   outline: none !important;
341 | }
342 | .form-control {
343 |   box-shadow: none !important;
344 | }
345 | input[type='checkbox'] {
346 |   vertical-align: middle;
347 | }
348 | label {
349 |   margin-bottom: 0;
350 |   font-weight: 400;
351 | }
352 | .input-group:not(:last-child) {
353 |   margin-bottom: 10px;
354 | }
355 | .input-group-addon.front {
356 |   min-width: 81px;
357 | }
358 | a {
359 |   text-decoration: none !important;
360 | }
361 | 
362 | .bl-0 {
363 |   border-left: 0;
364 | }
365 | </style>
366 | 


--------------------------------------------------------------------------------
/src/pages/index/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App.vue';
3 | 
4 | createApp(App).mount('#app');
5 | 


--------------------------------------------------------------------------------
/src/pages/live/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="custom-css" style="display: none"></div>
  3 |   <DanmakuItem v-if="errMsg" type="info" :message="errMsg" />
  4 |   <Live v-else-if="ready" v-bind="props" :live-ws-options="liveWsOptions" />
  5 | </template>
  6 | 
  7 | <script>
  8 | import { defineComponent, reactive, onBeforeUnmount, ref, onMounted, shallowRef } from 'vue';
  9 | import { parseProps } from '@/utils/props';
 10 | import { setCors, autoGet, corsGet } from '@/utils/request';
 11 | import { getOpenData } from '@/utils/biliOpen';
 12 | 
 13 | import Live from '@/components/Live';
 14 | import DanmakuItem from '@/components/DanmakuItem';
 15 | 
 16 | export default defineComponent({
 17 |   components: { Live, DanmakuItem },
 18 |   setup() {
 19 |     const onHashChange = () => window.location.reload();
 20 |     window.addEventListener('hashchange', onHashChange);
 21 |     onBeforeUnmount(() => window.removeEventListener('hashchange', onHashChange));
 22 | 
 23 |     const props = reactive(parseProps(window.location.hash));
 24 |     const liveWsOptions = shallowRef();
 25 | 
 26 |     const customCss = props.customCss?.trim();
 27 |     if (customCss) {
 28 |       onMounted(() => {
 29 |         const style = document.createElement('style');
 30 |         style.innerHTML = customCss;
 31 |         document.getElementById('custom-css')?.appendChild(style);
 32 |       });
 33 |     }
 34 | 
 35 |     const canCORS = props.cors === 'true';
 36 |     setCors(canCORS);
 37 | 
 38 |     const ready = ref(false);
 39 |     const errMsg = ref('');
 40 | 
 41 |     if (props.auth === 'open') {
 42 |       getOpenData(props.akId, props.akSecret, parseInt(props.appId), props.code)
 43 |         .then(data => {
 44 |           props.room = data.anchor_info.room_id;
 45 |           props.anchor = data.anchor_info.uid;
 46 |           liveWsOptions.value = {
 47 |             address: data.websocket_info.wss_link[0],
 48 |             authBody: JSON.parse(data.websocket_info.auth_body),
 49 |           };
 50 |           ready.value = true;
 51 |         })
 52 |         .catch(e => {
 53 |           let msg = '开放平台开启失败';
 54 |           if (canCORS) msg += '，请检查是否正确禁用了浏览器的 web security 以允许直接跨域';
 55 |           msg += `\n${e}`;
 56 |           errMsg.value = msg;
 57 |         });
 58 |     } else {
 59 |       (async () => {
 60 |         const eMsg = [];
 61 | 
 62 |         // 获取房间信息
 63 |         const getRoomInfoSuccess = autoGet(`https://api.live.bilibili.com/room/v1/Room/room_init?id=${props.room}`, {
 64 |           headers: { Cookie: props.cookie },
 65 |         })
 66 |           .then(({ code, msg, data: { room_id, uid } }) => {
 67 |             if (code === 0) {
 68 |               props.room = parseInt(room_id);
 69 |               props.anchor = parseInt(uid);
 70 |               return true;
 71 |             }
 72 |             eMsg.push(msg);
 73 |             return false;
 74 |           })
 75 |           .catch(e => {
 76 |             eMsg.push(`获取房间信息失败${canCORS ? '，请检查是否正确禁用了浏览器的 web security 以允许直接跨域' : ''}`);
 77 |             eMsg.push(String(e));
 78 |             return false;
 79 |           });
 80 | 
 81 |         if (props.cookie) {
 82 |           const buvid = /\bbuvid3=([^;]+)\b/.exec(props.cookie)?.[1];
 83 |           const uid = /\bDedeUserID=([^;]+)\b/.exec(props.cookie)?.[1];
 84 |           if (buvid && uid && (await getRoomInfoSuccess)) {
 85 |             await corsGet(
 86 |               `https://api.live.bilibili.com/xlive/web-room/v1/index/getDanmuInfo?id=${props.room}&type=0`,
 87 |               { headers: { Cookie: props.cookie } }
 88 |             )
 89 |               .then(async ({ code, message, data: { token, host_list } }) => {
 90 |                 if (code === 0) {
 91 |                   liveWsOptions.value = {
 92 |                     address: `wss://${host_list[0].host}/sub`,
 93 |                     authBody: {
 94 |                       uid: parseInt(uid),
 95 |                       roomid: props.room,
 96 |                       protover: 3,
 97 |                       buvid,
 98 |                       platform: 'web',
 99 |                       type: 2,
100 |                       key: token,
101 |                     },
102 |                   };
103 |                 } else {
104 |                   eMsg.push(message);
105 |                 }
106 |               })
107 |               .catch(e => {
108 |                 eMsg.push('获取 token 失败');
109 |                 eMsg.push(String(e));
110 |               });
111 |           }
112 |         }
113 | 
114 |         await getRoomInfoSuccess;
115 | 
116 |         if (eMsg.length) {
117 |           errMsg.value = eMsg.join('\n');
118 |         } else {
119 |           ready.value = true;
120 |         }
121 |       })();
122 |     }
123 | 
124 |     if (props.debug) {
125 |       import(/* webpackIgnore: true */ 'https://fastly.jsdelivr.net/npm/vconsole/dist/vconsole.min.js').then(() => {
126 |         new window.VConsole();
127 |       });
128 |     }
129 | 
130 |     return { props, ready, errMsg, liveWsOptions };
131 |   },
132 | });
133 | </script>
134 | 
135 | <style>
136 | html,
137 | body,
138 | #app {
139 |   margin: 0;
140 |   padding: 0;
141 |   height: 100%;
142 |   width: 100%;
143 |   background-color: transparent;
144 | }
145 | </style>
146 | 


--------------------------------------------------------------------------------
/src/pages/live/main.js:
--------------------------------------------------------------------------------
1 | import '@/utils/bufferPolyfill';
2 | import { createApp } from 'vue';
3 | import App from './App.vue';
4 | 
5 | createApp(App).mount('#app');
6 | 


--------------------------------------------------------------------------------
/src/utils/biliOpen.js:
--------------------------------------------------------------------------------
 1 | import md5 from 'md5';
 2 | import { autoGet } from './request';
 3 | 
 4 | /**
 5 |  * 鉴权加密
 6 |  * @param {*} params
 7 |  * @param {string} akId
 8 |  * @param {string} akSecret
 9 |  * @returns
10 |  */
11 | async function getEncodeHeader(body, akId, akSecret) {
12 |   const timestamp = parseInt(Date.now() / 1000 + '');
13 |   const nonce = parseInt(Math.random() * 100000 + '') + timestamp;
14 |   const header = {
15 |     'x-bili-accesskeyid': akId,
16 |     'x-bili-content-md5': md5(body),
17 |     'x-bili-signature-method': 'HMAC-SHA256',
18 |     'x-bili-signature-nonce': nonce + '',
19 |     'x-bili-signature-version': '1.0',
20 |     'x-bili-timestamp': timestamp,
21 |   };
22 |   const data = [];
23 |   for (const key in header) {
24 |     data.push(`${key}:${header[key]}`);
25 |   }
26 | 
27 |   const signature = await getHmacSha256(akSecret, data.join('\n'));
28 |   return {
29 |     Accept: 'application/json',
30 |     'Content-Type': 'application/json',
31 |     ...header,
32 |     Authorization: signature,
33 |   };
34 | }
35 | 
36 | /**
37 |  * HMAC-SHA256加密
38 |  * @param {string} key
39 |  * @param {string} message
40 |  * @returns
41 |  */
42 | async function getHmacSha256(key, message) {
43 |   const encoder = new TextEncoder();
44 |   const cryptoKey = await window.crypto.subtle.importKey(
45 |     'raw',
46 |     encoder.encode(key),
47 |     { name: 'HMAC', hash: { name: 'SHA-256' } },
48 |     false,
49 |     ['sign']
50 |   );
51 |   const signature = await window.crypto.subtle.sign('HMAC', cryptoKey, encoder.encode(message));
52 |   return Array.from(new Uint8Array(signature))
53 |     .map(b => b.toString(16).padStart(2, '0'))
54 |     .join('');
55 | }
56 | 
57 | const START_URL = 'https://live-open.biliapi.com/v2/app/start';
58 | const HEARTBEAT_URL = 'https://live-open.biliapi.com/v2/app/heartbeat';
59 | // const END_URL = 'https://live-open.biliapi.com/v2/app/end';
60 | 
61 | async function callApi(url, data, akId, akSecret) {
62 |   const body = JSON.stringify(data);
63 |   const headers = await getEncodeHeader(body, akId, akSecret);
64 |   return autoGet(url, { method: 'POST', headers, body });
65 | }
66 | 
67 | /**
68 |  * @param {string} akId
69 |  * @param {string} akSecret
70 |  * @param {number} appId
71 |  * @param {string} authCode
72 |  */
73 | export async function getOpenData(akId, akSecret, appId, authCode) {
74 |   const startRes = await callApi(START_URL, { code: authCode, app_id: appId }, akId, akSecret);
75 |   console.log('open start', startRes);
76 |   const { code, message, data } = startRes;
77 |   if (code !== 0) throw new Error(message);
78 |   const gameId = data.game_info.game_id;
79 |   if (!gameId) throw new Error('no game id');
80 |   setInterval(async () => {
81 |     const heartbeatRet = await callApi(HEARTBEAT_URL, { game_id: gameId }, akId, akSecret);
82 |     if (heartbeatRet.code === 0) console.log('open heartbeat success');
83 |     else console.error('open heartbeat error', heartbeatRet);
84 |   }, 20e3);
85 |   return data;
86 | }
87 | 


--------------------------------------------------------------------------------
/src/utils/bufferPolyfill.js:
--------------------------------------------------------------------------------
1 | import { Buffer } from 'buffer';
2 | window.Buffer = Buffer;
3 | 


--------------------------------------------------------------------------------
/src/utils/face.js:
--------------------------------------------------------------------------------
 1 | import { LRUCache } from 'lru-cache';
 2 | import loadImg from './loadImg';
 3 | import { last } from 'lodash';
 4 | 
 5 | // const NO_FACE = 'https://i0.hdslb.com/bfs/face/member/noface.jpg';
 6 | 
 7 | // 不用缓存了
 8 | window.localStorage.removeItem('blc-face');
 9 | 
10 | /** @type {LRUCache<string, string | Promise<string>>} */
11 | const cache = new LRUCache({ max: 500, ttl: 600 * 1000, updateAgeOnGet: true });
12 | 
13 | const getFaceLoads = face => {
14 |   const smallFace = getSmallFace(face);
15 |   if (smallFace) {
16 |     return [
17 |       [smallFace, 2000],
18 |       [face, 5000],
19 |     ];
20 |   }
21 |   return [[face, 0]];
22 | };
23 | 
24 | const getSmallFace = url => {
25 |   if (url.endsWith('.gif') || url.includes('noface')) return;
26 |   return url.replace(/(\.[^./]+$)/, '$1_48x48$1');
27 | };
28 | 
29 | export const loadFace = async (uid, url) => {
30 |   const key = uid || last(url.split('/'));
31 |   if (cache.has(key)) return cache.get(key);
32 | 
33 |   const loads = getFaceLoads(url.replace(/^http:/, 'https:'));
34 |   const loadPromise = loadImg(loads);
35 |   cache.set(key, loadPromise);
36 |   const finalUrl = await loadPromise;
37 |   cache.set(key, finalUrl);
38 | 
39 |   return finalUrl;
40 | };
41 | 


--------------------------------------------------------------------------------
/src/utils/loadImg.js:
--------------------------------------------------------------------------------
 1 | const loadImg = (url, timeout) =>
 2 |   new Promise((resolve, reject) => {
 3 |     let progress = 0;
 4 |     const xhr = new XMLHttpRequest();
 5 |     const loadTimeout = setTimeout(() => {
 6 |       xhr.abort();
 7 |     }, 10000);
 8 |     const progressTimeout = timeout
 9 |       ? setTimeout(() => {
10 |           if (progress === 0) xhr.abort();
11 |         }, timeout)
12 |       : null;
13 |     xhr.open('GET', url, true);
14 |     xhr.onprogress = e => {
15 |       if (e.lengthComputable) progress = e.loaded / e.total;
16 |     };
17 |     xhr.onload = () => {
18 |       clearTimeout(progressTimeout);
19 |       clearTimeout(loadTimeout);
20 |       resolve(url);
21 |     };
22 |     xhr.onerror = reject;
23 |     xhr.onabort = reject;
24 |     xhr.send();
25 |   });
26 | 
27 | /** @returns {Promise<string>} */
28 | export default async loads => {
29 |   for (const [url, timeout] of loads) {
30 |     const loaded = await loadImg(url, timeout).catch(() => {
31 |       console.warn('Timeout', url);
32 |     });
33 |     if (loaded) return loaded;
34 |   }
35 |   return loads[0][0];
36 | };
37 | 


--------------------------------------------------------------------------------
/src/utils/props.js:
--------------------------------------------------------------------------------
 1 | import { parse as qsp } from 'query-string';
 2 | import { mapValues, pick } from 'lodash';
 3 | 
 4 | export const defaultProps = {
 5 |   auth: 'normal',
 6 |   akId: '',
 7 |   akSecret: '',
 8 |   appId: '',
 9 |   code: '',
10 |   room: '',
11 |   cookie: '',
12 |   cors: 'false',
13 |   face: 'true',
14 |   display: 'bottom',
15 |   stay: '',
16 |   limit: '',
17 |   giftComb: '',
18 |   giftPin: '',
19 |   delay: '',
20 |   blockUID: '',
21 |   debug: '',
22 |   customCss: '',
23 | };
24 | Object.freeze(defaultProps);
25 | 
26 | export const intProps = ['room', 'stay', 'giftComb', 'limit', 'giftPin', 'delay', 'appId'];
27 | Object.freeze(intProps);
28 | 
29 | export const intPropsSet = new Set(intProps);
30 | Object.freeze(intPropsSet);
31 | 
32 | export const isIntProp = name => intPropsSet.has(name);
33 | 
34 | const intPropsDefault = {};
35 | Object.freeze(intPropsDefault);
36 | 
37 | export const propsType = mapValues(defaultProps, (v, k) => (intPropsSet.has(k) ? Number : String));
38 | Object.freeze(propsType);
39 | 
40 | export const selectOptions = {
41 |   auth: [
42 |     {
43 |       value: 'normal',
44 |       text: '普通模式',
45 |     },
46 |     {
47 |       value: 'open',
48 |       text: '开放平台',
49 |     },
50 |   ],
51 |   cors: [
52 |     {
53 |       value: 'false',
54 |       text: '关闭（所有跨域请求将依赖反代服务）',
55 |     },
56 |     {
57 |       value: 'true',
58 |       text: '开启（请阅读右侧说明）',
59 |     },
60 |   ],
61 |   face: [
62 |     {
63 |       value: 'true',
64 |       text: '显示',
65 |     },
66 |     {
67 |       value: 'false',
68 |       text: '不显示',
69 |     },
70 |   ],
71 |   display: [
72 |     {
73 |       value: 'bottom',
74 |       text: '自底部',
75 |     },
76 |     {
77 |       value: 'top',
78 |       text: '从顶部',
79 |     },
80 |   ],
81 | };
82 | Object.freeze(selectOptions);
83 | 
84 | export const parseProps = qs =>
85 |   mapValues(
86 |     pick(
87 |       {
88 |         ...defaultProps,
89 |         ...qsp(qs),
90 |       },
91 |       Object.keys(defaultProps)
92 |     ),
93 |     (v, k) => {
94 |       if (isIntProp(k)) return (v && parseInt(v)) || intPropsDefault[k] || 0;
95 |       if (k in selectOptions) return selectOptions[k].some(({ value }) => value === v) ? v : defaultProps[k];
96 |       return v || defaultProps[k];
97 |     }
98 |   );
99 | 


--------------------------------------------------------------------------------
/src/utils/protobuf.js:
--------------------------------------------------------------------------------
 1 | import { length as b64len, decode as b64dec } from '@protobufjs/base64';
 2 | import { Type, Field } from 'protobufjs';
 3 | 
 4 | const decodeB64 = str => {
 5 |   const length = b64len(str);
 6 |   const buffer = new Uint8Array(length);
 7 |   b64dec(str, buffer, 0);
 8 |   return buffer;
 9 | };
10 | 
11 | const UserInfo = new Type('UserInfo').add(new Field('face', 4, 'string'));
12 | const DanmakuMessageV2 = new Type('DanmakuMessageV2').add(UserInfo).add(new Field('user', 20, 'UserInfo'));
13 | 
14 | /**
15 |  * @param {string} str
16 |  * @returns {{ user: { face: string } }}
17 |  */
18 | export const decodeDmV2 = str => {
19 |   const buffer = decodeB64(str);
20 |   return DanmakuMessageV2.decode(buffer);
21 | };
22 | 


--------------------------------------------------------------------------------
/src/utils/qrLogin.js:
--------------------------------------------------------------------------------
 1 | const qrLoginService = 'https://mashir0-bilibili-qr-login.hf.space';
 2 | 
 3 | const getCenterPosition = (width, height) => {
 4 |   const screenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screen.availLeft;
 5 |   const screenTop = window.screenTop !== undefined ? window.screenTop : window.screen.availTop;
 6 | 
 7 |   const screenWidth = window.screen.width || window.outerWidth || document.documentElement.clientWidth;
 8 |   const screenHeight = window.screen.height || window.outerWidth || document.documentElement.clientHeight;
 9 | 
10 |   return {
11 |     left: Math.round((screenWidth - width) / 2 + screenLeft),
12 |     top: Math.round((screenHeight - height) / 2 + screenTop),
13 |   };
14 | };
15 | 
16 | const getFeaturesStr = features =>
17 |   Object.entries(features)
18 |     .map(([k, v]) => `${k}=${v}`)
19 |     .join(',');
20 | 
21 | export const openQrLoginWindow = () => {
22 |   const width = 380;
23 |   const height = 340;
24 |   const features = getFeaturesStr({
25 |     width,
26 |     height,
27 |     location: false,
28 |     menubar: false,
29 |     resizable: false,
30 |     scrollbars: false,
31 |     status: false,
32 |     toolbar: false,
33 |     ...getCenterPosition(width, height),
34 |   });
35 |   return window.open(`${qrLoginService}/?mode=window`, '_blank', features);
36 | };
37 | 
38 | let handleLogin;
39 | 
40 | const handleMessage = e => {
41 |   if (e.origin !== qrLoginService) return;
42 |   const { type, data } = e.data;
43 |   if (type === 'success') {
44 |     if (data && typeof data === 'string') handleLogin?.(data);
45 |     e.source?.close();
46 |   }
47 | };
48 | 
49 | export const bindQrLogin = fn => {
50 |   handleLogin = fn;
51 |   window.addEventListener('message', handleMessage);
52 | };
53 | 
54 | export const unbindQrLogin = () => {
55 |   handleLogin = null;
56 |   window.removeEventListener('message', handleMessage);
57 | };
58 | 


--------------------------------------------------------------------------------
/src/utils/request.js:
--------------------------------------------------------------------------------
 1 | import { pick } from 'lodash';
 2 | 
 3 | let canCORS = true;
 4 | 
 5 | export const setCors = bool => (canCORS = bool);
 6 | 
 7 | export const getResp = (url, options = {}) => fetch(url, { referrer: '', referrerPolicy: 'no-referrer', ...options });
 8 | 
 9 | export const get = (url, options) => getResp(url, options).then(r => r.json());
10 | 
11 | export const corsGetResp = (url, options) =>
12 |   fetch('https://mashir0-blcp.hf.space/', {
13 |     method: 'POST',
14 |     headers: { 'Content-Type': 'application/json' },
15 |     body: JSON.stringify({ url, ...pick(options, ['method', 'headers', 'body']) }),
16 |     referrerPolicy: 'origin',
17 |   });
18 | 
19 | export const corsGet = (url, options) => corsGetResp(url, options).then(r => r.json());
20 | 
21 | export const autoGet = (url, options) => (canCORS ? get(url, options) : corsGet(url, options));
22 | 
23 | export const autoGetResp = (url, options) => (canCORS ? getResp(url, options) : corsGetResp(url, options));
24 | 


--------------------------------------------------------------------------------
/src/utils/storage.js:
--------------------------------------------------------------------------------
 1 | const storage = window.localStorage;
 2 | 
 3 | export const sget = (key, defaultValue = null) => {
 4 |   const text = storage.getItem(`blc-${key}`);
 5 |   try {
 6 |     return text ? JSON.parse(text) : defaultValue;
 7 |   } catch (error) {
 8 |     return defaultValue;
 9 |   }
10 | };
11 | export const sset = (key, value) => storage.setItem(`blc-${key}`, JSON.stringify(value));
12 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "github": {
 3 |     "silent": true
 4 |   },
 5 |   "headers": [
 6 |     {
 7 |       "source": "/css/(.*)",
 8 |       "headers": [
 9 |         {
10 |           "key": "Cache-Control",
11 |           "value": "public, max-age=31536000"
12 |         }
13 |       ]
14 |     },
15 |     {
16 |       "source": "/js/(.*)",
17 |       "headers": [
18 |         {
19 |           "key": "Cache-Control",
20 |           "value": "public, max-age=31536000"
21 |         }
22 |       ]
23 |     }
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   publicPath: '',
 3 |   productionSourceMap: false,
 4 |   pages: {
 5 |     index: {
 6 |       entry: 'src/pages/index/main.js',
 7 |       chunks: ['chunk-common', 'chunk-index-vendors', 'index'],
 8 |     },
 9 |     live: {
10 |       entry: 'src/pages/live/main.js',
11 |       chunks: ['chunk-common', 'chunk-live-vendors', 'live'],
12 |     },
13 |   },
14 |   chainWebpack: config => {
15 |     const pageKeys = Object.keys(module.exports.pages);
16 |     config.optimization.splitChunks({
17 |       cacheGroups: {
18 |         ...pageKeys.map(key => ({
19 |           name: `chunk-${key}-vendors`,
20 |           priority: -10,
21 |           chunks: chunk => chunk.name === key,
22 |           test: /[\\/]node_modules[\\/]/,
23 |           enforce: true,
24 |         })),
25 |         common: {
26 |           name: 'chunk-common',
27 |           priority: 0,
28 |           chunks: 'initial',
29 |           minChunks: 2,
30 |           reuseExistingChunk: true,
31 |           enforce: true,
32 |         },
33 |       },
34 |     });
35 |   },
36 | };
37 | 


--------------------------------------------------------------------------------