title: How to define SharedArrayBuffer in Chrome?
body: <p>I am working on React + WASM + FFmpeg app following <a href="https://fireship.io/lessons/wasm-video-to-gif/" rel="noreferrer">this tutorial</a></p>
  <p>On Chrome, I got the error <code>Uncaught (in promise) ReferenceError: SharedArrayBuffer is not defined error.</code></p>
  <p>I followed the <a href="https://developer.chrome.com/blog/enabling-shared-array-buffer/" rel="noreferrer">doc reference</a>, and it says the below, which I don't understand.</p>
  <hr />
  <h2>Cross-origin isolation overview</h2>
  <p>You can make a page cross-origin isolated by serving the page with these headers:</p>
  <pre><code>Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  </code></pre>
  <hr />
  <p>What does <code>serving the pages with these headers</code> mean?</p>
  <p>How do I implement that?</p>
  <p>I even found <a href="https://www.youtube.com/watch?v=D5DLVo_TlEA&amp;t=1s" rel="noreferrer">Chrome dev's official video</a>, but even that does not explain any implementation detail.</p>
  <p>Edit2: The best instruction I can find is <a href="https://web.dev/cross-origin-isolation-guide/#enable-cross-origin-isolation" rel="noreferrer">here</a>, but even that is too vague for me. What does it mean by setting a header? I'm not requesting anything to begin with.</p>
  <p>Edit: My React version is already 17.0.2, so <a href="https://stackoverflow.com/questions/66489286/sharedarraybuffer-will-require-cross-origin-isolation-as-of-m91-around-may-2021">this should have been fixed</a> but I am somehow getting this error as well...</p>
  <p><code>[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021.</code></p>