Record audio only with Videojs-record without wavesurfer

Question

I'm using Videojs and Videojs-record in my Rails app to create messages and capture video and screen from the users browser. I'm building a custom UI using tailwindcss and I'm using Stimulusjs to handle all the button clicks etc.

Instead of using the controls within the Videojs player to get the devices, I have a button that calls an action in my stimulus controller.

startCapture() {
  let options = {
    // video.js options
    controls: false,
    bigPlayButton: true,
    loop: false,
    fluid: true,
    plugins: {
      // videojs-record plugin options
      record: {
        audio: true,
        video: {
          width: { min: 640, ideal: 852, max: 1280 },
          height: { min: 480, ideal: 480, max: 720 }
        }                    
      }
    }
  }
  player = videojs(this.previewMediaTarget, options, () => {
    console.log("Videojs-record is ready")
  }
}

This works great when I want to record video and screen/audio (with some alterations in the options), but I also want to give my users the ability to create audio messages.

When I change the options for my player to

audio: true,
video: false

Videojs-record automatically tries to use the wavesurfer library with the videojs-wavesurfer and microphone plugins.

The wavesurfer library is great and I wouldn't be opposed to using it, however the player.record().getDevice() Videojs-record method doesn't work when using it and instead it seems forces me to click the big button to enable the mic.

I've tried finding a similar method to player.record().getDevice() to enable the users microphone from within the wavesurfer.js and microphone plug in, but I haven't had any luck.

Is there a way for me to just player.record().getDevice() and only get the users mic without having to use the wavesurfer plugin? Or is there a videojs-wavesurfer method I haven't found that will enable me to use a custom button to getDevice? Thank you!

Answer 1

I figured it out.

First, There is no way to not use wavesurfer with Videojs-record audio only, but I figured out how to use it in my project.

The problem I was running into was that I was trying to set the player options and build the player on activation of my Stimulus action, so after the controller was loaded. This was causing WaveSurfer.microphone.create() to not initialize. I solved the issue by moving the options to the stimulus connect() action so the player is built when the Stimulus controller loads. Then in my action, I call player.record().getDevice() and all works perfectly.