博客 (42)

前几天实现了在 nginx 中使用 lua 实现远程鉴权，今天想试试在 IIS 中能不能实现相同的功能。查询资料发现需要使用 URL 重写和 HTTP 请求模块，没有深究。干脆使用 ASP.NET 中间件来实现吧。

在 StratUp.cs 的 Configure 方法中，或 Program.cs 文件中添加以下代码：

// 远程鉴权
app.Use(async (context, next) =>
{
    var ip = context.Connection.RemoteIpAddress!.ToString();
    var ua = context.Request.Headers.UserAgent.ToString();
    var host = context.Request.Host.Host;
    var uri = new Uri(context.Request.GetDisplayUrl()).PathAndQuery;

    var client = new HttpClient();
    client.Timeout = TimeSpan.FromSeconds(1); // 设置超时时间

    try
    {
        var requestUrl = "https://鉴权地址/";

        var requestMessage = new HttpRequestMessage(HttpMethod.Get, requestUrl);
        requestMessage.Headers.Add("X-Real-IP", ip);
        requestMessage.Headers.Add("User-Agent", ua);
        requestMessage.Headers.Add("X-Forwarded-Host", host);
        requestMessage.Headers.Add("X-Forwarded-Uri", uri);

        // 发送请求
        var response = await client.SendAsync(requestMessage);

        // 检查响应状态码
        if (response.StatusCode == HttpStatusCode.Forbidden)
        {
            // 如果返回403，则拒绝访问
            context.Response.StatusCode = (int)HttpStatusCode.Forbidden;
            await context.Response.WriteAsync("Access Denied");
        }
        else
        {
            // 如果返回其他状态码，则继续执行管道中的下一个中间件
            await next();
        }
    }
    catch (TaskCanceledException ex) when (ex.CancellationToken.IsCancellationRequested)
    {
        // 如果请求超时（任务被取消），则继续执行管道中的下一个中间件
        await next();
    }
    catch
    {
        // 如果遇到错误，则继续执行管道中的下一个中间件
        await next();
    }
});

代码很简单，使用 HttpClient 发送请求，若返回 403 则拒绝访问，其它情况继续执行业务逻辑，超时或报错的情况按需修改即可。

若鉴权接口在私网中，建议将鉴权接口域名和私网 IP 添加到 hosts 文件中。

• location 优先于 access_by_lua_block，即使 access_by_lua_block 放在 http 中。

• location 的 3 种匹配的优先级，精确匹配（=） > 正则匹配（~） > 前缀匹配（无符号，直接是“/”开头的 uri 前缀）。

• 相同匹配类型的多个 location（比如有多个正则匹配），按定义顺序来进行匹配。

• 一旦有一个 location 被匹配到，就不再继续匹配其它 location。
  

• 如果使用 access_by_lua_block 鉴权，那么不要放在任何 location 中，这样，匹配完 location 后只要没有命中直接返回语句，就会继续执行 access_by_lua_block。并且，如果 access_by_lua_block 中鉴权拒绝，后续的业务处理（如 php 业务）不会继续进行。

一年前记录过浏览器上如何下载小鹅通的课程视频，现在发现那个插件已经不能用了，所以重新整理了一下，下载过程比上次简单多了。

插件还是那只可爱的小黄猫

GitHub 地址：https://github.com/xifangczy/cat-catch

浏览器扩展安装地址：Chrome / Edge / Firefox

与之前相比，功能改进了不少：

• “从头捕获”，不需要手动拖动进度条，生怕没有录制完全。但是实际使用还是会丢失一部分开头，希望下个版本改进；

• “使用 ffmpeg 合并”可以自动合并捕获的视频和音频，下载得到的是一个完整的视频文件；

• “自动跳转到缓冲尾”可以不间断加载、节省录制时间，对下载非直播画面非常有用；
  

• 可以设置播放速度，点击扩展图标，在“其他页面 / 媒体控制”中可以设置。但是有了“自动跳转到缓冲尾”，我觉得设置播放速度这个功能可有可无。

开始录制：

在浏览器上安装扩展后，打开需要录制视频的页面，点击缓存捕获：

然后在面板上点击“从头捕获”：

插件就自动开始从头播放并记录缓存了。

建议勾选“完成捕获自动下载”、“使用 ffmpeg 合并”。

如果是录制“非直播”，建议勾选“自动跳转到缓冲尾”。

另外两个选项“始终从头捕获”、“清理多余头部数据”我没有深入研究，有兴趣的自己研究下。

播放完成后，会自动打开一个“猫抓 cat-catch”的网页，自动使用 ffmpeg 进行转码与合并。

完成后自动下载该文件。

提示：如果要继续捕获其它视频，请先关闭那个“猫抓 cat-catch”网页，否则捕获完成后无法下载。

微信网页开发 JS-SDK 官方文档介绍的获取地理位置接口示例是这样的：

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    var speed = res.speed; // 速度，以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }});

实际上是这样的：

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
  success: function (res) {
    // 网页位置信息授权点击“确定”按钮，以及允许后继续获取定位信息
  },
  fail: function (err) {
    // 获取定位信息失败（譬如：网页位置信息已授权，但操作系统定位已关闭）
  },
  cancel: function (err) {
    // 网页位置信息授权点击“拒绝”按钮
  }
});

顺便提一下如何关闭网页授权：

进入网页使用 JS-SDK 的公众号（可以在授权弹框中看到服务号名称），点击右上角人形图标，继续点击右上角三个点图标，选择设置，关闭“位置信息”。

.NET SDK 的版本 8.0.303 至少需要 MSBuild 的 17.8.3 版本。当前可用的 MSBuild 版本为 16.11.2.50704。请将在 global.json 中指定的 .NET SDK 更改为需要当前可用的 MSBuild 版本的旧版本。

解决方法：

运行 Visual Studio Installer，

选择相应 VS 版本进行修改，

切到“单个组件”，

勾选“.NET SDK (out of support)”，

点击修改并继续。

1. 确认 iPhone 开启画中画功能：

   设置 -> 通用 -> 画中画 -> 自动开启画中画

2. 确认抖音开启画中画功能：

   我 -> ≡（在右上角） -> 设置 -> 播放设置 -> 开启画中画相关选项

3. 确认直播间开启画中画功能：

   进入直播间 -> …（在右下角） -> 直播设置 -> 开启小窗相关选项
   

不知道从哪个版本的 Chrome 或 Edge 开始，我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中，我们想办法用 JS 来实现。

方式一、监听 paste 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
    input.value = event.clipboardData.getData('text');
});

这段代码实现了从页面获取这个 input 元素，监听它的 paste 事件，然后将粘贴板的文本内容赋值给 input。

经测试，当焦点在“年”的位置时可以粘贴成功，但焦点在“月”或“日”上不会触发 paste 事件。

方式二、监听 keydown 事件：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        input.value = clipboardData.getData('text');
    }
});

测试发现报错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'getData')

Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')

看来 event 中没有 clipboardData 对象，改为从 window.navigator 获取：

const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
    if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
        event.preventDefault();
        window.navigator.clipboard.readText().then(text => {
            input.value = text;
        });
    }
});

缺点是需要用户授权：

仅第一次需要授权，如果用户拒绝，那么以后就默认拒绝了。

以上两种方式各有优缺点，选择一种适合你的方案就行。接下来继续完善。

兼容更多时间格式，并调整时区

<input type="date" /> 默认的日期格式是 yyyy-MM-dd，如果要兼容 yyyy-M-d 等格式，那么：

const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
    input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}

以 text 为“2023-4-20”举例，先转为 Date，如果成功，再转为英国时间格式“20-04-2023”，以“/”分隔，逆序，再以“-”连接，就变成了“2023-04-20”。

当然如果希望支持中文的年月日，可以先用正则表达式替换一下：

text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");

处理页面上的所有 <input type="date" />

const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
    input.addEventListener(...);
});

封装为独立域

避免全局变量污染，使用 IIFE 函数表达式：

(function() {
  // 将代码放在这里
})();

或者封装为函数，在 jQuery 的 ready 中，或 Vue 的 mounted 中调用。

在 Vue 中使用

如果将粘贴板的值直接赋值到 input.value，在 Vue 中是不能同步更新 v-model 绑定的变量的，所以需要直接赋值给变量：

<div id="app">
    <input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
    {{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data: function () {
            return {
                a: null,
            }
        },
        methods: {
            fn_pasteToDateInput: function (event) {
                const text = event.clipboardData.getData('text');
                const parsedDate = new Date(text);
                if (!isNaN(parsedDate.getTime())) {
                    const att = event.target.getAttribute('data-model');
                    this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
                }
            },
        }
    });
    const vm = app.mount('#app');
</script>

示例中 <input /> 添加了 data- 属性，值同 v-model，并使用 getAttribute() 获取，利用 this 对象的属性名赋值。 

如果你的 a 中还有嵌套对象 b，那么 data- 属性填写 a.b，方法中以“.”分割逐级查找对象并赋值

let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
    target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text);

众所周知，VMware Workstation 中分配的硬盘大小与实际的 .vmdk 文件尺寸是不一致的。

譬如为虚拟机创建了一块 60GB 的硬盘，安装完系统后使用了 20GB 的空间，此时在宿主机上查看到的 .vmdk 的大小是 20GB。

当虚拟机的磁盘空间不足时，可以在 VMware 中扩展容量或添加硬盘。

扩展容量：虚拟机 - 设置 - 硬件 - 硬盘 - 扩展 - 设置最大磁盘大小。譬如设置为 160GB，那么虚拟机的磁盘 0 的大小会变成 160GB，C 盘 60GB 不变，在磁盘管理中可以将未分配的 100GB 创建为 D 盘。

添加硬盘：虚拟机 - 设置 - 硬件 - 添加 - 硬盘 - 设置最大磁盘大小。譬如设置为 100GB，那么虚拟机会增加一块大小为 100GB 的磁盘 1，在磁盘管理中可以将它创建为 100GB 的 D 盘。

当虚拟机内删除文件后，观察到 .vmdk 文件的大小并没有相应地减小，网上搜索后找到很多办法，但未测试成功。索性删除并重装系统比较方便，如果虚拟机里安装了许多软件不方便重装的朋友继续研究。

按材料

按制造和封装形式

视频号直播可会生成推流地址和密钥。

微博可选“拉流”或“推流”，推/拉是针对直播平台来说的，即此处的“拉流”是指微博从视频源（如阿里云视频直播）拉流，“推流”指视频源（如 OBS）往微博推流。

微博或抖音的“拉流”方式以及 OBS 软件的使用方式请参考文章：如何使用阿里云视频直播服务在抖音上直播监控摄像头画面，建议先了解一下流程，有助于进一步配置“推流”方式。

第一步，从微博直播的“推流”方式或微信视频号的创建直播页面中生成推流地址和密钥：

第二步，配置 OBS Studio 的推流服务：

服务选择“自定义”，填入服务器和串流密钥，“应用”。

点击“开始推流”。

在微博或视频号中预览直播并继续创建完成。