React App Example Throws Error (SharedArrayBuffer is not defined)

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Clone the repo
2. Install dependencies (yarn)
3. Run app (yarn start)
4. Open http://localhost:300
5. Click “Start”
6. You will see an error like:

Unhandled Rejection (ReferenceError): SharedArrayBuffer is not defined
▶ 2 stack frames were collapsed.
async doTranscode
src/App.js:13
  10 | });
  11 | const doTranscode = async () => {
  12 |   setMessage('Loading ffmpeg-core.js');
> 13 |   await ffmpeg.load();
     | ^  14 |   setMessage('Start transcoding');
  15 |   ffmpeg.FS('writeFile', 'test.avi', await fetchFile('/flame.avi'));
  16 |   await ffmpeg.run('-i', 'test.avi', 'test.mp4');
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Expected behavior Of course, the demo working fresh from an install to work.

Screenshots

Desktop (please complete the following information):

• OS: macOS 11.4
• Browser Chrome
• Version 92.0.4515.131 (Official Build) (x86_64)

[dnsking]

--enable-features=SharedArrayBuffer is no longer supported, you have to add the meta tag <meta http-equiv="origin-trial" content="token"> to your index.html header. You can get your token from here

[Francois-Laberge-Bose]

Protip to future explorers. Here’s how you enable sharedbuffers when developing on localhost.

Enabling cross-origin isolation on a local server might be a pain as simple servers do not support sending headers. You can launch Chrome with a command line flag --enable-features=SharedArrayBuffer to enable SharedArrayBuffer without enabling cross-origin isolation. Learn: how to run Chrome with a command line flag on respective platforms.