## 简介

一些老项目因为不为人知的原因，出现报错：
```console
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
```

找到一个临时解决方案：运行项目时设置环境变量`NODE_OPTIONS=--openssl-legacy-provider`。

Windows环境为例，修改运行脚本：

```bash
# 原来
# react-scripts start
# 修改后
set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start
```

PS：上面的修改在 `package.json` 中进行即可。如：

- 原来报错的 `package.json` ：
```json
{
  "scripts": {
    "dev": "react-scripts start"
  }
}
```

- 修改后的  `package.json` ：
```json
{
  "scripts": {
    "dev": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start"
  }
}
```






参考：https://github.com/parcel-bundler/parcel/issues/8005#issuecomment-1120149358



## 赞助请求V3

**建站因为热爱，生活需要Money，请屏幕前的大佬动动您发财的小手，点击一次以示鼓励，祝您生活愉快！**


<div class="article-ads"></div>

> PS：就目前的访问量，即便每个访客都点一次广告，收入也不足以支付运营成本。`如果看不到广告，可能是网络原因或被拦截了，那就算了吧。再次祝您生活愉快~~`

Node项目报错解决 Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer

## 简介

本文用于记录使用`FFmpeg`的记录，可当作笔记查阅。




## 处理加速

`FFmpeg` 在运行时主要使用 `CPU` 资源来进行视频解码、编码、转换和处理等操作。通常情况下，默认情况下 `FFmpeg` 不会直接利用 `GPU` 进行处理。但是，如果您的系统支持 `GPU` 加速，并且您的 `FFmpeg` 编译版本启用了相关的 `GPU` 加速选项，那么您可以通过设置相应的参数来利用 `GPU` 进行加速。

目前，`FFmpeg` 支持通过 `CUDA`、`OpenCL`、`VDPAU`、`VA-API`等接口来利用`GPU`进行加速。具体支持的接口取决于您使用的`FFmpeg`版本以及所使用的硬件和驱动情况。

如果您想要使用`GPU`进行加速，可以在编译`FFmpeg`时启用相应的选项，然后通过命令行参数或者`API`调用来指定使用`GPU`进行加速。

### CUDA加速

要在 `FFmpeg` 中使用 `CUDA` 开启 `GPU` 加速，您需要确保以下几点：

- 安装 `CUDA Toolkit`：首先，您需要安装 `NVIDIA` 的`CUDA Toolkit`，您可以从 `NVIDIA` 官方网站下载并安装适用于您操作系统版本的 `CUDA Toolkit`。

- 编译FFmpeg：在编译时您需要通过 `--enable-cuda` 参数启用CUDA支持。
 
> PS：**可与通过 `ffmpeg -buildconf` 命令查看你的 `FFmpeg` 编译配置，如果出现 `--enable-cuda` 相关配置，大都是支持 CUDA 加速的软件包。**

- 运行FFmpeg命令：一旦您编译并安装了 `CUDA` 支持的 `FFmpeg` ，您可以使用 `CUDA` 加速来执行相应的命令。在执行命令时，`FFmpeg` 会自动识别 `CUDA` 支持，并且尝试使用 `GPU` 进行加速处理。以下是一个示例命令，演示了如何使用 `CUDA` 加速进行视频转码：

```bash
ffmpeg -i input.mp4 -c:v h264_nvenc -profile:v high -preset:v fast output.mp4
```

在这个示例中，使用了 `h264_nven`c 编码器来利用 `NVIDIA` 的 `CUDA` 加速进行 `H.264` 视频编码。 `-profile:v high` 和 `-preset:v fast` 分别指定了编码器的配置参数。您可以根据需要调整参数来达到更好的性能和质量。

## 视频

### 视频裁剪

```bash
ffmpeg -i input.mp4 -vf "crop=640:480" output.mp4
```

- `-vf "crop=640:480"`: 将视频裁剪为`640x480`的分辨率。

### 视频优化

```bash
ffmpeg -i input_low_quality.mp4 -c:v libx264 -b:v 2M -vf "scale=1280:720" -c:a aac -b:a 192k output_high_quality.mp4
```
- `-i input_low_quality.mp4`：指定输入文件，这里是一个低质量的 MP4 视频文件。
- `-c:v libx264`：选择视频编码器为 libx264，这是一个 H.264 编码器。
- `-b:v 2M`：设置视频比特率为 2 Mbps。这决定了视频的压缩率，值越高，视频质量越好，但文件大小也越大。
- `-vf "scale=1280:720"`：使用视频滤镜进行缩放操作。这里将视频缩放到宽度为 1280 像素，高度为 720 像素。这可以用于改变视频的分辨率。
- `-c:a aac`：选择音频编码器为 AAC。
- `-b:a 192k`：设置音频比特率为 192 kbps。这决定了音频的压缩率，值越高，音频质量越好，但文件大小也越大。
- `output_high_quality.mp4`：指定输出文件，这里是一个高质量的 MP4 视频文件。

### MP4转M3U8

```bash
ffmpeg -i input.mp4 -c:v libx264 -c:a aac -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename output%d.ts output.m3u8
```

这个命令将输入文件 `input.mp4` 转换为 HLS 格式，并生成一个名为 `output.m3u8` 的 `M3U8` 播放列表文件和一系列的 `.ts` 切片文件。以下是对命令中参数的解释：

- `-i input.mp4`：指定输入文件的路径。
- `-c:v libx264`：指定视频编码器为libx264，用于视频编码。
- `-c:a aac`：指定音频编码器为aac，用于音频编码。
- `-f hls`：指定输出格式为HLS。
- `-hls_time 10`：指定每个切片的时长，这里是10秒。
- `-hls_list_size 0`：指定不限制播放列表的长度。
- `-hls_segment_filename output%d.ts`：指定`.ts`切片文件的命名模板为`output%d.ts`，其中`%d`表示数字序号，FFmpeg会根据序号生成一系列的`.ts`切片文件

```bash
# 使用GPU加速处理
ffmpeg -i input.mp4 -c:v h264_nvenc -b:v 10M -c:a aac -f hls -hls_time 10 -hls_list_size 0 -hls_segment_filename output%d.ts output.m3u8
```

- `-c:v h264_nvenc`：指定视频编码器为 `h264_nvenc`，这是 `NVIDIA GPU` 加速的 `H.264` 编码器。使用这个编码器可以利用 `NVIDIA GPU` 进行视频编码，从而提高转码速度和效率。
- `-b:v 5M`：指定视频的比特率为 `5M`，这是视频的目标比特率，用来控制视频的质量和文件大小。

> PS: 当您在使用 `FFmpeg` 进行视频转码时，如果没有设置 `-b:v` 参数来指定视频的目标比特率，`FFmpeg` 会尽可能地保留原始视频的质量和数据。所以，一些简单操作时无需使用 `-b:v` 参数。

### 音频和视频合并

```
ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac -strict experimental output.mp4
```
命令的解释：
- `-i video.mp4`：指定输入视频文件。
- `-i audio.mp3`：指定输入音频文件。
- `-c:v copy`：表示视频流直接复制，不重新编码。
- `-c:a aac`：表示音频流使用 `AAC` 编码。
- `-strict experimental`：允许使用实验性的 `AAC` 编码。
- `output.mp4`：输出的文件名。

其中音频文件可以是其他格式，如 `audio.m4a` 也是可以的。

## 音频

### 视频分离音频

```bash
ffmpeg -i input.mp4 -vn -acodec copy output_audio.aac
```
- `-i input.mp4`: 指定输入文件。
- `-vn`: 禁用视频流。
- `-acodec copy`: 表示使用原始音频编解码器进行拷贝。
- `output_audio.aac`: 是输出音频文件的名称。

### 音频格式直接转换为wav

```bash
ffmpeg -i input.mp4 -vn -acodec pcm_s16le -ar 44100 -ac 2 output_audio.wav
```
- `-i input.mp4`：指定输入文件。
- `-vn`：禁用视频流。
- `-acodec pcm_s16le`：选择音频编码器为 pcm_s16le，这是一个无损的音频编码器。
- `-ar 44100`：设置音频采样率为 44.1 kHz。你可以根据需要调整采样率。
- `-ac 2`：设置音频通道数为 2（立体声）。
- `output_audio.wav`：指定输出音频文件的名称。

### 音频文件合并

```bash
ffmpeg -i input1.wav -i input2.wav -filter_complex "[0:0][1:0]concat=n=2:v=0:a=1[out]" -map "[out]" output.wav
```
- `input1.wav` 和 `-i input2.wav`：指定两个输入文件。
- `filter_complex "[0:0][1:0]concat=n=2:v=0:a=1[out]"`：使用 `concat` 滤镜将两个音频文件拼接在一起。`n=2` 表示有两个输入文件，`v=0` 表示没有视频流，`a=1` 表示有一个音频流。
- `map "[out]"`：指定输出流。
- `output.wav`：输出的拼接后的文件。

ffmpeg使用记录

## 简介

本文用于记录一些突然想到的奇怪域名。

一般记录时的域名还是无主状态，如果有看中并且得手的朋友，可以留言通知一下哦~😀

> **PS：Theshy来全买了！** 😎



## .com

> 记录.com结尾的域名

|域名|记录时间|记录原因|缺点|
|--|----|----|----|
|xdxpx.com|2024-2-29|可以旋转的域名：`xdxpx`旋转180°不会变|含义不明|
|xbxdx.com|2024-2-29|镜像的域名|含义不明|

## .cc
|域名|记录时间|记录原因|缺点|
|--|----|----|----|
|nicepalette.work|2024-4-24|调色板|太长|
|nicepalette.cc|2024-4-24|调色板|太长|


## oldmoon

> 记录`oldmoon`同名域名

|域名|记录时间|记录原因|缺点|
|--|----|----|----|
|oldmoon.work|2024-2-29|同名|不适合博客|
|oldmoon.site|2024-2-29|同名|比较贵，cloudflare年付`$25.18`|

## dog

> 记录`dog`相关域名

|域名|记录时间|记录原因|缺点|
|--|----|----|----|
|x-dog-x.com|2024-2-29|dog|有特殊符号|
|dddogx.com|2024-2-29|可能是我的下一个域名||

突然想到的奇怪域名记录

- auto-reading：自动读文章
- auto-video：自动看视频
- auto-all：自动全部



## auto-reading

```javascript
const dWidth = device.width
const dHeight = device.height
main()

function main() {
  setScreenMetrics(dWidth, dHeight)
  console.show()
  var str = '屏幕宽度：' + dWidth + '\n屏幕高度：' + dHeight + '\n3秒后开始自动执行'
  console.info(str)
  sleep(3000)
  console.info('开始文章学习')
  start_reading()
  console.info('结束文章学习')
  console.info('学习结束，请手动结束程序，3秒后本窗口关闭')
  sleep(3000)
  console.hide()
}

function start_reading() {
  click(dWidth / 2, dHeight - 100)

  for (var i = 0; i < 8; i++) {
    readText()
    sleep(1000)
    reading()
    sleep(1000)
  }
}

function readText() {
  // 在屏幕上查找指定的文字，例如“按钮文本”
  var textToFind = '播报'
  var targetText = text(textToFind).findOne()

// 如果找到文字，则输出文字的坐标
  if (targetText) {
    var textBounds = targetText.bounds()
    var textX = textBounds.centerX()
    var textY = textBounds.centerY()

    // 输出文字坐标
    console.log('找到文字\"' + textToFind + '\"，坐标 X: ' + textX + ', Y: ' + textY)

    // 可以进行点击等操作
    click(textX - 200, textY)
    for (var i = 0; i < 5; i++) {
      sleep(10000)
      reading()
    }
    back()
  } else {
    console.error('未找到指定的文字：' + textToFind)
    readText()
  }
}

// 自动滑动半个屏幕，模拟阅读行为
function reading() {
// 设置滑动的起始坐标和终止坐标
  var startX = dWidth / 2
  var startY = dHeight * 0.8  // 起始坐标在屏幕底部的 4/5 处
  var endX = dWidth / 2
  var endY = dHeight * 0.2  // 终止坐标在屏幕顶部的 1/5 处

// 设置滑动时间，单位为毫秒
  var duration = 1000  // 滑动时间为1秒

// 执行滑动操作
  swipe(startX, startY, endX, endY, duration)
}

```
## auto-video

```javascript
const dWidth = device.width
const dHeight = device.height
main()

function main() {
  setScreenMetrics(dWidth, dHeight)
  console.show()
  var str = '屏幕宽度：' + dWidth + '\n屏幕高度：' + dHeight + '\n3秒后开始自动执行'
  console.info(str)
  sleep(3000)
  console.info('开始视频学习')
  start_video()
  console.info('结束视频学习')
  console.info('学习结束，请手动结束程序，3秒后本窗口关闭')
  sleep(3000)
  console.hide()
}

function start_video() {
  click(dWidth / 3, dHeight - 100)
  console.log('2秒后将尝试自动播放10分钟，如未开始播放，请手动点击一个视频')
  sleep(2000)
  click(dWidth / 2, dHeight / 4 * 2.5)
  for (var i = 0; i < 10; i++) {
    sleep(60000)
    reading()
  }
}


// 自动滑动半个屏幕，模拟阅读行为
function reading() {
// 设置滑动的起始坐标和终止坐标
  var startX = dWidth / 2
  var startY = dHeight * 0.8  // 起始坐标在屏幕底部的 4/5 处
  var endX = dWidth / 2
  var endY = dHeight * 0.2  // 终止坐标在屏幕顶部的 1/5 处

// 设置滑动时间，单位为毫秒
  var duration = 1000  // 滑动时间为1秒

// 执行滑动操作
  swipe(startX, startY, endX, endY, duration)
}

```
## auto-all

```javascript
const dWidth = device.width
const dHeight = device.height
main()

function main() {
  setScreenMetrics(dWidth, dHeight)
  console.show()
  var str = '屏幕宽度：' + dWidth + '\n屏幕高度：' + dHeight + '\n3秒后开始自动执行'
  console.info(str)
  sleep(3000)
  console.info('开始文章学习')
  start_reading()
  console.info('结束文章学习')
  console.info('开始视频学习')
  start_video()
  console.info('结束视频学习')
  console.info('学习结束，请手动结束程序，3秒后本窗口关闭')
  sleep(3000)
  console.hide()
}

function start_video() {
  click(dWidth / 3, dHeight - 100)
  console.log('2秒后将尝试自动播放10分钟，如未开始播放，请手动点击一个视频')
  sleep(2000)
  click(dWidth / 2, dHeight / 4 * 2.5)
  for (var i = 0; i < 10; i++) {
    sleep(60000)
    reading()
  }
}

function start_reading() {
  click(dWidth / 2, dHeight - 100)

  for (var i = 0; i < 8; i++) {
    readText()
    sleep(1000)
    reading()
    sleep(1000)
  }
}

function readText() {
  // 在屏幕上查找指定的文字，例如“按钮文本”
  var textToFind = '播报'
  var targetText = text(textToFind).findOne()

// 如果找到文字，则输出文字的坐标
  if (targetText) {
    var textBounds = targetText.bounds()
    var textX = textBounds.centerX()
    var textY = textBounds.centerY()

    // 输出文字坐标
    console.log('找到文字\"' + textToFind + '\"，坐标 X: ' + textX + ', Y: ' + textY)

    // 可以进行点击等操作
    click(textX - 200, textY)
    for (var i = 0; i < 5; i++) {
      sleep(10000)
      reading()
    }
    back()
  } else {
    console.error('未找到指定的文字：' + textToFind)
    readText()
  }
}

// 自动滑动半个屏幕，模拟阅读行为
function reading() {
// 设置滑动的起始坐标和终止坐标
  var startX = dWidth / 2
  var startY = dHeight * 0.8  // 起始坐标在屏幕底部的 4/5 处
  var endX = dWidth / 2
  var endY = dHeight * 0.2  // 终止坐标在屏幕顶部的 1/5 处

// 设置滑动时间，单位为毫秒
  var duration = 1000  // 滑动时间为1秒

// 执行滑动操作
  swipe(startX, startY, endX, endY, duration)
}

```

一点点autox实例

## 简介

使用强大的Vuetify开发前端页面，结果发现官方没有提供简便的全局消息通知组件（`像Element中的ElMessage那样`），所以自己动手写了一个简单的组件，效果如下：  
<img src="https://images.oldmoon.top/images/dingdangdog/dingdangdog-1708945211792.jpg" width="200px" />

> PS：如果是我没找到官方版本，请评论告诉我！下面直接上代码


<div class="article-ads"></div>


## 组件封装
### 全局变量：alert.ts

该文件可视为`util`文件，但我将其放在了`stores`文件夹下，主要提供了两个作用：
1. 定义`newAlert`全局变量，用于临时存储新Alert信息。
2. 定义常用的全局方法，用于快速创建`alert`，如：`successAlert`、`errorAlert`等。

```typescript
import { ref } from 'vue'

export interface AlertInfo {
  id: string,
  type: string,
  message: string
}

export const newAlert = ref<AlertInfo>({
  id: 'alert' + 0,
  type: '',
  message: ''
})

export const alert = (type: string, message: string) => {
  newAlert.value.id = Math.random().toString()
  newAlert.value.type = type
  newAlert.value.message = message
}


export const errorAlert = (message: string) => {
  alert('error', message)
}

export const successAlert = (message: string) => {
  alert('success', message)
}

export const infoAlert = (message: string) => {
  alert('info', message)
}

export const warningAlert = (message: string) => {
  alert('warning', message)
}

```



<div class="article-ads"></div>

### 组件：GlobalAlert.vue

该文件是`v-alert`二次封装的组件，主要提供了以下几个功能：
1. 监听`newAlert`值的变化，当值变化时，根据当时`newAlert`更新`alertMap`；
2. 遍历`alertMap`创建多个`v-alert`；
3. 定时删除历史`v-alert`；
4. css定义`v-alert`的显示位置。

```html
<script setup lang="ts">
import { ref, watch } from 'vue'
import { type AlertInfo, newAlert } from '@/stores/alert'

// 定义 Map，存储Alert信息集合，使用Map便于删除
const alertMap = ref<Map<string, AlertInfo>>(new Map)

// 监听新Alert创建
watch(newAlert.value, () => {
  alertMap.value.set(newAlert.value.id, { ...newAlert.value })
  console.log(alertMap.value)
  deleteAlert(newAlert.value.id)
})

const deleteAlert = (id: string) => {
  console.log(id)
  setTimeout(() => {
    alertMap.value.delete(id)
  }, 3000)

}
</script>

<template>
  <div class="alert-container">
    <v-alert
      class="v-alert"
      v-for="(alert, index) in Array.from(alertMap.values())"
      :key="index"
      :type="alert.type"
      border="start"
      variant="tonal"
      closable
      close-label="Close Alert"
      :text="alert.message"
    >
    </v-alert>
  </div>
</template>

<style scoped>
.alert-container {
  position: absolute;
  top: 8%;
  right: 5%;
}

.v-alert {
  margin-top: 0.2rem !important;
}
</style>

```

## 调用测试

有了以上两个文件后，即可调用测试


<div class="article-ads"></div>

### 引用组件

- 要想全局显示通知，则需要在项目顶层文件中引用该组件，保证页面打开时即加载该组件即可，没有特定位置，我是在`App.vue`中引用，如下：

```html
<script setup lang="ts">
import { RouterView } from 'vue-router'
// 引用GlobalAlert
import GlobalAlert from '@/components/GlobalAlert.vue'
</script>

<template>
    
  <GlobalAlert />
  <RouterView />
</template>

<style scoped>

</style>
```


### 调用工具方法

- 组件引用后，即可在项目任意地方调用工具方法测试效果，调用方式如下：

```html
<script setup lang="ts">
// 引入封装好的工具方法
import { successAlert, errorAlert, infoAlert, warningAlert } from '@/stores/alert'
</script>

<template>
  
  <v-btn variant="tonal"
         @click="successAlert('success')">
    success
  </v-btn>
  <v-btn variant="tonal"
         @click="errorAlert('error')">
    error
  </v-btn>
  <v-btn variant="tonal"
         @click="infoAlert('info')">
    info
  </v-btn>
  <v-btn variant="tonal"
         @click="warningAlert('warning')">
    warning
  </v-btn>
</template>

<style scoped>

</style>
```

## 可能存在的问题

1. 可能存在并发问题：没有进行并发测试；
2. 可能存在响应式问题：本示例仅在桌面端测试过，可能无法适配手机、平板等终端；

## 特别提醒

由于本人水平有限，不太会封装插件，因此采用这样简单的封装方式，本着能用就行的原则，暂时够用了，如果你的能力高超，完全可以将其拓展、封装成功能能全面的插件，感谢阅读~

相关内容：[Vuetify全局确认框的简单实现](https://www.oldmoon.top/post/431)


<div class="article-ads"></div>

使用vuetify实现全局v-alert消息通知

twitter:card

twitter:title

twitter:site

twitter:image

努力做一只帅气、有才、豁达的老狗！

twitter:description

程序员,笔记,Bug记录,编程技术,AI,Java,Node,Golang,个人博客,资源分享,月上老狗,dingdangdog