React App Example Throws Error (SharedArrayBuffer is not defined)

[Francois-Laberge-Bose]

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)

[Francois-Laberge-Bose]

Realized I should have read the instructions better. This probably comes from not reading the installation instructions on how to make ShareArrayBuffer available. Following them now. Leaving the issue in case it helps other confused people (who didn't RTFM):

[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.

[Vordty]

@Francois-Laberge-Bose

I've been facing the same issue these last couple of days. Have you found anything useful? command line flag "--enable-features=SharedArrayBuffer" is not working for me. Also for React applications I tried "react-app-rewired" with this example.

You can set headers locally for React applications using this package. But It pretty much disabled all of my iframes and images outside of my domain. I'm currently stuck fixing/allowing mentioned assets.

Let us know if you have any breakthrough. Thanks.

[Francois-Laberge-Bose]

So these steps work for me for this repo if it helps.

1. Clone/Install/Run app:

git clone 
npm install
npm start
open http://localhost:3000/examples/browser/transcode.html

2. Click Choose File
3. Find a small test .mov video to speed transcoding up. (See attached)
4. You should now be able to play back the video

I lost track of the context, where is the React App example?

https://user-images.githubusercontent.com/34040155/129919884-55f3f2ea-6ae7-4046-8905-2d8954635bb9.mov

[jinhang87]

script/server.js

++++

app.use((_, res, next) => {
  res.header('Cross-Origin-Opener-Policy', 'same-origin');
  res.header('Cross-Origin-Embedder-Policy', 'require-corp');
  next();
});

[Hassnain243A]

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Add the code below in the main index file

if ("serviceWorker" in navigator) {

  | // Register service worker   | navigator.serviceWorker.register(new URL("http://localhost/yt/sw.js")).then(   | function (registration) {   | console.log("COOP/COEP Service Worker registered", registration.scope);   | // If the registration is active, but it's not controlling the page   | if (registration.active && !navigator.serviceWorker.controller) {   | window.location.reload();   | }   | },   | function (err) {   | console.log("COOP/COEP Service Worker failed to register", err);   | }   | );   | } else {   | console.warn("Cannot register a service worker");   | }   |     | if(self.crossOriginIsolated){   | console.log("OK");   | }else{   | console.log("No");   | }

After that create a sw.js file having headers for Cross-origin isolation. Make sure to set the correct path above

self.addEventListener("install", function () { self.skipWaiting(); });

self.addEventListener("activate", (event) => { event.waitUntil(self.clients.claim()); });

self.addEventListener("fetch", function (event) { if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") { return; }

event.respondWith( fetch(event.request) .then(function (response) { // It seems like we only need to set the headers for index.html // If you want to be on the safe side, comment this out // if (!response.url.includes("index.html")) return response;

    const newHeaders = new Headers(response.headers);
    newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
    newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");

    const moddedResponse = new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: newHeaders,
    });

    return moddedResponse;
  })
  .catch(function (e) {
    console.error(e);
  })

); });

I works with me

[ZainUlMustafa]

@Francois-Laberge-Bose

I've been facing the same issue these last couple of days. Have you found anything useful? command line flag "--enable-features=SharedArrayBuffer" is not working for me. Also for React applications I tried "react-app-rewired" with this example.

You can set headers locally for React applications using this package. But It pretty much disabled all of my iframes and images outside of my domain. I'm currently stuck fixing/allowing mentioned assets.

Let us know if you have any breakthrough. Thanks.

I am facing this similar problem. But I tried your solution and it worked. I am failing to understand it right now. My OS: Linux Mint Cinnamon. Launch command: google-chrome --enable-features=SharedArrayBuffer

[minikN]

Using the React App, if I set the headers correctly I get this error:

getCreateFFmpegCore.js:22 GET https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

[StrdImging]

I created this repository for testing purposes and one of my colleague, @Abdullah-Majeed added some configuration in package.json.

See: https://github.com/ZainUlMustafa/ReactJS-FFmpeg

It may help. Kudos. Zain (Tech lead at Strada Imaging)

[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

[billll-ppp]

--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

Worked for me! After searching for answers for several hours, I just want to express my gratitude.

[Zophiel]

@dnsking Is this all that is needed? Added it to my index.html but i still get that SharedArrayBuffer is not defined.

[ZiuChen]

--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

This worked for me. Thank you alot !