Plugin: Unable to use lamejs plugin with the React Wiki example

[johnblakey]

Description

Attempted to modify the React version from the Wiki https://github.com/collab-project/videojs-record/wiki/React into a lamejs audio-only version with the instructions from https://github.com/collab-project/videojs-record/wiki/Plugins#lamejs and https://github.com/collab-project/videojs-record/blob/master/examples/plugins/audio-only-mp3.html .

Steps to reproduce

• Create the React Wiki example
• Modify index.js file:

const videoJsOptions = {
  controls: true,
  width: 600,
  height: 300,
  fluid: false,
  plugins: {
    wavesurfer: {
        src: "live",
        waveColor: "#36393b",
        progressColor: "black",
        debug: true,
        cursorWidth: 1,
        msDisplayMax: 20,
        hideScrollbar: true
    },
    record: {
        audio: true,
        video: false,
        maxLength: 20,
        debug: true,
        audioEngine: "lamejs",
        audioWorkerURL: "../../node_modules/lamejs/worker-example/worker-realtime.js",
        audioSampleRate: 44100,
        audioBitRate: 128
    }

• Modify the App.js file by adding:

import lamejs from 'videojs-record/dist/plugins/videojs.record.lamejs.js';

Note I added an entry into the webpack.config.dev.js file in the new webpack.ProvidePlugin array similar to the WaveSurfer: 'wavesurfer.js', but adding lamejs: 'lamejs' did not impact the errors. I'm unclear how to use https://github.com/collab-project/videojs-record/wiki/Webpack with the lamejs plugin.

• Install lamejs npm package
• Start the local server with npm start
• Click the microphone icon

Results

Expected

To record mp3 files

Actual

Error thrown when clicking the microphone icon

Error output

index.js:2178 TypeError: EngineClass is not a constructor
    at Record.onDeviceReady (videojs.record.js:2214)
    at wavesurfer.min.js:6
    at Array.forEach (<anonymous>)
    at MicrophonePlugin.value [as fireEvent] (wavesurfer.min.js:6)
    at MicrophonePlugin.gotStream (wavesurfer.microphone.js:442)
    at wavesurfer.microphone.js:274
App.js:45 {type: "error", target: div#myVideo.video-js.vjs-paused.myVideo-dimensions.vjs-wavesurfer.vjs-record.vjs-workinghover.vjs-v7…, relatedTarget: undefined, preventDefault: ƒ, defaultPrevented: false, …}
index.js:2178 VIDEOJS: ERROR: Error: Could not load lamejs plugin
    at Record.onDeviceReady (videojs.record.js:2217)
    at wavesurfer.min.js:6
    at Array.forEach (<anonymous>)
    at MicrophonePlugin.value [as fireEvent] (wavesurfer.min.js:6)
    at MicrophonePlugin.gotStream (wavesurfer.microphone.js:442)
    at wavesurfer.microphone.js:274
App.js:50 device error: Error: Could not load lamejs plugin
    at Record.onDeviceReady (videojs.record.js:2217)
    at wavesurfer.min.js:6
    at Array.forEach (<anonymous>)
    at MicrophonePlugin.value [as fireEvent] (wavesurfer.min.js:6)
    at MicrophonePlugin.gotStream (wavesurfer.microphone.js:442)
    at wavesurfer.microphone.js:274

Additional Information

versions

videojs

2.4.1

browsers

Chrome Version 67.0.3396.99

OSes

macOS High Sierra Version 10.13.6

[thijstriemstra]

After following React wiki page I tried:

npm install --save lamejs

Video.js options in src/index.js:

const videoJsOptions = {
    controls: true,
    width: 320,
    height: 240,
    fluid: false,
    plugins: {
        // wavesurfer section is only needed when recording audio-only
        wavesurfer: {
            src: 'live',
            waveColor: "#36393b",
            progressColor: "black",
            debug: true,
            cursorWidth: 1,
            msDisplayMax: 20,
            hideScrollbar: true
        },
        record: {
            audio: true,
            video: false,
            maxLength: 10,
            debug: true,
            audioEngine: "lamejs",
            audioWorkerURL: "../../node_modules/lamejs/worker-example/worker-realtime.js",
            audioSampleRate: 44100,
            audioBitRate: 128
        }
    }
};

Gives the following error:

VIDEOJS: ERROR: Error: "Could not load lamejs plugin"

So I added a lamejs plugin import in src/App.js:

import videojs from 'video.js';
import 'webrtc-adapter';
import RecordRTC from 'recordrtc';

// the following imports are only needed when you're recording
// audio-only using the videojs-wavesurfer plugin
import WaveSurfer from 'wavesurfer.js';
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
WaveSurfer.microphone = MicrophonePlugin;

// register videojs-wavesurfer plugin
import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
import Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';

// register videojs-record plugin with this import
import Record from 'videojs-record/dist/videojs.record.js';

// register videojs-record lamejs plugin
import LamejsEngine from 'videojs-record/dist/plugins/videojs.record.lamejs.js';
videojs.LamejsEngine = LamejsEngine;

And now I'm getting a syntax error when trying to load lamejs's worker-realtime.js webworker. Does create-react-app support webworkers @johnblakey?

[johnblakey]

Short answer no. Long answer is contained in this issue facebook/create-react-app#4505 - it'll be supported eventually, but no timeline was given. Although it looks like I could do research and come up with a solution in the meantime.

[thijstriemstra]

any news @johnblakey?

[thijstriemstra]

I'm making this low priority since lamejs doesn't seem to be maintained (actively) anymore.

[johnblakey]

@thijstriemstra Our project isn't needing to upgrade the quality of our recordings so I was able to use the default. Feel free to close this ticket.