在浏览器中使用 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来提供服务的。
网友回复
python如何调用openai的api实现知识讲解类动画讲解视频的合成?
html如何直接调用openai的api实现海报可视化设计及文本描述生成可编辑海报?
f12前端调试如何找出按钮点击事件触发的那段代码进行调试?
abcjs如何将曲谱播放后导出mid和wav格式音频下载?
python如何将曲子文本生成音乐mp3或wav、mid文件
python中mp3、wav音乐如何转成mid格式?
js在HTML中如何将曲谱生成音乐在线播放并下载本地?
python如何实现在windows上通过键盘来模拟鼠标操作?
python如何给win10电脑增加文件或文件夹右键自定义菜单?
python如何将音乐mp3文件解析获取曲调数据?