ffmpeg.wasm plugin: React throws ReferenceError: FFmpeg is not defined
See original GitHub issueDescription
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";
Issue Analytics
- State:
- Created 2 years ago
- Reactions:7
- Comments:11
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.