录音实时上传

前言

最近在工作有一个需求，在浏览器实现视频对话的录音，然后需要将录音上传到服务端；

一、问题

一开始想的是当挂断电话的时候，将录音数据直接发送到后端，但是会有几个问题

1.如果用户直接管理浏览器的话，上传肯定是没办法上传的，sendBeacon有不少限制，比如限制上传大小，

2.如果录音比较大，一次性上传大文件不太好，虽然可以分段上传

虽然每个问题都能处理，但是每一个问题处理起来都挺麻烦的，那有没有比较简单的处理方式呢？有的，兄弟，有的

二、使用websocket

我们可以在录音的时候连接websocket，然后实时将数据发送给后端，让后端将录音文件拼接起来

js 复制代码

let websocket;
const WEBSOCKET_URL = "ws://localhost:8081"; // 替换为你的WebSocket地址
const MAX_RETRY_COUNT = 5;
const RECONNECT_DELAY_BASE = 1000;
let audioBufferQueue = [];
// 编写重连;
let reconnectAttempts = 0;
let index = 0;
// 是否处于重连状态
let isReconnecting = false;
function attemptReconnect() {
  if (reconnectAttempts < MAX_RETRY_COUNT) {
    const delay = RECONNECT_DELAY_BASE * Math.pow(2, reconnectAttempts);
    console.log(`将在${delay}ms后尝试重连...`);

    setTimeout(() => {
      reconnectAttempts++;
      setupWebSocket();
    }, delay);
  } else {
    console.error(`已达到最大重连次数(${MAX_RETRY_COUNT})，停止尝试`);
    ElMessage.error("停止录音");
    audioBufferQueue = [];
    stopRecording();
  }
}
function setupWebSocket() {
  websocket = new WebSocket(WEBSOCKET_URL);

  websocket.onopen = () => {
    reconnectAttempts = 0; // 重置重连计数器
    console.log("WebSocket连接成功");
    isReconnecting = false;
    while (
      audioBufferQueue.length > 0 &&
      websocket.readyState === WebSocket.OPEN
    ) {
      websocket.send(audioBufferQueue.shift());
    }
    // if (mediaRecorder && mediaRecorder.state === "paused") {
    //   mediaRecorder.resume(); // 恢复暂停的录音
    // }
  };

  websocket.onclose = (event) => {
    if (event.wasClean) {
      console.log(`连接正常关闭`);
      isReconnecting = false;
      audioBufferQueue = [];
      index = 0;
    } else {
      console.warn("连接异常断开");
      isReconnecting = true;
      attemptReconnect();
    }
  };

  websocket.onerror = (error) => {
    console.error("WebSocket错误:", error);
  };
}
async function startRecord() {
  try {
    // 1. 检查浏览器支持
    if (!navigator.mediaDevices?.getUserMedia) {
      throw new Error("您的浏览器不支持音频录制功能");
    }

    setupWebSocket();

    // 3. 获取麦克风权限
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        sampleRate: 16000,
        channelCount: 1,
        echoCancellation: true,
      },
    });

    // 4. 选择最佳音频格式
    const format = getSupportedAudioFormat();

    // 5. 初始化录音器
    mediaRecorder = new MediaRecorder(stream, {
      mimeType: format,
      audioBitsPerSecond: 128000,
    });

    // 6. 实时音频数据处理
    mediaRecorder.ondataavailable = async (event) => {
      if (event.data.size > 0 && websocket.readyState === WebSocket.OPEN) {
        // 将Blob转换为ArrayBuffer发送
        const arrayBuffer = await event.data.arrayBuffer();
        if (isReconnecting) {
          // 不发送，将数据保存
          audioBufferQueue.push({ arrayBuffer, timestamp: index++ });
        } else {
          websocket.send({ arrayBuffer, timestamp: index++ });
        }
      }
    };

    // 7. 开始录制，设置较小的timeslice实现低延迟
    mediaRecorder.start(100); // 每100ms触发一次ondataavailable

    console.log("录音开始...");
  } catch (error) {
    console.error("录音启动失败:", error);
    alert(`录音失败: ${error.message}`);
    if (websocket) websocket.close();
  }
}

function stopRecording() {
  if (mediaRecorder) {
    mediaRecorder.stop();
    mediaRecorder.stream.getTracks().forEach((track) => track?.stop?.());
    mediaRecorder = null;
  }

  if (websocket && websocket.readyState === WebSocket.OPEN) {
    // 发送结束标记
    websocket.send(JSON.stringify({ action: "end" }));
    index = 0;
    websocket.close();
  }
}

主要看一下websocket这一块的逻辑

首先，当录音开始之后就开始连接websocket
然后再每次录制的ondataavailable事件，就将数据通过websocket发送给后端
当录音结束之后关闭websocket
注意：如果再录制的过程中websocket断开怎么办呢
那我们可以在传数据的时候给每个数据携带一个索引，后面后端拼接的时候通过索引按顺序拼接，再websocket重新连接的时候，将这段时间的数据放入一个数组中，当重连成功后，循环遍历发送，关闭websocket将index重置
有人可能会想用数字溢出怎么办，Number是2^53 - 1，基本不会溢出，如果实在不放心，可以用BigInt来处理

总结

以上就是录音实时上传的一个实现，如果有更好的方法，欢迎大家提出