通过navigator.mediaDevices.getUserMedia录音传给服务器

通过navigator.mediaDevices.getUserMedia录音并将其传给服务器，可以使用以下步骤：

1. 使用 MediaStream API 和 getUserMedia() 方法来访问麦克风并捕获媒体流。这可以使用以下代码完成：

const constraints = { audio: true };
const stream = await navigator.mediaDevices.getUserMedia(constraints);

2. 创建一个 MediaRecorder 对象，将数据存储在一个数组中：

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

mediaRecorder.addEventListener('dataavailable', event => {
  chunks.push(event.data);
});

3. 在需要停止录音时，停止 MediaRecorder 并将数据转换为 Blob 对象：

mediaRecorder.stop();

mediaRecorder.addEventListener('stop', () => {
  const audioBlob = new Blob(chunks, { type: 'audio/wav' });
  chunks = [];
  // 将 Blob 对象上传到服务器
});

4. 将 Blob 对象上传到服务器。这可以使用 XMLHttpRequest 或 fetch() 方法完成。以下是使用 fetch() 方法的示例：

const formData = new FormData();
formData.append('audio', audioBlob, 'audio.wav');

fetch('/upload', {
  method: 'POST',
  body: formData
}).then(response => {
  console.log('录音上传成功！');
}).catch(error => {
  console.error('录音上传失败：', error);
});

在这个示例中，我们创建了一个 FormData 对象，将 Blob 对象添加为表单数据，并将其作为 POST 请求的 body 发送到服务器。你可以根据需要自行更改 FormData 和请求参数。

总结起来，通过以下步骤你可以使用 navigator.mediaDevices.getUserMedia 录制音频并将其上传到服务器：

1. 使用 getUserMedia() 方法访问麦克风并捕获媒体流。
2. 创建 MediaRecorder 对象并将数据存储在一个数组中。
3. 停止 MediaRecorder 并将数据转换为 Blob 对象。
4. 将 Blob 对象上传到服务器。