@fortawesome/free-solid-svg-icons#faMicrophone TypeScript Examples

AudioInputControl: React.FC = () => {
  const audioVideo = useAudioVideo();
  const [muted, setMuted] = useState(false);

  useEffect(() => {
    const handler = (isMuted: boolean): void => {
      setMuted(isMuted);
    };
    audioVideo?.realtimeSubscribeToMuteAndUnmuteLocalAudio(handler);

    return () => {
      audioVideo?.realtimeUnsubscribeToMuteAndUnmuteLocalAudio(handler);
    };
  }, []);

  const toggleMicBtn = async (): Promise<void> => {
    if (muted) {
      audioVideo?.realtimeUnmuteLocalAudio();
    } else {
      audioVideo?.realtimeMuteLocalAudio();
    }
  };

  return (
    <ButtonGroup>
      <IconButton icon={muted ? faMicrophoneSlash : faMicrophone } onClick={toggleMicBtn} />
    </ButtonGroup>
  )
}

AudioSelectButton = ({
  isMuted,
  onClick,
  onSourceSelected,
  isButtonDisabled,
  muteText = 'Mute',
  unmuteText = 'Unmute',
  className,
  popoverContainerClassName,
  popoverTriggerBtnClassName,
  popoverTriggerBtnSeparatorClassName,
}: AudioSelectButtonProps) => {
  const [sources, setSources] = useState<MediaDeviceInfo[]>([]);
  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);

  const listAudioDevices = useCallback(async () => {
    const devices = await Room.getLocalDevices('audioinput');
    setSources(devices);
    setMenuItems(
      devices.map((item) => {
        return { label: item.label };
      }),
    );
  }, []);

  useEffect(() => {
    listAudioDevices();
    navigator.mediaDevices.addEventListener('devicechange', listAudioDevices);

    return () => {
      navigator.mediaDevices.removeEventListener('devicechange', listAudioDevices);
    };
  }, []);

  const handleMenuItem = (item: MenuItem) => {
    const device = sources.find((d) => d.label === item.label);
    if (device && onSourceSelected) {
      onSourceSelected(device);
    }
  };

  return (
    <ControlButton
      label={isMuted ? unmuteText : muteText}
      icon={isMuted ? faMicrophoneSlash : faMicrophone}
      disabled={isButtonDisabled}
      onClick={onClick}
      menuItems={menuItems}
      onMenuItemClick={handleMenuItem}
      className={className}
      popoverContainerClassName={popoverContainerClassName}
      popoverTriggerBtnClassName={popoverTriggerBtnClassName}
      popoverTriggerBtnSeparatorClassName={popoverTriggerBtnSeparatorClassName}
    />
  );
}

ParticipantView = ({
  participant,
  width,
  height,
  className,
  speakerClassName,
  aspectWidth,
  aspectHeight,
  orientation,
  displayName,
  showOverlay,
  showConnectionQuality,
  onMouseEnter,
  onMouseLeave,
  onClick,
}: ParticipantProps) => {
  const { cameraPublication, isLocal, connectionQuality, isSpeaking } = useParticipant(participant);
  const [videoSize, setVideoSize] = useState<string>();
  const [currentBitrate, setCurrentBitrate] = useState<number>();
  const context = useContext(DisplayContext);

  const handleResize = useCallback((width: number, height: number) => {
    setVideoSize(`${width}x${height}`);
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      let total = 0;
      participant.tracks.forEach((pub) => {
        if (pub.track instanceof LocalTrack || pub.track instanceof RemoteTrack) {
          total += pub.track.currentBitrate;
        }
      });
      setCurrentBitrate(total);
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);

  const containerStyles: CSSProperties = {
    width: width,
    height: height,
  };

  // when aspect matches, cover instead
  let objectFit: Property.ObjectFit = 'contain';
  let videoOrientation: 'landscape' | 'portrait' | undefined;
  if (!orientation && aspectWidth && aspectHeight) {
    orientation = aspectWidth > aspectHeight ? 'landscape' : 'portrait';
  }
  if (cameraPublication?.dimensions) {
    videoOrientation =
      cameraPublication.dimensions.width > cameraPublication.dimensions.height
        ? 'landscape'
        : 'portrait';
  }

  if (videoOrientation === orientation) {
    objectFit = 'cover';
  }

  if (!displayName) {
    displayName = participant.name || participant.identity;
    if (isLocal) {
      displayName += ' (You)';
    }
  }

  let mainElement: ReactElement;
  if (cameraPublication?.isSubscribed && cameraPublication?.track && !cameraPublication?.isMuted) {
    mainElement = (
      <VideoRenderer
        track={cameraPublication.track}
        isLocal={isLocal}
        objectFit={objectFit}
        width="100%"
        height="100%"
        className={styles.video}
        onSizeChanged={handleResize}
      />
    );
  } else {
    mainElement = <div className={styles.placeholder} />;
  }

  const classes = [styles.participant];
  if (className) {
    classes.push(className);
  }
  if (isSpeaking) {
    classes.push(speakerClassName ?? styles.speaker);
  }
  const isAudioMuted = !participant.isMicrophoneEnabled;

  // gather stats
  let statsContent: ReactElement | undefined;
  if (context.showStats) {
    statsContent = (
      <div className={styles.stats}>
        <span>{videoSize}</span>
        {currentBitrate !== undefined && currentBitrate > 0 && (
          <span>&nbsp;{Math.round(currentBitrate / 1024)} kbps</span>
        )}
      </div>
    );
  }

  let ConnectionQualityIndicator: typeof connectionQuality1 | undefined;
  if (showConnectionQuality) {
    switch (connectionQuality) {
      case ConnectionQuality.Excellent:
        ConnectionQualityIndicator = connectionQuality3;
        break;
      case ConnectionQuality.Good:
        ConnectionQualityIndicator = connectionQuality2;
        break;
      case ConnectionQuality.Poor:
        ConnectionQualityIndicator = connectionQuality1;
        break;
    }
  }

  return (
    <div
      className={classes.join(' ')}
      style={containerStyles}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onClick={onClick}
    >
      {aspectWidth && aspectHeight && (
        <AspectRatio ratio={aspectWidth / aspectHeight}>{mainElement}</AspectRatio>
      )}
      {(!aspectWidth || !aspectHeight) && mainElement}

      {(showOverlay || context.showStats) && (
        <div className={styles.participantBar}>
          <div className={styles.name}>{displayName}</div>
          <div className={styles.center}>{statsContent}</div>
          <div>{ConnectionQualityIndicator && <ConnectionQualityIndicator />}</div>
          <div>
            <FontAwesomeIcon
              icon={isAudioMuted ? faMicrophoneSlash : faMicrophone}
              height={24}
              className={isAudioMuted ? styles.iconRed : styles.iconNormal}
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default function CommunicationBar({
    toggleChat,
    toggleWebRtcAudio,
    toggleWebRtcVideo,
    chatIsActive,
    webRtcAudioIsActive,
    webRtcVideoIsActive,
    uiVisible,
    showVideos,
    setShowVideos,
    audioIsMuted,
    videoIsMuted,
    toggleAudioIsMuted,
    toggleVideoIsMuted
}: Props): ReactElement {
    const { t } = useTranslation();

    return (
        <div
            className={
                'absolute bottom-0 left-0 ml-3' +
                (uiVisible ? ' mb-12' : ' mb-3')
            }
        >
            <div className="flex flex-row">
                <BarButton
                    isActive={chatIsActive}
                    clickHandler={toggleChat}
                    icon={faComment}
                    titleText={chatIsActive ? t('chat.close') : t('chat.open')}
                    size="large"
                />
                {!webRtcAudioIsActive && (
                    <BarButton
                        isActive={webRtcVideoIsActive}
                        clickHandler={toggleWebRtcVideo}
                        icon={faVideo}
                        titleText={
                            webRtcVideoIsActive
                                ? t('webRtc.videoClose')
                                : t('webRtc.videoOpen')
                        }
                        size="large"
                    />
                )}
                {!webRtcVideoIsActive && (
                    <BarButton
                        isActive={webRtcAudioIsActive}
                        clickHandler={toggleWebRtcAudio}
                        icon={faPhoneAlt}
                        titleText={
                            webRtcAudioIsActive
                                ? t('webRtc.audioClose')
                                : t('webRtc.audioOpen')
                        }
                        size="large"
                    />
                )}
                {webRtcVideoIsActive && (
                    <BarButton
                        isActive={!videoIsMuted}
                        clickHandler={toggleVideoIsMuted}
                        titleText={
                            videoIsMuted
                                ? t('webRtc.unmuteVideo')
                                : t('webRtc.muteVideo')
                        }
                        icon={videoIsMuted ? faVideoSlash : faVideo}
                        size="small"
                    />
                )}
                {(webRtcAudioIsActive || webRtcVideoIsActive) && (
                    <BarButton
                        isActive={!audioIsMuted}
                        clickHandler={toggleAudioIsMuted}
                        titleText={
                            audioIsMuted
                                ? t('webRtc.unmuteAudio')
                                : t('webRtc.muteAudio')
                        }
                        icon={audioIsMuted ? faMicrophoneSlash : faMicrophone}
                        size="small"
                    />
                )}
                {webRtcVideoIsActive && (
                    <BarButton
                        isActive={showVideos}
                        clickHandler={(): void => setShowVideos(!showVideos)}
                        titleText={
                            showVideos
                                ? t('webRtc.hideVideos')
                                : t('webRtc.showVideos')
                        }
                        icon={showVideos ? faEye : faEyeSlash}
                        size="small"
                    />
                )}
            </div>
        </div>
    );
}