仅使用没有 wavesurfer 的 Videojs-record 录制音频

Question

我在我的 Rails 应用程序中使用 Videojs 和 Videojs-record 来创建消息并从用户浏览器捕获视频和屏幕。我正在使用 tailwindcss 构建自定义 UI，我正在使用 Stimulusjs 来处理所有按钮点击等

我没有使用 Videojs 播放器中的控件来获取设备，而是有一个按钮可以在我的刺激控制器中调用一个动作。

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")
  }
}

当我想录制视频和 screen/audio（对选项进行一些更改）时，这非常有用，但我也想让我的用户能够创建音频消息。

当我将播放器的选项更改为

audio: true,
video: false

Videojs-record 自动尝试将 wavesurfer 库与 videojs-wavesurfer 和麦克风插件一起使用。

wavesurfer 库很棒，我不反对使用它，但是 player.record().getDevice() Videojs-record 方法在使用时不起作用，相反它似乎迫使我单击大按钮启用麦克风。

我尝试找到一种与 player.record().getDevice() 类似的方法来从 wavesurfer.js 和麦克风插件中启用用户麦克风，但我没有找到任何运气。

有没有办法让我 player.record().getDevice() 只获取用户麦克风而无需使用 wavesurfer 插件？或者有没有我没有找到的 videojs-wavesurfer 方法可以让我使用自定义按钮 getDevice？谢谢！

Answer 1

我想通了。

首先，没有办法不使用 wavesurfer 和 Videojs-record audio only，但我想出了如何在我的项目中使用它。

我运行遇到的问题是我试图设置播放器选项并在激活我的 Stimulus 操作时构建播放器，所以在加载控制器之后。这导致 WaveSurfer.microphone.create() 无法初始化。我通过将选项移动到刺激 connect() 动作来解决这个问题，这样播放器就会在刺激控制器加载时构建。然后在我的行动中，我调用 player.record().getDevice() 并且一切正常。

仅使用没有 wavesurfer 的 Videojs-record 录制音频

Record audio only with Videojs-record without wavesurfer

javascript

video.js

wavesurfer.js

videojs-record