https://livekit.io logo
Join Slack
Powered by
What is the equivalent of RoomAudioRenderer for Re...
# ask-ai
a
What is the equivalent of RoomAudioRenderer for React Native? How can I mute/unmute agent track?
t
Thanks for reaching out, bogdanmelnikbo. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
Could you help me understand a bit better what you mean by "agent track"? Are you talking about a specific participant’s audio or video track in a LiveKit room, or something different? Also, are you hoping for a way to mute/unmute the track through code, or are you thinking of a UI-based option? Just want to make sure I’m on the right page to help you out!
Hey there! So, there isn’t a direct equivalent of 
RoomAudioRenderer
for React Native in LiveKit, but no worries—you can still get the same effect by using the 
useTracks
hook along with the 
AudioTrack
component to render audio tracks in your React Native app. Here’s a little example to get you started:
Copy code
const App = () => {
  useEffect(() => {
    const start = async () => {
      await AudioSession.startAudioSession();
    };
    start();
    return () => {
      AudioSession.stopAudioSession();
    };
  }, []);

  return (
    <livekitroom serverurl="{wsURL}" token="{token}" connect="{true}">
      <roomview/>
    </livekitroom>
  );
};

const RoomView = () => {
  const tracks = useTracks([Track.Source.Microphone, Track.Source.ScreenShareAudio])
    .filter(trackRef => !trackRef.participant.isLocal && trackRef.publication.kind === Track.Kind.Audio);

  return (
    <div style={{ display: 'none' }}>
      {tracks.map(trackRef => (
        <audiotrack key="{getTrackReferenceId(trackRef)}" trackref="{trackRef}"/>
      ))}
    </div>
  );
};
This way gives you a bit more control over how audio tracks get rendered compared to the 
RoomAudioRenderer
component in React, though it does mean a bit more setup on your end. Also, about muting/unmuting agent tracks—could you help me understand what you mean by "agent track"? Are you talking about a specific participant’s audio or video track in a LiveKit room, or something else? And are you looking for a programmatic way to mute/unmute, or something more like a UI control? I’m here to help however you need!
a
im talking about agent microphone track. i want it as UI control
t
Hey there! If you want to create a UI control to mute or unmute a participant’s microphone track in LiveKit React Native, here’s a friendly way to do it: 1. Use the 
TrackToggle
Component: This handy component comes with a built-in toggle button for muting and unmuting. Just set the 
source
prop to 
Track.Source.Microphone
.
Copy code
<TrackToggle source="{Track.Source.Microphone}" className="your-custom-class" showIcon="false">
  {/* Feel free to add your own mute/unmute icons */}
  {isMuted ? (
    <MicrophoneOffSVG className="w-4 h-4" />
  ) : (
    <MicrophoneOnSVG className="w-4 h-4" />
  )}
</TrackToggle>
1. Manage State: Use 
useLocalParticipant
to keep track of whether the microphone is muted and update the UI to match.
Copy code
const localParticipant = useLocalParticipant();
const [isMuted, setIsMuted] = useState(localParticipant.isMicrophoneEnabled);

useEffect(() => {
  setIsMuted(localParticipant.isMicrophoneEnabled === false);
}, [localParticipant.isMicrophoneEnabled]);
1. Put It All Together: Build a reusable component for your microphone control that’s easy to drop into your app.
Copy code
import { TrackToggle, useLocalParticipant } from '@livekit/components-react';
import { Track } from 'livekit-client';
import { useState, useEffect } from 'react';
import { MicrophoneOnSVG, MicrophoneOffSVG } from './path/to/icons';

export function MicrophoneControl() {
  const localParticipant = useLocalParticipant();
  const [isMuted, setIsMuted] = useState(localParticipant.isMicrophoneEnabled);

  useEffect(() => {
    setIsMuted(localParticipant.isMicrophoneEnabled === false);
  }, [localParticipant.isMicrophoneEnabled]);

  return (
    <TrackToggle source="{Track.Source.Microphone}" className="flex items-center justify-center gap-2 h-full" showIcon="false">
      {isMuted ? (
        <MicrophoneOffSVG className="w-4 h-4" />
      ) : (
        <MicrophoneOnSVG className="w-4 h-4" />
      )}
    </TrackToggle>
  );
}
And that’s it! This way, you get a nice, clean, and reusable microphone mute control for your LiveKit app. If you have any questions or want to tweak it further, just let me know—I’m here to help!
Open in Slack
PreviousNext
Powered by