question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ffmpeg.wasm plugin: React throws ReferenceError: FFmpeg is not defined

See original GitHub issue

Description

Briefly describe the issue.

created new react app using create-react-app

Using screen share recording and saveAs works fine but when using plugin to convert it throws this error.

convert plugin using:

const videoJsOptions = {
  controls: true,
  bigPlayButton: false,
  width: 320,
  height: 240,
  fluid: false,
  plugins: {
    record: {
      audio: true,
      screen: true,
      displayMilliseconds: false,
      debug: true,
      convertEngine: "ffmpeg.wasm",
      convertWorkerURL: "../../node_modules/@ffmpeg/core/dist/ffmpeg-core.js",
      // convert recorded data to MP4 (and copy over audio data without encoding)
      convertOptions: [
        "-c:v",
        "libx264",
        "-preset",
        "slow",
        "-crf",
        "22",
        "-c:a",
        "copy",
        "-f",
        "mp4",
      ],
      // specify output mime-type
      pluginLibraryOptions: {
        outputType: "video/mp4",
      },
    },
  },
};

My Imports -

import React, { Component } from "react";

import logo from "./logo.svg";
import "./App.css";
import "video.js/dist/video-js.css";
import "videojs-record/dist/css/videojs.record.css";
import "@ffmpeg/ffmpeg/dist/ffmpeg.min.js";
import videojs from "video.js";
import "webrtc-adapter";
import RecordRTC from "recordrtc";
import Record from "videojs-record/dist/videojs.record.js";
import FFmpegWasmEngine from "videojs-record/dist/plugins/videojs.record.ffmpeg-wasm.js";

image

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:7
  • Comments:11

github_iconTop GitHub Comments

32reactions
MohannadEhabBarakatcommented, Jul 20, 2021

I uninstalled ffmpeg version 0.10.* then installed “@ffmpeg/core”: “^0.8.5”, “@ffmpeg/ffmpeg”: “^0.9.8”,

it works now fine with react. No idea why this worked

5reactions
ebaroonicommented, Sep 21, 2021

I uninstalled ffmpeg version 0.10.* then installed “@ffmpeg/core”: “^0.8.5”, “@ffmpeg/ffmpeg”: “^0.9.8”,

it works now fine with react. No idea why this worked

Are there any updates on how to solve this? Doing this doesnt work for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React throws ReferenceError: FFmpeg is not defined
Briefly describe the issue. created new react app using create-react-app. Using screen share recording and saveAs works fine but when using ...
Read more >
FFmpeg.wasm stopped working after adding cross origin ...
After that, now when I try to run the code I just got Uncaught ReferenceError: FFmpeg is not defined. The error is happening...
Read more >
@ffmpeg/ffmpeg NPM | npm.io
wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers. AVI...
Read more >
How To Build a Media Processing API in Node.js With Express ...
Note: Due to the limitations of WebAssembly, ffmpeg.wasm cannot handle input files over 2GB in size. Next, set up the POST /thumbnail endpoint ......
Read more >
Video to GIF with WASM - Fireship
Create a new react app, then install FFmpeg. command line. npx create-snowpack-app gifmakr --template @snowpack/app-template ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found