仅使用 Videojs-record 录制音频，无需 wavesurfer答案

【问题标题】：Record audio only with Videojs-record without wavesurfer仅使用 Videojs-record 录制音频，无需 wavesurfer
【发布时间】：2021-09-24 02:39:32
【问题描述】：

我在我的 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")
  }
}

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

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

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？谢谢！

【问题讨论】：

标签： javascript video.js wavesurfer.js videojs-record

【解决方案1】：

我想通了。

首先，没有办法不将 wavesurfer 与 Videojs-record 音频一起使用，但我想出了如何在我的项目中使用它。

我遇到的问题是我试图设置播放器选项并在激活我的刺激动作时构建播放器，所以在加载控制器之后。这导致 WaveSurfer.microphone.create() 无法初始化。我通过将选项移动到刺激connect() 动作解决了这个问题，因此当刺激控制器加载时播放器被构建。然后在我的行动中，我打电话给player.record().getDevice()，一切正常。

【讨论】：