0
95
ViewsRecord audio only with Videojs-record without wavesurfer
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!
1 answers
Answer question0
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.