【小程序】播放 pcm 流

> 在上传文件时，为了降低后端服务器压力、提高上传速度等。可由前端直接上传至oss。
> 
> 当使用 npm 的方式使用 oss sdk 时，build 可能会异常。可以采用 cdn 的方式使用。
> 
> Github：[ali-oss](https://github.com/ali-sdk/ali-oss)

### 实现逻辑

如果是批量上传，则需控制上传队列，单个依次执行上传。

单个文件上传简单逻辑如下：

1. 获取 oss config
2. 初始化 oss sdk
3. 执行分片上传
   - 这里不论文件大小都采用分片上传的方式，目的是为了简化，统一逻辑。
   - 可针对不同文件指定不同的分片数量（例如：文件小于1MB则分1片）
4. 上传成功后上报 oss path

### 异常处理

1. 初始化 oss sdk 需要有 token，由于token直接输出至前端，出于安全考虑 token 必须设置有效期，例如 5 分钟。因此客户端需 在 token 过期之前，提前刷新 token。防止 token 过期导致上传失败。
   - 为什么 5 分钟有效期还不够用？客户端网络不可控
2. 在进行分片上传时，如果上传失败，可设置自动重试。重试次数可根据业务自定。
   - 断点续传？可根据业务自行实现。

### 能力扩展

1. 上传速度
   - 上传开始前 记录当前时间为开始时间
   - 通过上传的 progress 回调。可以获得上传进度，进而可以获取已上传的文件大小。如果以此刻为结束时间的话，那么就可大约计算出上传速度
   - 由于 progress 回调频率不够高，如果需要更高频率显示，可自行实现加速逻辑。比如在一次 progress 回调中计算多次结果。
2. 单文件上传进度
   - 通过 progress 回调根据已上传文件大小，计算得出当前上传进度。
3. 整体上传任务进度
   - 如果需要显示批量的进度，则可在每个文件上传后或者每个文件的 progress 回调（更精细的进度显示）中计算。 
4. 失败重试
   - 在上传失败时可设置自动重试逻辑。超过最大重试次数则最终上传失败。
5. 针对不同文件设置不同分片
    - 合理的分片能够更好的利用带宽，增加上传速度。
    - 同域名下的浏览器并发限制为6个（不同浏览器，不同版本可能限制存在差异，主要目的是需要合理的限制并发数）
    - 根据文件大小，以及并发数量，计算出分片数量以及每片大小。
6. 使用加速域名
   - 如果客户端由于地域原因导致上传慢或者失败。可在上传失败时启用加速域名进行加速上传（修改oss config）。
7. 文件检查
   - 在上传之前可简单进行文件类型，大小等检查。如果不符合业务则直接给出提示即可。

### 代码实现

- refreshSTSTokenInterval 可根据业务情况进行修改。
- calcPart 可根据业务情况自行实现。

```javascript
let client;

const uploadConfig = {
  fileList: [],
  params: new Map(),
  data: {},
};

const multipartUpload = (file) => {
  return new Promise(async (resolve, reject) => {
    const res = await getOssConfig();

    const startTime = Date.now();

    client = new OSS({
      ...getStsConfig(uploadConfig.data.sts_config),
      refreshSTSToken: async () => {
        const info = await getOssConfig();
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken,
        };
      },
      refreshSTSTokenInterval: interval * 60 * 1000,
    });

    client
      .multipartUpload(dir, file.file, {
        progress: (p) => {
          const costTime = (Date.now() - startTime) / 1000;
          const uploadedSize = ((file.file?.size || 0) * p) / 1024 / 1024;
          const fileSpeed = (uploadedSize / costTime).toFixed(2);

          console.table({
            '0-name': file.name,
            '1-fileSize': (file.file?.size || 0) / 1024 / 1024 + 'M',
            '2-progress': p * 100 + '%',
            '3-costTime': costTime + 's',
            '4-uploadedSize': uploadedSize + 'M',
            '5-fileSpeed': fileSpeed + 'M/s',
            '6-partSize': calcPart(file.file?.size || 0).partSize / 1024 / 1024 + 'M',
          });

          uploadConfig.speedMap[file.name] = fileSpeed;
        },
        ...calcPart(file.file?.size || 0),
      })
      .then((res) => {
        uploadConfig.retryMap[file.name] = 0;
        delete uploadConfig.speedMap[file.name];
        resolve(res);
      })
      .catch(async (err) => {
        if (err?.message?.includes('expired') && uploadConfig.retryMap[file.name] < 3) {
          try {
            uploadConfig.retryMap[file.name] += 1;
            uploadConfig.data = await getOssConfig();
            resolve(await multipartUpload(file));
          } catch (e) {
            reject(e);
          }
        } else {
          uploadConfig.retryMap[file.name] = 0;
          reject(err?.message || err?.name);
        }
      });
  });
};

function calcPart(size) {
  const mbSize = size / 1024 / 1024;

  const config = {
    parallel: 6,
    partSize: size,
  };

  if (mbSize > 12 && mbSize <= 50) {
    config.partSize = Math.ceil(mbSize / 6) * 1024 * 1024;
  }

  if (mbSize > 50 && mbSize <= 100) {
    config.partSize = Math.ceil(mbSize / 12) * 1024 * 1024;
  }

  if (mbSize > 100) {
    config.partSize = Math.ceil(mbSize / 18) * 1024 * 1024;
  }

  return config;
}
```


【OSS】前端直传 oss

> 在web项目日常更新中经常会遇到，代码更新后用户无感知。导致功能异常或者体验不到新功能。
>
> 因此需要更新提醒机制来主动告知用户，系统有更新需要重新加载。
>
> 以下方案暂不考虑轮询引起的压力问题。

**基本原理：请求远端标记与当前标记做判断，不一致则更新。**

### 方案一：请求静态文件

- 在 vue，react 等项目打包完成之后会生成静态js文件。
- js文件名称格式一般为 name+hash.ext，因此可以利用hash来进行判断是否有更新。
- 轮询请求入口html文件。利用正则获取 例如app_hash.js中的hash值，与当前文件中的hash值做比对，如果一致说明无更新，如果不一致给出更新提醒。

#### 优势

- 纯依赖前端，快
- 无需进行环境区分，直接请求当前环境文件即可

#### 不足

- 无法进行更精细化管理。只要hash不一致就会给出提醒
- 更新后 hash 如果未发生变化，则会视为无更新

### 方案二：请求约定文件

- 在打包完成后，在固定位置以及html中生成更新标记文件（更新标记的生成可由自动化脚本完成，更新标记可视情况决定是否需要），更新标记需包含以下内容
    - 标识：版本号、commit id或其他
    - 环境：dev、pro或其他
- 轮询请求更新标记，按照环境获取对应的标识与入口html中的标识来进行判断是否需要触发更新。

#### 优势

- 解决方案一的不足
- 不受项目限制，可按约定全项目通用

#### 不足

- 更新标记生成需要额外成本

### 注意

- 在请求静态文件或者更新标记时 GET 请求会有缓存，导致文件内容不更新
    - 可在请求url后增加 _t 参数，参数值为时间戳
    - 更换 POST 请求
- 部署方式不同可能会导致异常
    - 部署方式一：（入口html，静态资源）-> 服务器。一起更新则无问题。
    - 部署方式二：（静态资源）-> oss -> (入口html) -> 服务器。
        - 方案一无问题
        - 方案二则会发生：触发了更新提醒，但是刷新后依旧显示旧页面的问题。原因是因为静态资源更新时入口文件并为更新，此时如果刷新页面，则还是旧版本入口文件。因此需要增加逻辑判断，当入口文件中的标识与更新标记文件中的标识一致时才会触发更新。


【更新提醒】Web 实现更新提醒

> 在某些场景下，例如表单提交，经常会需要重置表单状态。可以通过以下的方式进行组件状态优雅重置。

### xxx写法

```vue

<template>
  <div>
    <div>{{ state.name }} - {{ state.age }}</div>
    <div @click="resetState">reset ref</div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';

  const state = reactive({
    name: 1,
    age: 2,
  });

  function resetState() {
    state.name = 1;
    state.age = 2;
  }
</script>
```

### Hook 封装

```javascript
import { ref, reactive } from 'vue';

function clone(value) {
  return JSON.parse(JSON.stringify(value));
}

export function useResettableRef(value) {
  const initialValue = clone(value);
  const state = ref(value);

  const reset = () => {
    state.value = clone(initialValue);
  }

  return [state, reset];
}

export function useResettableReactive(value) {
  const state = reactive(clone(value));

  const reset = () => {
    Object.keys(state).forEach((key) => delete state[key]);
    Object.assign(state, clone(value));
  }

  return [state, reset];
}
```

### Hook 使用

```vue

<template>
  <div>
    <div>ref：{{ refState.name }} - {{ refState.age }}</div>
    <div @click="resetRefState">reset ref</div>

    <div>reactive：{{ reactiveState.name }} - {{ reactiveState.age }}</div>
    <div @click="resetReactiveState">reset ref</div>
  </div>
</template>

<script setup>
  import { useResettableRef, useResettableReactive } from '@/hooks/index.js';

  const [refState, resetRefState] = useResettableRef({
    name: 1,
    age: 2
  });

  const [reactiveState, resetReactiveState] = useResettableReactive({
    name: 1,
    age: 2
  });
</script>
```


【Vue】Vue3 重置组件状态

### 背景

SharedArrayBuffer 是 JavaScript 中一种特殊的对象类型，用于在多个 Web Workers 或主线程之间共享内存。它与普通的 ArrayBuffer
类似，但 可以在多个线程中同时访问和修改。这种功能对于需要高性能并发处理的场景非常有用，比如实时数据处理、游戏开发、音视频处理等。

> 2017.7月（Chrome 60）引入 SharedArrayBuffer。
>
> 2021.7月（Chrome 92）限制 SharedArrayBuffer 只能在 cross-origin isolated 页面使用。（Spectre 漏洞）

### 解决方案

##### 一、不启用 SharedArrayBuffer

##### 二、 在 HTTP 响应头中添加以下两个安全标头：

1. Cross-Origin-Opener-Policy (COOP):
    - 将页面与其他来源的窗口隔离开来。
    - 推荐值：same-origin。
2. Cross-Origin-Embedder-Policy (COEP):
    - 确保页面中加载的资源具备同源性或具有适当的跨源授权。
    - 推荐值：require-corp。

示例配置：

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

##### 三、Chrome Origin Trials

申请地址：[Trial for SharedArrayBuffers in non-isolated pages on Desktop platforms](https://developer.chrome.com/origintrials/#/view_trial/303992974847508481)

### 参考资料

- [关于 SharedArrayBuffer spectre 攻击的讨论](https://github.com/tc39/security/issues/3)
- [使用 SharedArrayBuffer 进行 Spectre 攻击的原理](https://www.giantbranch.cn/2018/01/09/腾讯玄武实验室检测浏览器spectre的原理)
- [使用 COOP 和 COEP 将网站设置为“跨源隔离”](https://web.dev/articles/coop-coep?hl=zh-cn)
- [A year with Spectre: a V8 perspective](https://v8.dev/blog/spectre)


【Wasm】SharedArrayBuffer(SAB) is not defined

### 在 React 中进行模拟触发输入

> 参考：https://github.com/facebook/react/issues/11488

在自动化测试或在线调试React项目中，会遇到直接修改input的valut值UI变化，但是内部state并没有修改的情况。因此需要hack方法来解决：

```javascript
let input = document.querySelector('xxx');
let lastValue = input.value;
input.value = 'xxx';
let event = new Event('input', {bubbles: true});
event.simulated = true;
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue)
}
input.dispatchEvent(event);
const enterKeyEvent = new KeyboardEvent('keypress', {
  key: 'Enter',
  keyCode: 13,
  code: 'Enter',
  which: 13,
  bubbles: true,
});
input.dispatchEvent(enterKeyEvent);
```

```javascript
const fileInput = document.querySelector('input[type="file"]');

async function simulateRemoteFileSelection(url) {
  const response = await fetch(url);
  const blob = await response.blob();

  const file = new File([blob], "file.mp4", {
    type: blob.type,
  });

  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(file);

  fileInput.files = dataTransfer.files;

  const event = new Event('change', {bubbles: true});
  fileInput.dispatchEvent(event);
}

simulateRemoteFileSelection('xxxx');
```

【React hack】在 React 中模拟触发输入

### 基于路由的访问控制（Route-Based Access Control）

> 前端 routes.js 中定义完整路由，每个路由 meta 信息中的 role 来标识权限值。登陆之后通过用户的权限过滤完整路由，最终生成用户路由。

#### 特点

- 集中管理：在 routes.js 中集中管理所有路由及其权限信息。
- 动态生成用户路由：用户登录时根据权限动态过滤路由，生成符合用户权限的路由配置。
- 基于角色的访问控制：通过 meta.role 来管理和控制角色权限，可以支持多角色的访问权限需求。

#### 流程

- 定义完整路由表：在 routes.js 中定义所有路由和对应的 meta.role 信息。
- 用户登录后获取权限：用户登录后，获取用户权限信息（如角色、权限 ID 等）。
- 动态过滤路由：根据用户的权限信息过滤完整路由表，生成仅包含用户有权限访问的路由。
- 动态注入路由表：将过滤后的路由表动态注入到路由配置中。

### 业务背景

> 基于上述流程。在实际业务中，如果用户进入无匹配路由页面时（**实际路由确实不存在、权限不足导致无匹配路由**），会重定向至 404
> 页面（此动作由 vue-router 的 路由匹配完成）。
>
> [捕获所有路由或 404 Not found 路由](https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#捕获所有路由或-404-Not-found-路由)

```javascript
// 需在用户路由表生成后添加
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: '/404',
};
```

#### 问题

通过以上操作，一旦匹配不到路由就会重定向至 404 页面。此时无法区分进入 404 的原因到底是因为 **实际路由不存在** 还是 **权限不足
**
**。

#### 解决方案

为了解决上述问题可以修改 **NotFound** 中的 **redirect** 如下:

```javascript
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: (to) => {
    console.log(to);
    return '/404';
  },
};
```

在将 **redirect** 配置项设置为方法后：

1. 参数 **to**：可以访问跳转前的路由信息，帮助了解用户试图访问的路径。
2. 方法 **router.getRoutes**：可以获取所有已注册的路由表，便于进行权限和路径验证。

在此基础上，需要实现以下两重判断：

1. 路径存在性判断：利用 **to.path** 检查目标路径是否在路由表中。
    - 若路径存在：说明目标路径已注册。（可忽略。~~进一步判断用户是否有权限访问。此时，如果用户跳转到了 **404**
      页面，通常意味着当前用户没有访问该路径的权限。~~）
    - 若路径不存在：说明路由没有进行注册。
2. 增加标记：可以通过修改 **to.query** 或其他方式，标记跳转到 **404** 的原因，便于前端展示不同的提示内容。

通过这种判断，能够精准地确认跳转至 **404** 的原因，进一步支持前端展示出更具体的权限提示信息。


【Vue router】动态路由匹配下的权限处理

> 在获取视频任意时刻的截图时，通常大多数的做法都是
> - 通过视频播放，canvas绘制
> - 借助ffmpeg
> 
> 除此之外，还有另外一种方式：URI Queries

### 使用方式

只需要在url后面带上#t=xx（秒）即可，如果是本地文件的话，上传之后需要拿到blobUrl

```html

<div>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=1.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=2.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=3.5"></video>
</div>


<div>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=1.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=2.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=3.5"></video>
</div>


<script>
  fetch('https://www.w3school.com.cn/i/video/shanghai.mp4').then(res => res.blob()).then(blob => {
    const blobUrl = URL.createObjectURL(blob);
    console.log(blobUrl);
  })
</script>
```

到此就可以渲染出指定时刻的图片。就这？是的，没错，就这。

### 优点

- 快
- 简单

### 缺点

- 每一张图实际是一个video，会导致资源重复请求，视频文件过大，图片过多，网络压力较大。
- 请求网络地址进而转换成本地地址，虽然可以解决并发导致的网络压力，但是如果文件过大，首次加载依旧需要消耗比较长的时间。

### 总结

具体使用什么方式，还需根据业务需求决定。

> 参考文档：https://www.w3.org/TR/media-frags/#media-fragment-syntax

【秒级】获取视频时刻图

# 适用于Vite环境的JavaScript混淆插件

>仓库地址：[vite-plugin-bundle-obfuscator](https://github.com/z0ffy/vite-plugin-bundle-obfuscator)

## ⭐️ 特性

- [x] ⚡ 支持 Vite 项目中的 JavaScript 混淆。
- [x] 🚀 多线程支持，以获得更好的性能。
- [x] ⚙️ 可定制的混淆器选项，以满足您的需求。
- [x] 🛡️ 自动排除 node_modules。
- [x] 📦 支持 node_modules 拆分块。

## ⚠️ 注意

- 如果混淆选项stringArray为true。
    - 您的结果可能会丢失一些捆绑包（在__vite__mapDeps数组中）。
    - 我正在寻找一个准确的案例。
- 如果打包过程中出现内存溢出。修改打包命令为：cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_CJS_IGNORE_WARNING=true vite build，其中 max-old-space-size 根据机器配置自行设置。
- 在设置 node_modules 分包时，请把准确的包名前置。例如：["vue-router", "vue"]，"vue"可以同时匹配到 vue 以及 vue-router。

## 🌐 在线示例

✦ [Vite - Vanilla](https://stackblitz.com/edit/vitejs-vite-zsytij?file=vite.config.js)
✦ [Vite - Vue](https://stackblitz.com/edit/vitejs-vite-ywho91?file=vite.config.js)
✦ [Vite - React](https://stackblitz.com/edit/vitejs-vite-wyeur4?file=vite.config.js)
✦ [Vite - PReact](https://stackblitz.com/edit/vitejs-vite-oujmks?file=vite.config.js)
✦ [Vite - lit](https://stackblitz.com/edit/vitejs-vite-ru4gws?file=vite.config.js)
✦ [Vite - Svelte](https://stackblitz.com/edit/vitejs-vite-fthdtu?file=vite.config.js)
✦ [Vite - Solid](https://stackblitz.com/edit/vitejs-vite-dcx3eh?file=vite.config.js)
✦ [Vite - Qwik](https://stackblitz.com/edit/vitejs-vite-i2bjvq?file=vite.config.js)
✦ ...


## 📦 安装

```bash
# 使用npm
npm install vite-plugin-bundle-obfuscator -D

# 使用pnpm
pnpm add vite-plugin-bundle-obfuscator -D

# 使用yarn
yarn add vite-plugin-bundle-obfuscator -D
```

## 👨‍💻 使用

1. 使用您首选的软件包管理器安装插件。
2. 在vite.config.js中注册插件。
3. 自定义混淆器配置或使用默认选项。

示例:

```javascript
import vitePluginBundleObfuscator from 'vite-plugin-bundle-obfuscator';

const defaultObfuscatorConfig = {
  excludes: [],
  enable: true,
  log: true,
  autoExcludeNodeModules: false,
  threadPool: false,
  options: {
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: 0,
    disableConsoleOutput: false,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    numbersToExpressions: false,
    renameGlobals: false,
    selfDefending: true,
    simplify: true,
    splitStrings: false,
    stringArray: false,
    stringArrayCallsTransform: false,
    stringArrayCallsTransformThreshold: 0.5,
    stringArrayEncoding: [],
    stringArrayIndexShift: true,
    stringArrayRotate: true,
    stringArrayShuffle: true,
    stringArrayWrappersCount: 1,
    stringArrayWrappersChainedCalls: true,
    stringArrayWrappersParametersMaxCount: 2,
    stringArrayWrappersType: 'variable',
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false,
  }
};

export default {
  plugins: [
    // vitePluginBundleObfuscator()
    vitePluginBundleObfuscator(defaultObfuscatorConfig)
  ]
};
```
