搭建网站基本步骤自建电梯费用
前言
最近在工作有一个需求，在浏览器实现视频对话的录音，然后需要将录音上传到服务端；
一、问题
一开始想的是当挂断电话的时候，将录音数据直接发送到后端，但是会有几个问题
1.如果用户直接管理浏览器的话，上传肯定是没办法上传的，sendBeacon有不少限制，比 如限制上传大小，
2.如果录音比较大，一次性上传大文件不太好，虽然可以分段上传
虽然每个问题都能处理，但是每一个问题处理起来都挺麻烦的，那有没有比较简单的处理方式呢？有的，兄弟，有的
二、使用websocket
我们可以在录音的时候连接websocket，然后实时将数据发送给后端，让后端将录音文件拼接起来
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触发一次ondataavailableconsole.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来处理
总结
以上就是录音实时上传的一个实现，如果有更好的方法，欢迎大家提出