I am trying to use the react-webcam from npm here in order to be able to record video with audio. I want the audio to be muted whilst recording but be included when saving a recording.

The webcam is set as follows:

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>
  );
};

And this is used on a button click to Record and Stop the video recording:

  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]);

I have set the Webcam property audio to true and audio seems to feedback through the speakers from the mic. I have taken a look at the audioConstraints but have found very little luck here. I have found three properties for these audioConstraints whilst digging through the react-webcam.d.ts file however no bination of these properties seem to make any difference.

I am trying to use the react-webcam from npm here in order to be able to record video with audio. I want the audio to be muted whilst recording but be included when saving a recording.

The webcam is set as follows:

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>
  );
};

And this is used on a button click to Record and Stop the video recording:

  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]);

I have set the Webcam property audio to true and audio seems to feedback through the speakers from the mic. I have taken a look at the audioConstraints but have found very little luck here. I have found three properties for these audioConstraints whilst digging through the react-webcam.d.ts file however no bination of these properties seem to make any difference.

• javascript
• reactjs
• webcam

1 Answer 1

So this was quite simple in the end. This Webcam ponent ultimately renders a video html element and therefore accepts its properties. Therefore adding the video element property muted={true} to the webcam ponent along with the audio={true} resulted in Audio being recorded but no play-back as I am recording. Exactly what I was after. Hope this helps someone else!