vue MediaRecorder 通过websocket实现录音每5秒提发送后台,后台java_websocket怎么接收保存

在 Vue 中使用 MediaRecorder 实现录音并通过 WebSocket 每5秒发送到后台，你需要做以下几步：

1. **前端录音**: 创建一个 MediaRecorder 实例，监听 `.dataavailable` 事件，每当有新的录音片段可用就转换成 Blob 对象，并计算好时间间隔（比如5秒）后，打包成 JSON 数据，通过 WebSocket 发送给服务器。

const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.addEventListener('dataavailable', (event) => {
  const dataBlob = event.data;
  if (dataSentAt === undefined) {
    dataSentAt = Date.now();
  }
  const timeElapsed = Date.now() - dataSentAt;

  // 如果时间超过5秒，发送数据
  if (timeElapsed > 5000) {
    sendDataToServer(dataBlob);
    dataSentAt = undefined; // 重置计时
  }
});

// 函数将blob发送到WebSocket服务器
function sendDataToServer(blob) {
  const audioData = new Blob([blob], { type: 'audio/webm' });
  socket.send(JSON.stringify({ timestamp: Date.now(), blob: URL.createObjectURL(audioData) }));
}

2. **后端接收**（Java WebSocket）: 在服务器端，你需要设置一个 WebSocket 服务监听客户端的消息。当收到包含 Blob 数据的消息时，解码 blob 并保存到数据库或文件系统。

@OnMessage
public void handleAudioData(String message) {
    try {
        Map<String, Object> dataMap = Json.parseObject(message).toMap();
        long timestamp = (Long) dataMap.get("timestamp");
        byte[] audioBytes = Base64.decode((String) dataMap.get("blob"), Base64.DEFAULT);
        
        // 保存到数据库或文件
        saveAudioToDatabase(timestamp, audioBytes);
    } catch (IOException e) {
        log.error("Error processing audio data", e);
    }
}

private void saveAudioToDatabase(long timestamp, byte[] audioBytes) {
    // 省略具体的数据库操作，例如：
    // YourAudioRepository.save(new AudioRecord(timestamp, audioBytes));
}

注意：处理大块二进制数据时，记得管理好内存和URL.createObjectURL的有效期。