WebRTC / getUserMedia : How to properly mute local video?

When using WebRTC and getUserMedia for video communication, it is sometimes necessary to mute the audio component of the local video stream. This is primarily due to scenarios where users do not wish to transmit audio data to the recipient. For example, in a monitoring application, only video is required, with no audio.

Step 1: Obtain the Media Stream

First, utilize the getUserMedia API to acquire the media stream. This API grants access to the user's camera and microphone.

javascript
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // Use this stream here
  })
  .catch(function(error) {
    console.error('Failed to get media stream', error);
  });

Step 2: Mute the Audio Track

After obtaining a stream containing both audio and video, you can mute it by directly manipulating the audio tracks within the stream. Each track has an enabled property; setting it to false mutes the track.

javascript
function muteAudio(stream) {
  const audioTracks = stream.getAudioTracks();
  audioTracks.forEach(track => {
    track.enabled = false;
  });
}

This function accepts a stream as a parameter, retrieves the audio tracks of the stream, and sets the enabled property of each audio track to false. This mutes the audio while keeping video transmission intact.

Step 3: Use the Muted Stream

Once the audio is muted, you can continue using this stream for communication or other operations, such as setting it as the source for a video element or sending it to a remote peer.

javascript
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    muteAudio(stream); // Mute audio
    const videoElement = document.querySelector('video');
    videoElement.srcObject = stream;
  })
  .catch(function(error) {
    console.error('Failed to get media stream', error);
  });

Example Application: Video Conferencing

Suppose in a video conferencing application, users wish to mute their audio during the meeting to prevent background noise interference. In this case, the above method is highly suitable. Users can mute or unmute at any time without impacting video transmission.

The advantage is that it is straightforward to implement and does not affect other parts of the stream. The disadvantage is that to re-enable audio, you must reset the enabled property to true.

In summary, by manipulating the enabled property of the audio tracks within the media stream, we can conveniently mute the audio component of the local video stream, which is highly beneficial for developing flexible real-time communication applications.