Angular 18.2.3加载FFmpeg时SharedArrayBuffer未定义错误解决

问题场景 #

开发Angular 18.2.3项目时，使用最新版ffmpeg.wasm进行视频裁剪和帧提取，加载FFmpeg时控制台抛出错误：

Error loading FFmpeg: ReferenceError: SharedArrayBuffer is not defined

初始化FFmpeg的核心代码如下：

export class VideoEditorComponent implements OnInit {
  ffmpeg = createFFmpeg({ log: true });
  isPlaying = false;
  frameDataArray: Uint8Array[] = [];
  frameIndex = 0;

  async trimAndExtractFrames(): Promise<void> {
    try {
      // Load FFmpeg
      await this.ffmpeg.load();
      console.log("FFmpeg loaded successfully");
    } catch (error) {
      console.error("Error loading FFmpeg:", error);
    }
  }
}

已确认ffmpeg.wasm在纯JS应用中可正常运行，Angular项目已正确提供WebAssembly文件，尝试配置跨源头但不确定是否正确。

疑问解答 #

1. 如何解决Angular中SharedArrayBuffer未定义的错误？ #

有两种可行方案：

• 方案一：启用SharedArrayBuffer支持（推荐，保留多线程性能）
  配置项目的HTTP响应头，添加以下两个必填头：

  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp
  

  具体配置方式见下文第2、3点。

• 方案二：禁用ffmpeg.wasm多线程（快速临时解决）
  如果不需要多线程优化，可以在创建FFmpeg实例时禁用worker，这样就不会依赖SharedArrayBuffer：

  ffmpeg = createFFmpeg({ 
    log: true,
    worker: false // 禁用多线程，无需SharedArrayBuffer
  });
  

2. Angular中使用WebAssembly应用，使用SharedArrayBuffer是否需要特定配置？ #

需要，且必须满足两个核心要求：

• 配置HTTP响应头：必须同时设置Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp，这是浏览器启用SharedArrayBuffer的强制条件。
• Angular开发环境配置：修改angular.json文件，在项目的serve配置中添加响应头：

  "projects": {
    "your-project-name": {
      "architect": {
        "serve": {
          "options": {
            "headers": {
              "Cross-Origin-Opener-Policy": "same-origin",
              "Cross-Origin-Embedder-Policy": "require-corp"
            }
          }
        }
      }
    }
  }
  

• 生产环境配置：根据部署的服务器类型添加响应头：
  • Nginx：在配置文件的server块中添加：

    add_header Cross-Origin-Opener-Policy same-origin;
    add_header Cross-Origin-Embedder-Policy require-corp;
    

  • Apache：在.htaccess或虚拟主机配置中添加：

    Header set Cross-Origin-Opener-Policy "same-origin"
    Header set Cross-Origin-Embedder-Policy "require-corp"
    

  • Node.js（Express）：在服务器初始化代码中添加：

    app.use((req, res, next) => {
      res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
      res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
      next();
    });
    

3. 如何确保Angular项目中支持该特性的必要HTTP头配置正确？ #

可以通过两种方式验证：

• 浏览器开发者工具验证：

  1. 启动Angular应用，打开Chrome开发者工具（F12）
  2. 切换到Network标签，刷新页面，找到主文档请求（通常是index.html）
  3. 查看Response Headers区域，确认存在Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp

• 命令行验证（生产环境）：
  使用curl命令请求你的应用域名，检查响应头：

  curl -I https://your-production-domain.com
  

  输出结果中应包含上述两个头字段。

  另外需注意：配置require-corp后，所有外部资源（如CDN脚本、图片）必须满足跨源要求——要么是同域资源，要么带有正确的CORS响应头，或者在HTML标签中添加crossorigin="anonymous"属性。

内容的提问来源于stack exchange，提问作者Memariya Chirag