React-Webcam (npm package)录制音频但静音播放

Question

我正在尝试使用npm的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，但在这里发现了很少的运气。我为这些audioConstraints找到了三个属性同时挖掘react-webcam.d.ts文件，然而，这些属性的组合似乎没有任何区别。

Answer 1

最后这是相当简单的。这个Webcam组件最终呈现一个videohtml元素，因此接受它的属性。因此，将视频元素属性muted={true}添加到网络摄像头组件以及audio={true}导致音频被记录，但在我录制时没有播放。这正是我想要的。希望这对其他人有所帮助!