# Mute and disable video action

**URL:** <https://react-native-webrtc.discourse.group/t/mute-and-disable-video-action/1288>\
**Category:** Help\
**Created:** [June 30, 2021, 1:21am UTC](https://react-native-webrtc.discourse.group/t/mute-and-disable-video-action/1288 "2021-06-30T01:21:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stringsaeed](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/stringsaeed/32/472_2.png) [@Stringsaeed](https://react-native-webrtc.discourse.group/u/Stringsaeed)\
**Post date:** [June 30, 2021, 1:21am UTC](https://react-native-webrtc.discourse.group/t/mute-and-disable-video-action/1288/1 "2021-06-30T01:21:20Z")

</div>

I’m trying to add action to webrtc like mute and disable action

- _this action to toggle camera_

```auto
const toggleCamera = useCallback(async () => {
    if (!isVideoEnabled) {
      const videoSource = (await mediaDevices.enumerateDevices()).find(
        info => info.kind === 'videoinput' && info.facing === 'front',
      );
      if (videoSource) {
        const videoStream = await mediaDevices.getUserMedia({
          audio: false,
          video: {
            mandatory: {
              minWidth: 500,
              minHeight: 300,
              minFrameRate: 30,
            },
            facingMode: 'user',
            optional: videoSource?.id ? [{sourceId: videoSource.id}] : [],
          },
        });
        const videoTracks = videoStream.getVideoTracks();
        localStream.addTrack(videoTracks[0]);
      }
    } else if (!isMuted) {
      const tracks = localStream.getTracks();
      if (tracks.length > 0) {
        tracks.forEach(element => {
          if (element.kind === 'video') {
            element.enabled = !isVideoEnabled;
            IncallManager.setMicrophoneMute(!isMuted);
            setIsVideoEnabled(_isEnabled => !_isEnabled);
          }
        });
      }
    }
  }, [isMuted, isVideoEnabled, localStream]);

```

- _this action for mute audio_

```auto
const onMute = useCallback(async () => {
    if (isMuted) {
      const audioStream = await mediaDevices.getUserMedia({
        audio: true,
        video: false,
      });
      const audioTracks = await audioStream.getAudioTracks();
      localStream.addTrack(audioTracks[0]);
    } else if (isVideoEnabled) {
      const tracks = localStream.getTracks();
      if (tracks.length > 0) {
        tracks.forEach(element => {
          if (element.kind === 'audio') {
            element.enabled = !isMuted;
            IncallManager.setMicrophoneMute(!isMuted);
            setIsMuted(_isMuted => !_isMuted);
          }
        });
      }
    }
  }, [isMuted, isVideoEnabled, localStream]);

```

is that okay or I’m doing something wrong?

---

<div class="post-metadata">

**Author:** ![jbaudanza](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/jbaudanza/32/387_2.png) [@jbaudanza](https://react-native-webrtc.discourse.group/u/jbaudanza)\
**Post date:** [July 2, 2021, 6:08pm UTC](https://react-native-webrtc.discourse.group/t/mute-and-disable-video-action/1288/2 "2021-07-02T18:08:57Z")

</div>

Put the `getUserMedia` call into its own hook that doesn’t depend on `isMuted`. This hook should store the resulting MediaStreamTrack into state somewhere.

Then, have another hook that looks like:

```auto
  useEffect(() => {
    if (track != null) {
      track.enabled = !isMuted;
    }
  }, [track, isMuted]);

```

I wouldn’t bother with `IncallManager.setMicrophoneMute`

---

<div class="post-metadata">

**Author:** ![rahuld600](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/rahuld600/32/688_2.png) [@rahuld600](https://react-native-webrtc.discourse.group/u/rahuld600)\
**Post date:** [January 16, 2023, 2:41pm UTC](https://react-native-webrtc.discourse.group/t/mute-and-disable-video-action/1288/3 "2023-01-16T14:41:20Z")

</div>

I think you’ve got a typo only, the InCallManager is spelled wrong…