在浏览器中使用 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如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?