前端ffmpeg.wasm视频压缩资源报错问题:SharedArrayBuffer is not defined

NO.1
问题描述

ffmpeg官网:https://ffmpegwasm.netlify.app/

使用ffmpeg.wasm时报错

[info] load ffmpeg-core
ffmpeg.min.js:1 [info] loading ffmpeg-core
index.html:43 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined
    at blob:null/8452e117-df52-45b6-84bc-a1de7048d16b:22:175
    at ffmpeg.min.js:1:9946
    at u (ffmpeg.min.js:1:14022)
    at Generator._invoke (ffmpeg.min.js:1:13810)
    at Generator.next (ffmpeg.min.js:1:14447)
    at o (ffmpeg.min.js:1:5985)
    at c (ffmpeg.min.js:1:6188)

参考文档
https://github.com/ffmpegwasm/ffmpeg.wasm/issues/263

SharedArrayBuffer 仅适用于跨域隔离的页面。因此,需要使用 ffmpeg.wasm 和标头托管自己的服务器。

需要设置以下两个关键配置

Cross-Origin-Embedder-Policy: require-corp

Cross-Origin-Opener-Policy: same-origin

NO.2
解决方案

要解决这个问题,无法从前端来解决

不论是localhost访问,还是file访问,还是http-server模式访问,只要不是服务端部署,就会有跨域隔离问题

可以通过nginx设置,也可以在node,比如express中加入对应的配置

本文只说明nginx

本文的部署示例

 location /ffmpeg/ {  
      add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
      add_header 'Cross-Origin-Opener-Policy' 'same-origin';	 
} 

如果你的网站部署在根目录,则应该长这个样子

 location / {  
      add_header 'Cross-Origin-Embedder-Policy' 'require-corp';
      add_header 'Cross-Origin-Opener-Policy' 'same-origin';	 
} 
NO.3
Tips

经测试,在手机端使用ffmpeg.wasm转码,太慢

使用pc chrome浏览器不快不慢,勉勉强强,用来作为临时小工具不错

END.