vue 录音navigator.mediaDevices.getUserMedia简单实现

vue 录音navigator.mediaDevices.getUserMedia简单实现

<template>
  <div id="microphone-test">
     <!-- controls 显示音频 -->
    <audio ref="recordPlayer" controls src="" />
    <button  @click="startRecord">开始录音</button>
    <button @click="endRecord">我说完了</button>
  </div>
</template>

<script>
export default {
  methods: {
    startRecord() {
      navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
        this.mediaRecorder = new MediaRecorder(stream)
        this.mediaRecorder.addEventListener('dataavailable', (event) => {
          //监听录音结束后将录制的音频放入audio标签
          this.$refs.recordPlayer.src = URL.createObjectURL(event.data)
        })
        this.mediaRecorder.start() //开始录音
      }).catch((error) => {
        this.$alert({ title:'错误', text: '开启麦克风失败！' + error })
      })
    },
    endRecord() {
      this.mediaRecorder.stop() //结束录音
    }
  }
}
</script>

扩展：

navigator.mediaDevices.getUserMedia用法

navigator.mediaDevices.getUserMedia({
   audio: {
     deviceId: this.recordDeviceId, //用哪个设备id录音（耳机/电脑 麦克风 ）
     volume: 0.5  //（录制声音大小 0~1）
   }
})

获取设备 麦克风/扬声器 设备id:

也许有多个设备 如：电脑麦克风/有线耳机/蓝牙耳机 等 所以获取的是一个设备id数组

navigator.mediaDevices.enumerateDevices().then((devices) => {
   this.recordDeviceIds = _.filter(devices, (device) => { return device.deviceId !== 'default' && device.kind === 'audioinput' })
   this.loudspeakerDeviceIds = _.filter(devices, (device) => { return device.deviceId !== 'default' && device.kind === 'audiooutput' })
})

提示：

在当前网页安全的情况下，浏览器会开启
navigator.mediaDevices.getUserMedia
我们通过它来实现录音
如果当前网页不安全可以通过设置谷歌浏览器强制该网页安全：
1.浏览器进入：chrome://flags/#unsafely-treat-insecure-origin-as-secure
2.