React-Webcam（npm包）录制音频但静音播放

Question

我正在尝试使用npm的反应网络摄像头，以便能够录制带有音频的视频。我希望在录制时将音频静音，但在保存录音时将其包含在内。

网络摄像头设置如下：

const videoConstraints = {
  width: 640,
  height: 480,
  facingMode: "user",
};

const audioConstraints = {
  suppressLocalAudioPlayback: true,
  noiseSuppression: true,
  echoCancellation: true,
};

const ReactWebcam = () => {
  return (
    <div className="webcam" style={{ width: 640 }}>
      <Webcam
        audio={true}
        height={100 + "%"}
        width={100 + "%"}
        screenshotFormat="image/jpeg"
        videoConstraints={videoConstraints}
        audioConstraints={audioConstraints}
      />
    </div>
  );
};

这用于单击按钮来录制和停止视频录制：

  const handleStartCaptureClick = React.useCallback(() => {
    setCapturing(true);
    mediaRecorderRef.current = new MediaRecorder(webcamElement.current.stream, {
      mimeType: "video/webm",
    });
    mediaRecorderRef.current.addEventListener(
      "dataavailable",
      handleDataAvailable
    );
    mediaRecorderRef.current.start();
  }, [webcamElement, setCapturing, mediaRecorderRef, handleDataAvailable]);

  const handleStopCaptureClick = React.useCallback(() => {
    mediaRecorderRef.current.stop();
    setCapturing(false);
  }, [mediaRecorderRef, setCapturing]);

我已将网络摄像头属性设置audio为true，并且音频似乎通过麦克风从扬声器反馈。我已经看过了，audioConstraints但在这里发现运气很少。我在深入研究react-webcam.d.ts文件时发现了这些audioConstraints的三个属性，但是这些属性的组合似乎没有任何区别。

Answer 1

所以这最终非常简单。该网络摄像头组件最终呈现一个videohtml 元素，因此接受其属性。因此，将视频元素属性添加muted={true}到网络摄像头组件中，并audio={true}导致音频被录制，但在录制时无法播放。这正是我所追求的。希望这对其他人有帮助！