Repository: collab-project/videojs-record

Issue #567: ffmpeg.wasm plugin: React throws ReferenceError: FFmpeg is not defined
Created: 2021-04-11T07:08:03Z
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";

Duplicate issue #601: Can't load plugins in angular "Error: Could not load ffmpeg.wasm plugin"
Created: 2021-08-17T02:39:38Z
Description
Can't load plugins in Angular - 'could not load'
Steps to reproduce
Follow install instructions to get angular project up and running. Then same for the plugin (eg ffmpeg-wasm) as in docs.
Results
Expected
Example working with record/transcode
Actual
Error thrown on deviceReady, recorder unresponsive.
Error output
The raw error output is

The inner exception, thrown away in videojs.record.js L1699 is

It seems like the _engineLoader is returning null for the ConvertEngineClass.
Please bear with me as I am a .net dev new to js and angular and the way packages work here. It's possible that I'm not properly including something, but it all seems to be there - if videojs were missing then I'd expect the player/recorder not to work (everything is fine if no plugins are used). The line in the plugin docs:

isn't 100pc clear to me in an Angular project. I think it seems unnecessary in Angular? I also tried bundling the script in the angular.json but that didn't fix anything. In any case, the error message displayed is not very informative.
Additional Information
Please include any additional information necessary here. Including the following:
versions
videojs
what version of videojs does this occur with?
+-- video.js@7.14.3
+-- videojs-record@4.5.0
+-- @ffmpeg/core@0.10.0
+-- @ffmpeg/ffmpeg@0.10.1
browsers
what browser(s) are affected? Make sure to test with all third-party browser extensions disabled.
Chrome
Firefox
Edge
OSes
what platforms (operating systems and devices) are affected?
Android
Windows 10

Closing comment (2021-08-17T23:14:17Z): duplicate of #567?