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

Question

我正在尝试使用 npm here 的 react-webcam 以便能够录制带音频的视频。我希望在录音时将音频静音，但在保存录音时将其包括在内。

网络摄像头设置如下：

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

所以最后这很简单。该网络摄像头组件最终呈现 video html 元素，因此接受其属性。因此，将视频元素属性 muted={true} 与 audio={true} 一起添加到网络摄像头组件会导致录制音频，但不会录制 play-back。正是我所追求的。希望这对其他人有帮助！

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

React-Webcam (npm package) Recording Audio but Mute playback

javascript

webcam

reactjs