使用Videojs-record仅录音频时如何绕过wavesurfer实现自定义调取麦克风

方案1：禁用wavesurfer加载，复用原有getDevice逻辑（推荐） #

videojs-record默认在纯音频模式下会自动切换为wavesurfer引擎，你可以通过强制指定引擎为recordrtc绕过这个逻辑，完全不需要引入wavesurfer相关依赖，原有player.record().getDevice()方法可以直接正常使用，和你现有视频/屏幕录制的逻辑完全统一。
调整后的配置如下：

startCapture() {
  let options = {
    // video.js options
    controls: false,
    bigPlayButton: false, // 不需要内置大按钮可直接关闭
    loop: false,
    fluid: true,
    plugins: {
      // videojs-record plugin options
      record: {
        audio: true,
        video: false,
        engine: 'recordrtc' // 强制指定RecordRTC引擎，跳过wavesurfer加载逻辑
      }
    }
  }
  player = videojs(this.previewMediaTarget, options, () => {
    console.log("Videojs-record is ready")
    // 初始化完成后直接调用即可触发麦克风权限申请
    player.record().getDevice()
  })
}

该方案无需修改后续录制结果的处理逻辑，也不会引入额外的依赖体积，完全适配你自定义UI、Stimulus控制交互的开发模式。

方案2：保留wavesurfer，通过API触发麦克风启动 #

如果你需要用到wavesurfer的波形展示能力，可以直接调用videojs-wavesurfer挂载的麦克风实例方法触发设备调取，不需要点击内置按钮。
在播放器初始化完成、wavesurfer加载就绪后调用以下代码即可：

// 监听wavesurfer就绪事件，确保实例已挂载
player.on('wavesurferReady', () => {
  // 直接调用麦克风启动方法，触发权限申请
  player.wavesurfer().mic.start()
})

该方法和player.record().getDevice()效果完全一致，你可以直接放到Stimulus控制器的自定义按钮点击事件中使用。

内容的提问来源于stack exchange，提问作者oobie11