+
50
-

ffmpeg.js浏览器执行报错:SharedArrayBuffer is not defined

ffmpeg.js浏览器执行报错:SharedArrayBuffer is not defined

这个怎么解决

 <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>


网友回复

+
0
-

在浏览器中使用 ffmpeg.js 并出现 SharedArrayBuffer is not defined 错误通常与两个因素有关:浏览器的安全策略和对 SharedArrayBuffer 对象的支持。

自从跨站点脚本泄露(Spectre)漏洞被发现之后,现代浏览器已经对 SharedArrayBuffer 对象的使用施加了额外的限制。为了使用 SharedArrayBuffer,需要满足下面两个条件:

Cross-Origin Resource Sharing (CORS):页面必须在支持CORS的环境下被加载和执行。这通常意味着,服务器需要在响应头中设置 Access-Control-Allow-Origin。

Cross-Origin Embedder Policy (COEP) and Cross-Origin Opener Policy (COOP):你需要启用COEP和COOP头。这些安全头确保了页面被隔离,并且只能使用从同样设置了这些头的服务器请求资源。

这是一个如何为你的网站设置相关头的例子:

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

这必须在服务器层面上进行设置。如果你控制服务器,你可以添加以上的HTTP头到你的响应中。如果你使用的是静态文件托管或是第三方服务,那么你需要查看服务文档来了解如何进行这些设置。

除了服务端配置外,浏览器自身也必须支持 SharedArrayBuffer。并非所有浏览器都支持或默认启用了该特性,部分老旧浏览器可能完全不支持。可以通过在浏览器的开发者工具控制台尝试创建一个 SharedArrayBuffer 来检查浏览器是否支持:

try {
let sab = new SharedArrayBuffer(1024);
// 浏览器支持 SharedArrayBuffer
} catch (e) {
// 浏览器不支持 SharedArrayBuffer 或未正确配置 COOP 和 COEP
console.error(e);
}

确保访问ffmpeg.js依赖资源的所有页面和脚本都满足以上条件。如果你没有自己的服务器设置这些头,并且依赖于第三方CDN,你需要保证CDN也有正确的COEP和COOP设置。

最后,自从 Browser's Site Isolation 特性被引入以来,一些功能如 SharedArrayBuffer 可能要求网站部署在安全的上下文(通过HTTPS)以便使用。

确保你的网站是通过HTTPS来提供服务的。 

我知道答案,我要回答