助けてください。昨日まで使えてたFFmpegJSライブラリが急に使えなくなった。

Question

タイトルの通り昨日まで本番環境で問題なく機能してたライブラリが使えなくなりました。
調べたらhttps://githubmemory.com/repo/ffmpegwasm/ffmpeg.wasm/issues/231のトラブルとおそらく一緒でグーグルの更新によって機能しなくなっている感じです。
ef8f87eb-2d66-4bad-9f9e-d11c8e8a0401:22 Uncaught (in promise) ReferenceError: SharedArrayBuffer is not definedとライブラリからエラーがでます。
解決策が記述してあるところで翻訳しても意味がわかりませんでした。申し訳ないです。。

ffmpegライブラリからの例外エラーとして

requested a shared WebAssembly.Memory but the returned buffer is not a SharedArrayBuffer, indicating that while the browser has SharedArrayBuffer it does not have WebAssembly threads support - you may need to set a flag"),h&&console.log("(on node you may need: --experimental-wasm-threads --experimental-wasm-bulk-memory and also use a recent version)

他に気になる点として、googleのISSUESからメッセージがありました。

SharedArrayBuffer usage is restricted to cross-origin isolated sites
SharedArrayBuffers (SABs) can be used to construct high-resolution timers. High-resolution timers simplify Spectre attacks on cross-origin resources.
To mitigate security risks across browsers, SharedArrayBuffers are gated behind cross-origin isolated contexts starting with Chrome 92 (July 2021). To continue using SharedArrayBuffers, please ensure that this page opts-into cross-origin isolation by setting Cross-Origin-Opener-Policy and Cross-Origin-Embedder-Policy appropriately.
Note that for each iframe, only the first issue is reported for performance reasons.
1 violation
Source Location	Trigger	Status
ffmpeg-core.js:22	Instantiation	warning
Learn more: Enabling SharedArrayBuffer

就活用のポートフォリオとして出そうとしてたもので急なエラーで焦っています。ご助力のほどよろしくお願いします。

Comments

[nonoshu]

解決策が記述してあるところ
のURLを質問文に追加してみてください

Answer 1

コード
<?php?>
header('Cross-Origin-Opener-Policy: same-origin');
header('Cross-Origin-Embedder-Policy: require-corp');
<?php>

追加したらFFmpegが動作するようになりましたが、AWS S3に繋がらなくなりました。
また解決していきたいと思います。
FFmpegの件サポートありがとうございました。また機会がありましたらご助力の方よろしくお願いします。

Answer 2

https://github.com/ffmpegwasm/ffmpeg.wasm に記載があるんですが

SharedArrayBuffer is only available to pages that are cross-origin isolated. So you need to host your own server with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin headers to use ffmpeg.wasm.

つまりサイトは完全に独立している必要があります。

サーバーの設定が必要だったかな。
nginxの場合は https://qiita.com/tukiyo3/items/8124d5066737debdc6bb を参考にするとイイよ。
apacheの場合はドキュメントルートのところに

<Directory "/var/www/html">
    Header set Access-Control-Allow-Origin "http://localhost:8080"
    Header set Cross-Origin-Embedder-Policy: require-corp
    Header set Cross-Origin-Opener-Policy: same-origin
</Directory>

こんな感じで設定してあげるとイイよ。

firebaseでホスティングしている場合は https://firebase.google.com/docs/hosting/full-config?hl=ja#headers ここを見てね。

あと、使用しているwasmと関連ファイルをダウンロードして配置する必要がある。

• ffmpeg.min.js
• ffmpeg-core.js
• ffmpeg-core.wasm
• ffmpeg-core.worker.js

wasmを使用している箇所で

<script src="ffmpeg.min.js"></script>

のようにパスを設定し

const ffmpeg = createFFmpeg({
    corePath: 'ffmpeg-core.js',
    log: true
});

のようにパスを指定してffmpegを初期化してください。

Comments

[fuyukixxx]

丁寧なご回答ありがとうございます。本番環境をherokuでローカルをMAMPで作っています。
わからない点で教えてもらいたいのが、herokuはおそらくapacheなのでどこに下のコードを貼ればよいですか？
<Directory "/var/www/html">
Header set Access-Control-Allow-Origin "http://localhost:8080"
Header set Cross-Origin-Embedder-Policy: require-corp
Header set Cross-Origin-Opener-Policy: same-origin
</Directory>

[SakuraSymphony]

ファイルとしては
```
/etc/httpd/conf/httpd.conf
```
になります。管理者権限でないと編集できないので注意してください。

[fuyukixxx]

/etc/httpd/conf/httpd.confコマンドはターミナルで行う感じですか？
apacheがあまり理解してなくてすみません。

それとhttps://skill-up-engineering.com/2020/04/29/heroku%E3%81%A7%E3%81%AEhttpd-conf%E8%A8%AD%E5%AE%9A/ みたいに編集するにはProcfileファイルをいじる必要があるのですか？

[SakuraSymphony]

サーバー系不慣れなんですね。了解です。
ターミナル(TeraTermなど)でサーバーにログインし、管理者権限ユーザーに切り替えます。
vi コマンドで上記のhttpd.conf ファイルを編集してapacheの再起動を行います。
このあたりのことはググれば出てくると思いますので、頑張ってください。

[fuyukixxx]

わかりました。もう少し調べてみます。

[fuyukixxx]

何度もすみません。
Header set Access-Control-Allow-Origin "http://localhost:8080"
"http://localhost:8080" <-ここのURLは本番環境のURLに変えないといけないのですか？