在使用 FFmpeg 处理音视频时，前端开发者可能会遇到 ReferenceError: SharedArrayBuffer is not defined 这个错误。这通常与浏览器的安全策略有关，尤其是在使用 WebAssembly 和共享内存等特性时，SharedArrayBuffer 的使用需要特殊的安全配置。
什么是 SharedArrayBuffer？
SharedArrayBuffer 是一种在多个线程之间共享内存的能力，允许 JavaScript 代码进行高效的并行处理。然而，由于安全漏洞，特别是 Spectre 漏洞的影响，现代浏览器对 SharedArrayBuffer 的使用进行了限制。为了安全，浏览器只有在启用一系列特定的安全策略后，才会允许使用 SharedArrayBuffer。
出现错误的原因
当你在支持 WebAssembly 的前端项目中尝试使用 FFmpeg 时，如果 FFmpeg 的某些功能试图使用 SharedArrayBuffer，但浏览器没有特别的安全配置，就会抛出 ReferenceError: SharedArrayBuffer is not defined 的错误。解决这一问题的第一步是确保你的网页满足浏览器的安全要求。
解决方案
要解决这个问题，你需要在你的网页上实施「Cross-Origin Embedder Policy」和「Cross-Origin Opener Policy」，这两个 HTTP 头文件能确保你的网页在安全的环境下运行。
1. 服务器配置
如果你有控制服务器的权限，可以在服务器的响应头中添加以下内容：
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
这将告诉浏览器，只有同源的请求才会被允许。
2. 项目的代码示例
下面是一个基础的 HTML 文件示例，演示如何正确配置头文件以及引用 FFmpeg（请注意，这个示例仅用于演示，确保在实际项目中安全性和功能性）。你需要通过其他方式（如 Nginx 或 Express.js）设置 HTTP 头。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FFmpeg 示例</title>
<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@latest"></script>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>使用 FFmpeg 处理视频</h1>
<input type="file" id="uploader" />
<button id="processBtn">处理视频</button>
<pre id="output"></pre>
<script>
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
document.getElementById('processBtn').onclick = async () => {
const uploader = document.getElementById('uploader');
if (!uploader.files.length) {
alert('请上传视频文件');
return;
}
const file = uploader.files[0];
// 加载 FFmpeg
if (!ffmpeg.isLoaded()) {
await ffmpeg.load();
}
// 将文件添加到 FFmpeg
ffmpeg.FS('writeFile', file.name, await fetchFile(file));
// 处理视频示例 (如转码)
await ffmpeg.run('-i', file.name, 'output.mp4');
const data = ffmpeg.FS('readFile', 'output.mp4');
// 创建下载链接
const videoURL = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
const outputPre = document.getElementById('output');
outputPre.innerHTML = `<a href="${videoURL}" download="output.mp4">下载处理后的视频</a>`;
};
</script>
</body>
</html>
补充说明
在上面的示例代码中，我们使用了 @ffmpeg/ffmpeg 库来处理视频。请确保在真实的应用中，前端和后端都进行了必要的安全配置。
总结
ReferenceError: SharedArrayBuffer is not defined 这个错误通常是由于浏览器的安全策略导致无法使用共享内存。通过设置适当的 HTTP 头文件，确保页面在符合安全条件下运行，可以帮助解决该问题。在处理音视频的时候，如果能正确配置并利用 FFmpeg，将能极大地提高前端应用的能力和性能。
