Livekit React Core
Install
npm install --save @livekit/react-core livekit-clientUsing hooks
The provided components make use of two hooks: useRoom and useParticipant, they will help you manage internal LiveKit callbacks and map them into state variables that are ready-to-use from React components.
Using the connect function returned by useRoom will ensure that callbacks are registered automatically and the other state variables are updated when changes take place in the room.
import { useRoom, useParticipant } from '@livekit/react-core'
export const MyComponent = () => {
const roomOptions: RoomOptions = {
adaptiveStream: true,
dynacast: true,
}
const { connect, isConnecting, room, error, participants, audioTracks } = useRoom(roomOptions);
async function init() {
// initiate connection to the livekit room
await connect(livekitUrl, livekitToken);
// request camera and microphone permissions and publish tracks
await room.localParticipant.enableCameraAndMicrophone();
...
}
useEffect(() => {
init().catch(console.error)
}, [])
return (...)
}
export const ParticipantRenderer = ({ participant }) => {
const { isSpeaking, subscribedTracks } = useParticipant(participant)
...
}Rendering video and audio
When building your custom UI, it's helpful to use track renderers that are provided in this library. AudioRenderer and VideoRenderer would render an audio and video track, respectively.