-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bilibili_downloader.js
349 lines (325 loc) · 10.6 KB
/
bilibili_downloader.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
// ==UserScript==
// @name bilibili 视频下载
// @version 0.02.20
// @license MIT
// @description bilibili 视频下载,支持多种格式(现 b 站已废弃 flv 格式)
// @icon https://static.hdslb.com/mobile/img/512.png
// @author fwqaaq
// @namespace https://github.com/fwqaaq/scripts
// @match *://www.bilibili.com/video/BV*
// @match *://m.bilibili.com/video/BV*
// @run-at document-body
// @grant GM.addStyle
// @grant GM_addStyle
// @grant GM.info
// @grant GM_info
// @require https://cdn.jsdelivr.net/npm/[email protected]/src/md5.min.js
// @downloadURL https://update.greasyfork.org/scripts/481459/bilibili%20%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD.user.js
// @updateURL https://update.greasyfork.org/scripts/481459/bilibili%20%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD.meta.js
// ==/UserScript==
const SCRIPT_NAME = GM.info.script.name
const downloadIcon =
'<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>'
const mixinKeyEncTab = [
46, 47, 18, 2, 53, 8, 23, 32, 15, 50, 10, 31, 58, 3, 45, 35, 27, 43, 5, 49,
33, 9, 42, 19, 29, 28, 14, 39, 12, 38, 41, 13, 37, 48, 7, 16, 24, 55, 40, 61,
26, 17, 0, 1, 60, 51, 30, 4, 22, 25, 54, 21, 56, 59, 6, 63, 57, 62, 11, 36,
20, 34, 44, 52,
]
/**
* @param {string} orig
* @returns {string}
*/
const getMixinKey = (orig) =>
mixinKeyEncTab
.map((n) => orig[n])
.join('')
.slice(0, 32)
/**
* 为请求参数进行 wbi 签名
* @param {any} params
* @param {string} img_key
* @param {string} sub_key
* @returns {string}
*/
function encWbi(params, img_key, sub_key) {
const mixin_key = getMixinKey(img_key + sub_key),
curr_time = Math.round(Date.now() / 1000),
chr_filter = /[!'()*]/g
Object.assign(params, { wts: curr_time }) // 添加 wts 字段
// 按照 key 重排参数
const query = Object.keys(params)
.sort()
.map((key) => {
// 过滤 value 中的 "!'()*" 字符
const value = params[key].toString().replace(chr_filter, '')
return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
})
.join('&')
const wbi_sign = md5(query + mixin_key) // 计算 w_rid
return query + '&w_rid=' + wbi_sign
}
// 获取最新的 img_key 和 sub_key
/**
* @returns {Promise<{img_key: string, sub_key: string}>}
*/
async function getWbiKeys() {
const response = await fetch('https://api.bilibili.com/x/web-interface/nav')
if (!response.ok)
throw new Error('获取 wbi 失败,你的 HTTP 响应状态码是 ${response.status}')
const {
code,
data: {
wbi_img: { img_url, sub_url },
},
} = await response.json()
if (code === '-101') console.log('仅能下载 720p 以下的视频')
return {
img_key: img_url.slice(
img_url.lastIndexOf('/') + 1,
img_url.lastIndexOf('.')
),
sub_key: sub_url.slice(
sub_url.lastIndexOf('/') + 1,
sub_url.lastIndexOf('.')
),
}
}
/**
* 获取 bvid 和 cid
* @returns {Promise<[string, string]>}
*/
async function getBvidAndCid() {
const bvid = window.location.pathname
.split('/')
.find((item) => item.startsWith('BV'))
const res = await fetch(
`https://api.bilibili.com/x/player/pagelist?bvid=${bvid}&jsonp=jsonp`
)
const {
data: [{ cid }],
code,
} = await res.json()
if (!res.ok)
throw new Error(
`获取 cid 失败,HTTP 响应状态码是 ${res.status}. code 码是 ${code}`
)
return [bvid, cid]
}
// 通过 dom 节点设置进度
/**
* @param {HTMLAnchorElement} dom
* @param {number} [qn=112]
* @param {number} [fnval=1]
* @returns
*/
async function getVideo(a, qn = 112, fnval = 1) {
let res, name
// 处理问题
try {
const [bvid, cid] = await getBvidAndCid()
const { img_key, sub_key } = await getWbiKeys()
const params = { bvid, cid, qn, fnval, fnver: 0, fourk: 1 }
const query = encWbi(params, img_key, sub_key)
const url = await getVideoUrl(query)
res = await fetch(url)
name = bvid
if (!res.ok) throw new Error(`视频下载失败,响应状态码为 ${res.status}`)
} catch (e) {
alert(`${e},请到 https://github.com/fwqaaq/scripts 提交报告`)
throw new Error(e)
}
// 进度
const progress = (response) => {
const total = response.headers.get('Content-Length')
let loaded = 0
const reader = response.body.getReader()
const stream = new ReadableStream({
async start(controller) {
while (true) {
const { done, value } = await reader.read()
if (done) break
loaded += value.length
a.innerText = `${((loaded / total) * 100).toFixed(0)}%`
controller.enqueue(value)
}
controller.close()
},
})
return new Response(stream)
}
const blob = await progress(res).blob()
const video = URL.createObjectURL(blob)
a.addEventListener('click', (e) => {
e.preventDefault()
const downloader = document.createElement('a')
downloader.href = video
downloader.download = `${name}.mp4`
downloader.click()
URL.revokeObjectURL(video)
downloader.remove()
a.remove()
})
return true
}
/**
* @param {string} query
* @returns {Promise<string>}
*/
async function getVideoUrl(query) {
const res = await fetch(
`https://api.bilibili.com/x/player/wbi/playurl?${query}`
)
if (!res.ok)
throw new Error(`你的视频下载链接获取失败,你的响应状态码是 ${res.status}`)
const {
data: {
durl: [{ url }],
},
} = await res.json()
return url
}
function createDownloaderElement() {
const downloader = document.createElement('div')
downloader.classList.add('downloader-icon')
const nav = document.createElement('nav')
nav.classList.add('downloader-nav')
nav.innerHTML = `<div data-id="16" class="a-flag">360P 流畅</div>
<div data-id="32" class="a-flag">480P 清晰</div>
<div data-id="64" class="a-flag">720P 高清</div>
<div data-id="74" class="a-flag">720P60 高帧率(登陆)</div>
<div data-id="80" class="a-flag">1080P 高清(登陆)</div>
<div data-id="112" class="a-flag">1080P+ 高码率(大会员)</div>
<div data-id="116" class="a-flag">1080P60 高帧率(大会员)</div>
<div data-id="120" class="a-flag">4K 超清(大会员)</div>
<div class="a-flag"><a target="_blank" href="https://github.com/fwqaaq/scripts">有问题请点击该链接🔗</a></div>`
downloader.innerHTML = `
<div style="display: flex;justify-content: center;margin: 0 auto;align-items: center;height: inherit;">
${downloadIcon}
</div>`
downloader.appendChild(nav)
return [downloader, nav]
}
function addStyles() {
const styles = `
:root{
--init-left: 48px;
--icon-width: 48px;
--icon-height: 48px;
--nav-width: 200px;
--nav-height: 260px;
}
.downloader-icon {
width: var(--icon-width);
height: var(--icon-height);
background: rgb(255,117,152);
cursor: pointer;
border-radius: 50%;
position: fixed;
left: var(--init-left);
top: 74px;
z-index: 9999;
}
.a-flag {
display: flex;
justify-content: space-between;
padding: 4px 8px;
border: rgb(242,110,137) solid 1px;
}
.a-flag:hover {
color: blue;
}
.downloader-nav {
display: flex;
flex-direction: column;
width: var(--nav-width);
background: rgba(255,117,152, 0.8);
transform: translateX(calc(-50% + var(--icon-width) / 2));
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}
.downloader-icon:hover .downloader-nav {
height: auto;
max-height: var(--nav-height);
}
`
GM.addStyle(styles)
}
function setupEventListener(downloader, nav, callback) {
let xOffsetElement = 0,
yOffsetElement = 0
let noClick = false
const move = (e) => {
noClick = true
// 拖动的时候,也隐藏 nav
if (!nav.hidden) nav.hidden = !nav.hidden
e.currentTarget.style.left = e.clientX - xOffsetElement + 'px'
e.currentTarget.style.top = e.clientY - yOffsetElement + 'px'
}
downloader.addEventListener('mousedown', (e) => {
noClick = false
const rect = e.currentTarget.getBoundingClientRect()
xOffsetElement = e.clientX - rect.left
yOffsetElement = e.clientY - rect.top
downloader.addEventListener('mousemove', move)
})
document.addEventListener('mouseup', (e) => {
if (nav.hidden) nav.hidden = !nav.hidden
downloader.removeEventListener('mousemove', move)
})
downloader.children[0].addEventListener('click', (e) => {
if (noClick) return
})
// flag 标志:为 true 才会执行整个函数
let flag = true
/**
* @param {Function} func
* @param {number} wait
* @param {boolean} immediate
* @returns {Function}
*/
const debounce = (func, wait, immediate) => {
let timer = null
return (e) => {
if (!flag) return
let isImmediate = !timer && immediate
if (timer) clearTimeout(timer)
if (isImmediate) {
func(e)
return
}
timer = setTimeout(() => {
func(e)
timer = null
}, wait)
}
}
const downloadVideo = async (e) => {
flag = false
const id = e.target.dataset.id
if (e.target.matches('a') || !id) return
const a = document.createElement('a')
e.target.appendChild(a)
try {
flag = await callback(a, id, 1)
} catch (e) {
alert('没有下载成功,请重新下载' + e)
flag = true
}
}
nav.addEventListener('click', debounce(downloadVideo, 3000, flag, true))
}
function init() {
const [downloader, nav] = createDownloaderElement()
const fragment = document.createDocumentFragment()
fragment.appendChild(downloader)
document.body.appendChild(fragment)
addStyles()
setupEventListener(downloader, nav, getVideo)
}
try {
init()
} catch (e) {
console.error(`${SCRIPT_NAME}, ${e}`)
}