Open2021/09/23にコメント追加2

coep

kajirikajiri 2021/09/23

ffmpeg.wasmを使うにはmin.jsを使う必要がある。

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.

しかし、ffmpeg.wasmはsharedarraybufferをしようする必要があり、coepとcoopをresponse headerに設定する必要がある

しかし、coepとcoopを指定された通りに設定すると、https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.jsのような他のorigin(今回はunpkg.com)から<script src="" />で読み込むことができない。（こういうエラーが出る: GET https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200
）

なので、https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.jsをファイルとして保存して読み込ませる必要がある

この対応をすると外部からリソースを読み込めなくなって不便。ということで一時的に回避するために、https://developer.chrome.com/origintrials/#/register_trial/303992974847508481ここで申請して、https://developer.chrome.com/blog/enabling-shared-array-buffer/#origin-trialここにあるようにmetaタグに設定すれば良い。
ただし、Chrome 96までしか保証されていないと書いてあるので、移行期間として捉える。

kajirikajiri 2021/09/23

cloudflareでheaderを追加する時はcloudflare workers

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {

  let originalResponse = await fetch(request)

  // pass in the original response so we can modify some of it.
  let response = new Response(originalResponse.body,originalResponse);

  response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
  response.headers.set('Cross-Origin-Opener-Policy','same-origin');

  return response
}