当前位置：首页 > VUE

vue实现通话录音

2026-01-20 22:46:00VUE

实现通话录音的基本思路

在Vue中实现通话录音功能，通常需要结合WebRTC技术和浏览器提供的MediaRecorder API。通话录音分为两部分：捕获音频流和使用MediaRecorder录制音频。

捕获音频流

使用浏览器提供的getUserMedia API获取用户的麦克风音频流。确保在调用前检查浏览器兼容性。

vue实现通话录音

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 处理音频流
  })
  .catch(error => {
    console.error('获取麦克风权限失败:', error);
  });

创建MediaRecorder实例

获取音频流后，初始化MediaRecorder对象并设置录音数据的事件监听。

const mediaRecorder = new MediaRecorder(stream);
let audioChunks = [];

mediaRecorder.ondataavailable = event => {
  audioChunks.push(event.data);
};

mediaRecorder.onstop = () => {
  const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
  audioChunks = [];
  // 处理录制完成的音频Blob
};

控制录音过程

提供开始、暂停、继续和停止录音的方法。

vue实现通话录音

function startRecording() {
  mediaRecorder.start();
}

function pauseRecording() {
  mediaRecorder.pause();
}

function resumeRecording() {
  mediaRecorder.resume();
}

function stopRecording() {
  mediaRecorder.stop();
}

在Vue组件中集成

将上述逻辑封装到Vue组件中，结合组件生命周期管理资源。

export default {
  data() {
    return {
      mediaRecorder: null,
      audioStream: null,
      isRecording: false,
      audioBlob: null
    };
  },
  methods: {
    async startRecording() {
      try {
        this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(this.audioStream);
        // 设置事件监听...
        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('录音启动失败:', error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.audioStream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  },
  beforeDestroy() {
    if (this.audioStream) {
      this.audioStream.getTracks().forEach(track => track.stop());
    }
  }
};

处理录制的音频

将录制的音频Blob转换为可播放的URL或上传到服务器。

// 创建音频URL
const audioUrl = URL.createObjectURL(audioBlob);

// 上传到服务器
const formData = new FormData();
formData.append('audio', audioBlob, 'recording.wav');
axios.post('/upload-audio', formData);

注意事项

确保应用运行在HTTPS环境下，某些浏览器在非安全环境下会限制媒体设备访问
录音前需要获取用户授权，处理用户拒绝权限的情况
不同浏览器对音频格式的支持可能不同，需要测试兼容性
移动端浏览器可能有额外的限制，需要特别测试

完整示例组件

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      audioStream: null,
      isRecording: false,
      audioUrl: null,
      audioChunks: []
    };
  },
  methods: {
    async startRecording() {
      try {
        this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
        this.mediaRecorder = new MediaRecorder(this.audioStream);

        this.mediaRecorder.ondataavailable = event => {
          this.audioChunks.push(event.data);
        };

        this.mediaRecorder.onstop = () => {
          const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
          this.audioUrl = URL.createObjectURL(audioBlob);
          this.audioChunks = [];
        };

        this.mediaRecorder.start();
        this.isRecording = true;
      } catch (error) {
        console.error('录音启动失败:', error);
      }
    },
    stopRecording() {
      this.mediaRecorder.stop();
      this.audioStream.getTracks().forEach(track => track.stop());
      this.isRecording = false;
    }
  },
  beforeDestroy() {
    if (this.audioStream) {
      this.audioStream.getTracks().forEach(track => track.stop());
    }
  }
};
</script>

标签: vue