一年前记录过浏览器上如何下载小鹅通的课程视频，现在发现那个插件已经不能用了，所以重新整理了一下，下载过程比上次简单多了。
插件还是那只可爱的小黄猫
GitHub 地址：https://github.com/xifangczy/cat-catch
浏览器扩展安装地址：Chrome / Edge / Firefox
与之前相比，功能改进了不少：
“从头捕获”，不需要手动拖动进度条，生怕没有录制完全。但是实际使用还是会丢失一部分开头，希望下个版本改进；
“使用 ffmpeg 合并”可以自动合并捕获的视频和音频，下载得到的是一个完整的视频文件；
“自动跳转到缓冲尾”可以不间断加载、节省录制时间，对下载非直播画面非常有用；
可以设置播放速度，点击扩展图标，在“其他页面 / 媒体控制”中可以设置。但是有了“自动跳转到缓冲尾”，我觉得设置播放速度这个功能可有可无。
开始录制：
在浏览器上安装扩展后，打开需要录制视频的页面，点击缓存捕获：
然后在面板上点击“从头捕获”：
插件就自动开始从头播放并记录缓存了。
建议勾选“完成捕获自动下载”、“使用 ffmpeg 合并”。
如果是录制“非直播”，建议勾选“自动跳转到缓冲尾”。
另外两个选项“始终从头捕获”、“清理多余头部数据”我没有深入研究，有兴趣的自己研究下。
播放完成后，会自动打开一个“猫抓 cat-catch”的网页，自动使用 ffmpeg 进行转码与合并。
完成后自动下载该文件。
提示：如果要继续捕获其它视频，请先关闭那个“猫抓 cat-catch”网页，否则捕获完成后无法下载。
[DS218+] DS218plus 上每秒接收的日志数超出 10 的容差值
DS218plus 每秒接收 55 个日志，这超出了每秒 10 个日志的容差值。请前往日志中心查看详细信息。
来自 DS218plus
打开群晖日志中心，左侧切换到“日志”选项卡，列表上方有“常规”、“连接”、“文件传输”、“硬盘”四个日志分类。
我的情况是“文件传输”中有大量日志，是因为我的小米摄像头设置的是把录制的视频保存到NAS中，而且是始终录制，而不是录制移动画面。这样就会产生多个视频文件，当自动清理一年前的视频时会出现同一秒处理了超过指定数量的文件，群晖就会发送这个通知。
解决的方法很简单：
方法一：米家 - 摄像头 - ...（右上角的设置） - 存储设置 - 存储卡状态 - 录制模式 改为录制移动画面。
方法二：群晖 - 日志中心 - 通知 - 修改“每秒日志数超出”。
本文基于 manifest v3
插件使用 Web 技术开发
浏览器提供额外的插件 API
插件与网页分离，运行在一个独立的环境中
插件 API 功能
管理 Tabs、窗口、历史记录、书签、Cookies、下载、浏览数据、通知、网站权限
管理浏览器的外观和感觉 - 背景、主题、右键菜单、新标签页、启动页面
定制 DevTools
向网页注入脚本，与网页通信，与系统中的 Native 应用程序通信
修改/监听发送的 HTTP 请求/接收的回复
插件构成
| 结构 | 功能 | 调用 API | 操作 Dom | 进程 |
| manifest | 配置文件 | - | ||
| popup | 弹出对话框 | 所有 | Extension process | |
| option page | 用户使用的设置页面 | 所有 | ||
| background script | 后台脚本 | 所有 | 禁止？ | Extension process |
| content script | 内容脚本（注入到网页中） | 有限 | 允许 | Renderer process |
* 即便 content script 是注入到网页中的，而且是运行在 Renderer 进程（与主网页相同的进程），但是它们仍运行在不同的世界（world）。主网页运行在 main world，插件的 content script 运行在 isolated world。比如说 main world 中有一个变量，它在 isolated world 中是访问不到的，但是如果修改了 dom，对其它世界是有影响的。
将 Chrome 插件迁移到 Edge
移除 Chrome 独有的 API（如调用 Google 账户）
移动 update_URL 字段（如果是从 Chrome 商店直接下载的包会有这个字段）
改名 Chrome 相关的文字（插件名称、描述文字）
参考文献
确认 iPhone 开启画中画功能：
设置 -> 通用 -> 画中画 -> 自动开启画中画
确认抖音开启画中画功能：
我 -> ≡（在右上角） -> 设置 -> 播放设置 -> 开启画中画相关选项
确认直播间开启画中画功能：
进入直播间 -> …（在右下角） -> 直播设置 -> 开启小窗相关选项
有时候，手机录制的视频在剪映专业版中导入时会提示：
导致画面异常偏红。
解决方法：
选中视频，切换到“调节”，在“HSL”选项卡中，调节红色的色相到合适的位置
虽然不完美，但这样基本能还原到原来的色彩。
目前发现的缺点是人物嘴唇颜色会变得过淡，可以在“画面”-“美颜美体”-“美妆”中使用口红来弥补。
anichart.js 是一款将数据转化为动态柱状图/线性图的 js/ts 工具，可导出视频。
github: https://github.com/Jannchie/anichart.js
中文使用指南：https://github.com/Jannchie/anichart.js/blob/main/README-CN.md
docs 目录中有更详细的使用方法（英文）。
在线演示：https://xoyozo.net/Demo/BarGraph
目前 release 版本 3.0.0。
这里有一点常用设置示例：https://codesandbox.io/s/anichart-2x-m3xbz?file=/main.js
设置画布尺寸
stage.canvas.width = 1000;
stage.canvas.height = 500;重设尺寸不会重新计算内部元素的大小和位置，因此对响应式布局不太友好。
配置柱状图
示例：
const barChart = new ani.BarChart({
dy: 2, // 文字下沉
imageField: 'logo', // 图标字段名
itemCount: 16, // 最多显示条数
dateFormat: '%Y年%-m月', // 日期格式
barGap: 10, // 柱条间距
barInfoFormat: () => '', // 隐藏柱条上的文字
});
stage.addChild(barChart);循环播放
setInterval(function () {
if (!stage.playing) {
stage.sec = 0;
stage.play();
}
}, 1000);
尝试设置 Windows 系统设置：
设置→系统→系统信息→高级系统设置→性能下面点设置→调整为最佳外观
然并卵。
安装编解码器亲测有效！
推荐 K-Lite，下载地址：
K-Lite Codec Pack Basic (codecguide.com)
下载后按默认设置安装即可。
