Skip to main content

Toggling devices

The Fishjam SDK provides functions for dynamically controlling media device streams. This includes turning the cameras and microphones on and off, as well as muting and unmuting microphones.

Turning Camera On and Off - toggleCamera()​

This function controls the physical operational state of the camera.

  • Turning the camera off: This action stops the camera device, disables the media stream, and pauses streaming. The webcam indicator light will shut down.
  • Turning the camera on: This action starts the camera and resumes streaming, allowing other participants to see video after a brief initialization period.

Usage Example​

import { useCamera } from "@fishjam-cloud/react-client";

export function CameraControl() {
  const { toggleCamera } = useCamera();

  return <button onClick={() => toggleCamera()}>Toggle Camera Power</button>;
}

Turning Microphone On and Off - toggleMicrophone()​

This function toggles the microphone's physical operational state. The function interacts with a physical device, so it might take a noticeable amount of time.

  • Turning the microphone off: Turns the microphone off, disables the media stream, and pauses any audio transmission.
  • Turning the microphone on: Turns the microphone on and resumes audio streaming.

Muting and Unmuting Microphone - toggleMicrophoneMute()​

This function manages the audio stream's operational status without affecting the microphone's hardware state. Muting and unmuting is faster, but a muted device still uses resources. This is useful, as it is common to mute and unmute during a meeting. Unmuting needs to be quick to capture the first word of a sentence.

  • Muting the microphone: This action disables the media stream and stops audio transmission while keeping the microphone active.
  • Unmuting the microphone: This action enables the media stream, allowing immediate transmission of sounds.

Usage Example​

import { useMicrophone } from "@fishjam-cloud/react-client";

export function MicrophoneControl() {
  const { toggleMicrophone, toggleMicrophoneMute } = useMicrophone();

  return (
    <div>
      <button onClick={() => toggleMicrophone()}>
        Toggle Microphone Power
      </button>
      <button onClick={() => toggleMicrophoneMute()}>
        Toggle Microphone Mute
      </button>
    </div>
  );
}