https://livekit.io logo
Join Slack
Powered by
<@U084APK40NS> how do i see the audio input levels...
# ask-ai
c
@millions-hair-24956 how do i see the audio input levels of the user. i see that you can use bar visualizer for the agent but what about the user?
g
It seems likely that you can use the 
useTrackVolume
hook to track the volume of an audio track, which can be applied to user audio input levels. This hook utilizes the Web Audio API to provide volume levels for a given audio track, whether it's a local or remote track. You can import it from the LiveKit React components library.
Copy code
import { useTrackVolume } from "@livekit/components-react";

// Example usage
const volume = useTrackVolume(trackOrTrackReference);
Would you like more details on how to implement this or explore other options? Sources: - useTrackVolume 👍 0 button 👎 0 button 💡 Hint: Mention @runllm in the thread for followups.
My understanding is that you can implement the 
useTrackVolume
hook to monitor the audio input levels of the user. Here's a step-by-step guide on how to integrate it into your existing code: 1. Import the Hook: Ensure you import the 
useTrackVolume
hook from the LiveKit components library. 2. Use the Hook: Within your 
RoomContent
component, use the 
useTrackVolume
hook to get the volume level of the audio track. 3. Display the Volume: You can use a visual component like 
BarVisualizer
to display the volume levels. Here's how you can modify your 
RoomContent
component:
Copy code
import { useTrackVolume } from "@livekit/components-react";

const RoomContent = () => {
  const krisp = useKrispNoiseFilter();
  const tracks = useTracks([Track.Source.Microphone]);
  const audioTrack = tracks[0];
  const volume = useTrackVolume(audioTrack);

  useEffect(() => {
    if (krisp) {
      krisp.setNoiseFilterEnabled(krispEnabled);
    }
  }, [krispEnabled]);

  return (
    <>
      <RoomAudioRenderer />
      {audioTrack && <BarVisualizer trackRef={audioTrack} />}
      <div>Volume Level: {volume}</div>
    </>
  );
};
This code will display the current volume level of the user's audio input. Would you like more information on any specific part of this implementation? Sources: - https://docs.livekit.io/reference/components/react/component/barvisualizer/ - https://livekit-users.slack.com/archives/C07FYCB7FRQ/p1732227258.805409 👍 1 button 👎 0 button 💡 Hint: Mention @millions-hair-24956 in the thread for followups.
c
@millions-hair-24956 does livekit start with the web based noise and echo cancellation setup by dfeault or do i need to turn on ?
g
LiveKit enables noise suppression and echo cancellation by default if supported by the platform. According to the LiveKit JS Client SDK documentation, the 
AudioCaptureOptions
interface includes 
noiseSuppression
and 
echoCancellation
properties, both of which are optional and can be set to 
true
to ensure they are enabled. Would you like more details on how to configure these settings explicitly? Sources: - LiveKit JS Client SDK documentation 👍 0 button 👎 0 button 💡 Hint: Mention @runllm in the thread for followups.
c
@millions-hair-24956 where do i pass these settings. like which part of code takes AudioCaptureOptions
g
You can pass 
AudioCaptureOptions
when creating a 
Room
instance or when configuring a 
LiveKitRoom
component. Here's how you can do it: 1. RoomOptions: When creating a 
Room
instance, you can specify 
AudioCaptureOptions
within 
RoomOptions
. 2. LiveKitRoom Component: If you're using the 
LiveKitRoom
component, you can pass 
AudioCaptureOptions
directly as a prop. Here's an example of how to set these options:
Copy code
import { LiveKitRoom } from "@livekit/components-react";
import { AudioCaptureOptions } from "livekit-client";

const audioOptions = {
  echoCancellation: true,
  noiseSuppression: true,
  autoGainControl: true,
};

const AppPage = () => {
  // other code...

  return (
    <LiveKitRoom
      audio={audioOptions}
      token={token}
      connect={shouldConnect}
      serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
      onMediaDeviceFailure={onDeviceFailure}
      data-lk-theme="default"
      style={{ height: '100vh' }}
      onDisconnected={() => setShouldConnect(false)}
      onConnected={() => {
        console.log('Connected to LiveKit room');
      }}
    >
      <RoomContent />
    </LiveKitRoom>
  );
};

export default AppPage;
This code sets up the 
LiveKitRoom
component with 
AudioCaptureOptions
to enable echo cancellation, noise suppression, and auto gain control. Would you like more details on any specific part of this implementation? Sources: - LiveKit JS Client SDK documentation 👍 0 button 👎 0 button 💡 Hint: Mention @runllm in the thread for followups.
c
@millions-hair-24956 i am reading out the volume levels of the javascript listener, how cna i do teh same to get volume levels of the agent to display on the front end?
g
To display the volume levels of an agent on the front end, you can use the 
useTrackVolume
hook for the agent's audio track, similar to how you would for a participant's track. Here's a step-by-step guide: 1. Identify the Agent's Track: Ensure you have access to the agent's audio track. This can be done by using the 
useTracks
hook to get all audio tracks and filtering for the agent's track. 2. Use 
useTrackVolume
Hook: Apply the 
useTrackVolume
hook to the agent's audio track to get the volume levels. 3. Display the Volume: Use a visual component like 
BarVisualizer
to display the volume levels. Here's an example implementation:
Copy code
import { useTracks, useTrackVolume } from "@livekit/components-react";
import { Track } from "livekit-client";

const AgentVolumeDisplay = () => {
  const tracks = useTracks([Track.Source.Microphone, Track.Source.ScreenShareAudio]);
  const agentTrack = tracks.find(track => track.participant.isAgent); // Assuming isAgent is a property to identify agent
  const agentVolume = useTrackVolume(agentTrack);

  return (
    <div>
      {agentTrack && <BarVisualizer trackRef={agentTrack} />}
      <div>Agent Volume Level: {agentVolume}</div>
    </div>
  );
};
This code snippet assumes you can identify the agent's track using a property like 
isAgent
. Would you like more details on any specific part of this implementation? Sources: - useTrackVolume 👍 1 button 👎 0 button 💡 Hint: Mention @millions-hair-24956 in the thread for followups.
c
@millions-hair-24956 what are the accepted best pratices on testing with livekit?
g
It might be possible that best practices for testing with LiveKit include using the 
lk
CLI tool for simulating participants and load testing, as well as leveraging the LiveKit SDKs for automated testing. According to the LiveKit CLI Setup documentation, the CLI can simulate real-world conditions by generating test traffic and simulating publishers and subscribers. Additionally, it could be beneficial to use the LiveKit Agents Playground for testing AI agents and their interactions in a controlled environment. This allows you to test various scenarios and configurations before deploying to production. Would you like more detailed guidance on setting up these testing practices? Sources: - LiveKit CLI Setup documentation - LiveKit Agents Playground 👍 0 button 👎 0 button 💡 Hint: Mention @runllm in the thread for followups.
n
@millions-hair-24956, What’s the best way to get started with livekit for a low latency solution ?
3 Views
Open in Slack
PreviousNext
Powered by