在浏览器中使用 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来提供服务的。
网友回复
如何编写一个chrome插件实现多线程高速下载大文件?
cdn版本的vue在网页中出现typeerror错误无法找到错误代码位置怎么办?
pywebview能否使用webrtc远程控制共享桌面和摄像头?
pywebview6.0如何让窗体接受拖拽文件获取真实的文件路径?
如何在linux系统中同时能安装运行apk的安卓应用?
python有没有离线验证码识别ocr库?
各家的ai图生视频及文生视频的api价格谁最便宜?
openai、gemini、qwen3-vl、Doubao-Seed-1.6在ui截图视觉定位这款哪家更强更准?
如何在linux上创建一个沙箱隔离的目录让python使用?
pywebview如何使用浏览器自带语音识别与webspeech 的api?