React音视频录制音频回听及音质劣化问题的解决方法咨询

问题根源 #

音频回听（听到自身说话回放）是因为<video>元素直接播放了包含麦克风音频的媒体流，实时回听产生的回声、干扰会导致录制音频音质沉闷。

解决方案 #

1. 快速消除回听：给视频元素添加静音属性

直接在<video>标签中加入muted属性，阻止视频播放音频轨道，即可立刻解决回听问题：

<video
  ref={videoRef}
  autoPlay
  muted  {/* 添加静音属性 */}
  style={{ transform: "scaleX(-1)" }}
  className="userVideo"
>
  {/* ... 原有内容 ... */}
</video>

2. 彻底分离音视频：仅用视频轨道渲染画面

从获取的媒体流中提取视频轨道，创建仅包含视频的流并赋值给<video>，避免音频流进入播放环节：
修改startRecording函数中的流赋值逻辑：

const startRecording = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: {  // 配置音频优化参数，改善音质
      echoCancellation: true,
      noiseSuppression: true,
      autoGainControl: true
    },
  });
  setMediaStream(stream);

  // 提取视频轨道，创建仅视频的流
  const videoOnlyStream = new MediaStream(stream.getVideoTracks());
  videoRef.current.srcObject = videoOnlyStream;

  // ... 其他录制逻辑保持不变 ...
};

3. 优化音频录制参数

在getUserMedia的音频配置中开启专业优化项，进一步解决音质沉闷问题：

• echoCancellation: 启用回声消除，避免播放声音被麦克风重新录入
• noiseSuppression: 抑制背景噪音
• autoGainControl: 自动调整麦克风音量，保持稳定录制音量

修改后的完整代码示例 #

import { useRef, useState, useEffect } from 'react';

const VideoRecorder = () => {
  const videoRef = useRef(null);
  const [recording, setRecording] = useState(false);
  const [mediaStream, setMediaStream] = useState(null);
  const [mediaRecorder, setMediaRecorder] = useState(null);
  const [videoChunks, setVideoChunks] = useState([]);

  const startRecording = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      },
    });
    setMediaStream(stream);

    // 使用仅视频流渲染画面，消除音频回听
    const videoOnlyStream = new MediaStream(stream.getVideoTracks());
    videoRef.current.srcObject = videoOnlyStream;

    const recorder = new MediaRecorder(stream);
    setMediaRecorder(recorder);

    recorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        setVideoChunks((prevChunks) => [...prevChunks, event.data]);
      }
    };

    recorder.start();
    setRecording(true);
  };

  const stopRecording = () => {
    mediaRecorder.stop();
    mediaStream.getTracks().forEach((track) => track.stop());
    setRecording(false);
  };

  const downloadVideo = () => {
    const blob = new Blob(videoChunks, { type: "video/webm" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "recorded-video.webm";
    a.click();
  };

  useEffect(() => {
    startRecording();
  }, []);

  return (
    <div>
      <video
        ref={videoRef}
        autoPlay
        style={{ transform: "scaleX(-1)" }}
        className="userVideo"
      />
      <button onClick={stopRecording} disabled={!recording}>停止录制</button>
      <button onClick={downloadVideo} disabled={recording}>下载视频</button>
    </div>
  );
};

export default VideoRecorder;

内容的提问来源于stack exchange，提问作者Mayur Wagh