Skip to content

Commit

Permalink
Upgrade fonts & icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@apqx
apqx committed Oct 21, 2024
1 parent f8d59af commit 394a550
Show file tree
Hide file tree
Showing 28 changed files with 2,333 additions and 2,247 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

基于[Jekyll](https://jekyllrb.com)构建的[Material Design](https://material.io)静态博客，使用`Google`提供的[Material Components Web](https://github.com/material-components/material-components-web)框架。

它并非通用博客模版，而是以我自己喜好量身定制的分享空间，由随笔、转载、诗文、看剧4个板块组成，采用淡色极简风格，在文字、色彩和动画之外不添加多余元素。或可作为`Material Design`个人站参考，但不建议直接套用，尚未进行模版优化。
它并非通用博客模版，以我自己的喜好量身定制，由随笔、转载、诗文、看剧4个板块组成，采用淡色极简风格，在文字、色彩和动画之外不添加多余元素。或可作为`Material Design`个人站参考，但不建议直接套用，尚未进行模版优化。

主页：[立泉の写字板](https://mudan.me)

Expand Down
2 changes: 1 addition & 1 deletion _includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<!-- Floating Action Button -->
<div class="mdc-touch-target-wrapper">
<a class="mdc-fab fab--blur app-fab--absolute" aria-label="Up" id="fabUp">
<a class="mdc-fab app-fab--absolute" aria-label="Up" id="fabUp">
<i class="mdc-fab__icon material-symbols-rounded-fill">arrow_upward</i>
</a>
</div>
2 changes: 1 addition & 1 deletion _layouts/post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1 data-pagefind-meta="title" class="essay-title">{{ page.title }}</h1>
</time>

<!-- tags -->
<section data-pagefind-ignore="all" style="margin-top: 2.3rem; margin-bottom: 0.3rem;">
<section data-pagefind-ignore="all" style="margin-top: 3rem; margin-bottom: 0.3rem;">
<!-- 如果用span创建mdc-button，则点击动画结束后才会触发点击事件，感觉明显会很慢 -->
{%- for tagInPage in page.tags %}
<button type="button" class="mdc-button tag-dialog-trigger btn-tag"
Expand Down
35 changes: 17 additions & 18 deletions _posts/original/2019-05-18-槐安国内春生酒.md
View file

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions _posts/original/2021-02-16-通过抓包下载微信小程序中的视频.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,40 +6,40 @@ author: 立泉
actor: 单雯 施夏明
mention: Wireshark 山桃红
date: 2021-02-16 +0800
description: 有这个需求是因为《无界·线上艺术》在春节上架了单雯和施夏明的传承版昆曲《牡丹亭》，是我苦苦寻找许久未果的经典影像，而且雯明也是我眼中这个时代最棒的杜丽娘和柳梦梅，所以一定要下载下来收入资源库。
description: 有这个需求是因为《无界·线上艺术》在春节上架了单雯和施夏明的传承版昆曲《牡丹亭》，是我寻找很久未果的经典影像，她/他们也是我眼中这个时代最棒的杜丽娘和柳梦梅，所以一定要下载收入资源库。
cover: https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/safari_kunqv_mudanting.jpg
tags: Code 抓包 Wireshark Charles HTTP HTTPS 下载 微信 小程序 戏剧 昆曲 省昆 牡丹亭 单雯 施夏明
---

有这个需求是因为《无界·线上艺术》在春节上架了`单雯`和`施夏明`的传承版昆曲《牡丹亭》，是我苦苦寻找许久未果的经典影像，而且`雯明`也是我眼中这个时代最棒的`杜丽娘`和`柳梦梅`，所以一定要下载下来收入资源库。
有这个需求是因为《无界·线上艺术》在春节上架了`单雯`和`施夏明`的传承版昆曲《牡丹亭》，是我寻找很久未果的经典影像，她/他们也是我眼中这个时代最棒的`杜丽娘`和`柳梦梅`，所以一定要下载收入资源库。

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/iphone_kunqv_mudanting.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="单雯 施夏明 牡丹亭" }

我常用的视频下载工具是`You-Get`和`Downie`，几乎支持所有主流视频网站，而且`Downie`也可以用`User-Guided Extraction`手动下载不支持网站的指定内容。不过它们都需要目标视频所在页面的`URL`链接才能解析，而问题是这个小程序没有暴露出任何相关的`URL`，所以这种方式行不通。
`You-Get`和`Downie`是我常用的下载工具，支持所有主流视频网站，而且`Downie`也可以用`User-Guided Extraction`模式手动下载不支持网站的内容。不过它们都需要视频所在网页的`URL`链接才能解析，而问题是这个小程序没有暴露出任何相关`URL`，所以此路不通。

那就只有一种方法了，抓包，无论软件怎么隐藏，它都必须通过网络把服务器上的源视频下载到本地才能播放，一定会产生大量的`TCP`数据包，通过`Wireshark`追踪这些数据包就可以直接找到视频源的`URL`地址，然后下载。虽然主流视频平台都会用一些诸如分割、加密等方式增加解析的难度，但我并不觉得一个冷门的小公司产品会这么做。
只剩下一种方法，抓包，无论软件怎么隐藏，它都必须通过网络把服务器上的源视频下载到本地才能播放，一定会产生大量的`TCP`数据包，通过`Wireshark`追踪就可以找到视频源`URL`地址。虽然主流视频平台都会用一些诸如分割、加密的方式增加解析难度，但我并不觉得一个冷门的小公司产品会这么做。

首先要解决如何用`Mac`端`Wireshark`捕捉手机端数据包的问题，只需要开启`Mac`的网络共享，手机连接`Mac`搭建的`Wi-Fi`热点，这样手机产生的所有网络数据都会通过`Mac`，自然就可以被捕捉了。另一种方式是手机设置代理，但`iPhone`的代理设置显示是`HTTP Proxy`，似乎只是把`HTTP`协议的通信包转发到代理服务器（`Mac`）的`Wireshark`端口，而很多视频流并不是`HTTP`协议，所以还是直接连接`Mac`热点更好一些。
首先要解决如何用`Mac`端`Wireshark`捕捉手机端数据包的问题，只需开启`Mac`网络共享，手机连接`Mac`搭建的`Wi-Fi`热点，这样其产生的所有网络数据都会通过`Mac`，即可被捕捉。另一种方式是手机设置代理，但`iPhone`的代理显示是`HTTP Proxy`，似乎只是把`HTTP`协议的通信包转发到代理服务器（`Mac`）的`Wireshark`端口，而很多视频流并不是`HTTP`协议，所以还是连接`Mac`热点更好一些。

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/mac_wifi_share.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="mac sharing" }

当手机开始播放视频的时候，观察`Wireshark`捕捉到了大量与同一个`IP`交互的`TCP`数据包：
手机播放视频时发现`Wireshark`捕捉到大量与同一个`IP`交互的`TCP`数据包：

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/wireshark_http.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="wireshark" }

试着`Follow`它的`TCP Stream`，会发现其所属的明文`HTTP`请求：
试着`Follow`它的`TCP Stream`，发现明文`HTTP`请求：

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/wireshark_http_follow.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="wireshark" }

图中`Host`和`GET`的组合就是这个视频的`URL`地址：
图中`Host`和`GET`组合就是这个视频的`URL`地址：

```http
http://130*********.vod2.myqcloud.com/32a5c501vodcq130*********/9111a3b75285890814193748493/************UA.mp4
```

而且从`HTTP`的`Rang`参数和`206`响应码可以看出客户端是在以分段的方式请求数据，视频总长度为`1,313,589,669`字节，这次请求的是`0～262,143`字节。其实分段请求应该也是大部分播放器在加载网络媒体时的下载策略，根据用户进度条的位置下载指定的分段数据，最后再合并缓存，而不是不切实际的一次把整个视频下载下来。
而且从`HTTP`的`Rang`参数和`206`响应码可以看出客户端是在以分段方式请求数据，视频总长度`1,313,589,669`字节，这次请求的是`0～262,143`字节。这种分段请求应该就是大部分播放器加载网络媒体的下载策略，根据进度条位置下载对应的分段数据，而非不切实际的一次把整个视频下载下来。

用浏览器打开`URL`，嗯，运气不错，是未分割的完整视频，直接保存到本地就可以了。
用浏览器打开`URL`，运气不错，是未分割的完整视频，可以直接保存到本地。

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/safari_kunqv_mudanting.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="单雯 牡丹亭" }

Expand All @@ -53,27 +53,27 @@ http://130*********.vod2.myqcloud.com/32a5c501vodcq130*********/9111a3b752858908

## HTTPS

不过大部分情况下从`Wireshark`中看到的并不是`HTTP`，而是密密麻麻的`TLS`，也就是使用加密传输的`HTTPS`，如下图所示：
不过大部分情况下从`Wireshark`看到的并不是`HTTP`，而是密密麻麻的`TLS`，即加密`HTTPS`：

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/wireshark_https.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="wireshark" }

此时如果`Follow`它的`TCP Stream`看到的就是加密后的`HTTP`报文，理所当然的一片乱码，分辨不出所需信息：
`Follow`它的`TCP Stream`会看到加密后的`HTTP`报文，理所当然一片乱码，分辨不出有效信息：

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/wireshark_https_follow.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="wireshark" }

我本以为`Wireshark`会如`Charles`那样能把自己的根证书导入到系统中再以中间人的方式监听解密`HTTPS`报文，但搜索一番发现并不可以，它比`Charles`更底层而不能这样做。
本以为`Wireshark`能像`Charles`那样把自己的根证书导入系统再以中间人方式监听`HTTPS`通信，但搜索一番发现并不可以，它比`Charles`更底层而不能这样做。

仅有的两种方法在下载微信视频这一点上也都是不可行的：
仅有的两种方法在下载微信视频时都不可行：

1. 要求提供服务端的`HTTPS`私钥（怎么可能嘛🤷🏻）
2. 要求从浏览器导出`HTTPS`使用的实际通信密钥（微信小程序视频不可能用浏览器打开🤷🏻）
1. 要求提供服务端的`HTTPS`私钥（怎么可能嘛🤷🏻）。
2. 要求从浏览器导出`HTTPS`使用的实际通信密钥（微信小程序视频不可能用浏览器打开🤷🏻）。

车到山前必有路，既然已经知道客户端肯定是使用`HTTPS`分段请求资源的方式下载视频的，那就用`Charles`看看吧：
车到山前必有路，既然已经知道客户端是使用`HTTPS`分段请求资源的方式下载视频，那就用`Charles`看看：

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210216/charles_https.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="charles" }

成功解密，完整`URL`映入眼帘，左边那一列就是大量的分段请求，`Charles`用`媒体图标`标记也验证了其就是下载下来的视频片段。
成功解密，完整`URL`映入眼帘，左边一列是大量分段请求，`Charles`用`媒体图标`标记也验证了它们就是下载的视频片段。

## 尾声

其实说来有趣，我之前一直以为要播放的网络视频都是在服务端被分割成一个一个的小视频后才供客户端点播的，即`m3u8`那一套，没想到也可以不分割，让客户端使用`HTTP`原生的分段请求特性来下载指定范围的片段。这并不是从书上看到的结论，而是我自己在需求驱动下的一步步剥茧抽丝中发现的，这样的探索过程真的很有趣。
之前一直以为网络视频都是在服务端被分割后才供客户端点播的，即`m3u8`那一套，原来也可以不分割，让客户端使用`HTTP`分段请求特性下载指定范围的片段。这并非从书上看到的结论，而是我自己在需求驱动下一步步剥茧抽丝发现的，探索过程十分有趣。
18 changes: 9 additions & 9 deletions _posts/original/2021-02-25-央视、戏剧、4K、HEVC，惊喜连连.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@ tags: 碎碎念 戏剧 Code 下载 Downie 昆曲 邵天帅 长生殿 小宴 粤

好吧，我喜欢戏剧已经不是秘密，昆京豫粤均有涉猎，尤其最爱昆曲。雅部正音，慢悠悠的水磨腔，闲时在西湖散步，耳机里循环一天也不会腻。声腔音律只是一部分，像昆曲这样的剧种，眼神、动作和水袖构成的舞美同样不可或缺，但我长久以来都感觉中国戏剧的影像录制跟不上时代。

10年前的2010年`YouTube`就已经支持用户上传`4K`视频，5年后作为手机标杆的`iPhone 6s`开始支持录制`4K`，又过4年`哔哩哔哩`在国内首度支持上传`4K`，虽然相比`YouTube`整整晚了9年，但对高墙内的我们来说才真正意味着`4K`自媒体时代的到来。而现在能找到的昆曲碟片大多不过是`DVD`的`720x560`分辨率，少数精品会达到`1080P`蓝光，至于`4K`则非常罕见。此外运气好的话倒是可以在流媒体上找到一些码率很低的`1080P`，但这也仅仅是对新录制的影像，一些经典老资源（近10年左右）能达到`720P`就非常不错了。
10年前的2010年`YouTube`就已经支持用户上传`4K`视频，5年后作为手机标杆的`iPhone 6s`开始支持录制`4K`，又过4年`哔哩哔哩`在国内首度支持上传`4K`，虽然相比`YouTube`整整晚了9年，但对高墙内的我们来说才真正意味着`4K`自媒体时代的到来。而现在能找到的昆曲碟片大多不过是`DVD`的`720x560`分辨率，少数精品会达到`1080P`蓝光，至于`4K`则非常罕见。此外运气好的话倒是可以在流媒体上找到一些码率很低的`1080P`，但也仅仅是对新录制的影像，一些经典资源（近10年左右）能达到`720P`就非常难得了。

所以当我偶然发现央视至少于2019年就已经在用`4K50FPS`录制戏剧节目的时候，先是自然的惊喜，后是惊讶，惊讶的是这么久了，我居然从来没有在网络中看到过央视的`4K`戏剧。国内门户网站对新技术总是异常保守，另一个例子是曾被广泛使用的`Flash`，它的开发者`Adobe`在2017年决心抛弃它并定下2020年12月31日完全停止支持，那么央视是什么时候完成用`H5`替换`Flash`的呢？2020年中下旬，完全贴着`Dead Line`，无力吐槽。
所以当我偶然发现央视至少在2019年就已经用`4K50FPS`录制戏曲节目的时候，先是自然的惊喜，后是惊讶，惊讶的是这么久我居然从来没有在网络中看到过央视的`4K`戏曲。国内门户网站对新技术总倾向保守，一个例子是曾经的`Flash`，`Adobe`在2017年宣布废弃它并缓冲3年到2020年12月31日停止支持，那么央视是什么时候完成用`H5`替换`Flash`的呢？2020年中下旬，完全贴着`Dead Line`。

## 正题

言归正传，我偶然在B站发现一个视频，我也有那个视频，不同的是它上面居然没有央视水印，这就很奇怪，我是在央视官网下载的，而且可以肯定那里的所有资源都会被加上水印。所幸视频简介里附有来源链接，习惯的用`Downie`下载，惊讶！无水印`4K`分辨率`HEVC`编码`50FPS`，从来没见过戏剧能有这种画质。
言归正传，我偶然在B站发现一个视频，我也有那个视频，不同的是它上面居然没有央视水印，这就很奇怪，我是在央视官网下载的，可以肯定那里所有资源都会被加上水印。所幸视频简介里附有来源链接，习惯性用`Downie`下载，惊讶！无水印`4K`分辨率`HEVC`编码`50FPS`，从没见过戏曲有这种画质。

*[【邵天帅】昆曲-长生殿·小宴（泣颜回）4K](https://www.bilibili.com/video/BV1Ly4y1J7YZ?share_source=copy_web){: target="_blank" }*

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210225/shaotianshuai_qiyanhui_4k.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="邵天帅 长生殿 泣颜回" }

惊喜溢于言表，按照页面指引安装`央视文艺`App，找到很多`4K`资源，只是这种视频仅在播放时才会有`4K`标志，所以得一个个点开看才能确定。基本都是《角儿来了》的节目片段，`4K50FPS`，而且再提一次，没有水印。
惊喜溢于言表，按照页面指引安装`央视文艺`App，找到很多`4K`资源，这种视频仅在播放时才会有`4K`标志，所以得一个个点开看才能确定。基本都是《角儿来了》的节目片段，`4K50FPS`，而且再提一次，没有水印。

对于这种视频的下载我早已有很多经验，App内是不能下载的，但一般都能分享到网页，然后就可以用`Downie`。只是这次分享的网页视频分辨率奇低，和我在B站看到的那个网页排版也不一样，便对比了一下2个`URL`链接：
对这种视频的下载我已有很多经验，App内是不能下载的，但一般都能分享到网页，然后就可以用`Downie`。只是这次网页里视频分辨率奇低，和我在B站看到的排版也不一样，对比一下2个`URL`链接：

```sh
# 4K网页
Expand All @@ -36,15 +36,15 @@ https://vod.cctv.cn/cctv/cctvh5/cctvxiqu/xiquapp2/shipin.html?id=VIDE14353970509
https://vod.cctv.cn/cctv/cctvh5/cctv11/2020/share/index.html?links=app://VIDE1435397050914***&index=&collectionLink=
```

这是同一个App的分享？不对，第一个网页显示的App是`央视戏曲`，按引导点击安装的却是`央视文艺`，我不清楚它们的关系，但看起来这2个`URL`都包含一个`VIDE`，似乎是视频`ID`。尝试把第二个`URL`的`VIDE`放到第一个`URL`里，果然是那个网页，是`4K`视频。即说明`VIDE`确实是视频`ID`，通过特定网页播放器才可以加载到最高质量的源文件。
这是同一个App的分享吗？不对，第一个网页显示的App是`央视戏曲`，按引导安装的却是`央视文艺`，我不清楚它们的关系。观察2个`URL`都包含`VIDE`，似乎是视频`ID`，尝试把后者的`VIDE`放到第一个`URL`里，果然是那个网页，是`4K`视频。即说明`VIDE`确实是视频`ID`，通过特定网页播放器才能加载到最高质量的源文件。

视频全屏播放，单击右键赫然出现了`HTML5`原生的`Download Video`，这么直接么，现在也不多见了...
视频全屏播放，单击右键赫然出现`HTML5`原生的`Download Video`，这么直接么，现在也不多见了...

*[【曾小敏】粤剧-帝女花·香夭（妆台秋思）4K](https://www.bilibili.com/video/BV1cG4y1B7nk){: target="_blank" }*

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210225/cctv_4k_download.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="曾小敏 帝女花 妆台秋思" }

不过这样有时候会下载下来一个网页，不太可靠，所以还是右键`Copy Video Address`再粘贴到`Downie`里下载。
不过这样有时候会下载下来一个网页，不太可靠，所以还是右键`Copy Video Address`粘贴到`Downie`里下载。

视频地址类似于：

Expand All @@ -62,4 +62,4 @@ http://vod.cctv.cn/cms/2019-03-26/4K/****.mp4

![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20210225/cctv_4k_error_1021.webp){: loading="lazy" class="clickable clickShowOriginalImg" alt="load error" }

换别的视频也是如此，看来是我触发了一些`Bug`，或者是防盗链机制在生效？无心之举，几分钟后就会恢复正常，然后再下载、再出错，不过我不会频繁这么做，应该也不会对央视服务产生太大的问题。
换别的视频也是如此，看来是我触发一些`Bug`，或者是带宽/流量限制在生效？无心之举，几分钟后恢复正常，然后再下载再出错，我不会频繁这么做，应该不至于对央视服务产生影响。
Loading

0 comments on commit 394a550

Please sign in to comment.