使用vite + vue3.0 + ffmpeg.js配置 ，解码H.264数据

1、下载插件

下载：ffmpeg.min.js
下载：ffmpeg-core.js
下载：ffmpeg-core.worker.js
下载：ffmpeg-core.wasm

2、文件放在public中

3、修改ffmpeg.min.js

源文件：

修改后：

4、引入ffmpeg.min.js

5、使用ffmpeg

const { createFFmpeg, fetchFile } = window.FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
/**
* @param h264Data:Uint8Array
*/
async function decodeH264Frame(h264Data) {
  // 这里假设h264Data是一个包含H.264帧数据的Uint8Array
  // 实际上，你可能需要将H.264帧包装成FFmpeg可以识别的格式，比如添加SPS和PPS

  // 写入H.264数据到FFmpeg的文件系统
  ffmpeg.FS('writeFile', 'input.h264', h264Data);

  try {
    // 尝试解码H.264数据
    await ffmpeg.run('-i', 'input.h264', '-frames:v', '1', '-pix_fmt', 'rgb24', 'output.png');

    // 读取解码后的图像数据
    const outputData = ffmpeg.FS('readFile', 'output.png');
    const imageBlob = new Blob([outputData.buffer], { type: 'image/png' });

    // 创建一个URL来访问图像数据
    const imageUrl = URL.createObjectURL(imageBlob);
    console.log(imageUrl)
    // 你可以在这里将图像URL设置到一个<img>标签的src属性来显示图像
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);

    // 清理：当你不再需要图像时，释放URL对象
    // URL.revokeObjectURL(imageUrl);
  } catch (error) {
    console.error('Error decoding H.264 frame:', error);
  }
}
ffmpeg.load().then(() => {
   decodeH264Frame(new Uint8Array(list))
 })

5、运行报错 SharedArrayBuffer is not defined

原因分析：
1.SharedArrayBuffer 简介:
SharedArrayBuffer 是 JavaScript 的一个内置对象，允许不同的线程或 Web Worker 之间共享同一块内存。这可以显著提高多线程之间的通信和数据交换效率，特别是在处理大量数据时。
2.跨域隔离的背景和原因
同源策略：浏览器遵循同源策略，限制网站访问跨域资源的方式，以防止不同源之间的不安全操作。
Spectre 漏洞：这是一种利用缓冲时延旁路和 CPU 预执行机制的安全漏洞，可能导致敏感信息泄露。
由于 Spectre 漏洞的安全风险，SharedArrayBuffer 需要在跨域隔离环境中使用，以防止攻击者利用该漏洞进行攻击。

解决方案：
vite.config本地修改：
修改server - header

nginx服务修改：

location / {
    # 设置响应头
    add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
    add_header 'Cross-Origin-Opener-Policy' 'same-origin';
}