livekit-client
is the official client SDK for LiveKit. With it, you can add real time video and audio to your web apps.
Docs and guides at https://docs.livekit.io
yarn add livekit-client
npm install livekit-client --save
Examples below are in TypeScript, if using JS/CommonJS imports replace import with:
const LiveKit = require('livekit-client');
LiveKit.connect(...);
import {
connect,
RoomEvent,
RemoteParticipant,
RemoteTrackPublication,
RemoteTrack,
Participant,
} from 'livekit-client';
connect('ws://localhost:7800', token, {
audio: true,
video: true,
}).then((room) => {
console.log('connected to room', room.name);
console.log('participants in room:', room.participants.size);
room
.on(RoomEvent.TrackSubscribed, handleTrackSubscribed)
.on(RoomEvent.TrackUnsubscribed, handleTrackUnsubscribed)
.on(RoomEvent.ActiveSpeakersChanged, handleActiveSpeakerChange)
.on(RoomEvent.Disconnected, handleDisconnect);
});
function handleTrackSubscribed(
track: RemoteTrack,
publication: RemoteTrackPublication,
participant: RemoteParticipant
) {
if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
// attach it to a new HTMLVideoElement or HTMLAudioElement
const element = track.attach();
parentElement.appendChild(element);
}
}
function handleTrackUnsubscribed(
track: RemoteTrack,
publication: RemoteTrackPublication,
participant: RemoteParticipant
) {
// remove tracks from all attached elements
track.detach();
}
function handleActiveSpeakerChange(speakers: Participant[]) {
// show UI indicators when participant is speaking
}
function handleDisconnect() {
console.log('disconnected from room');
}
In order to connect to a room, you need to first create an access token.
See access token docs for details
import { createLocalVideoTrack } from 'livekit-client';
const videoTrack = await createLocalVideoTrack();
const publication = await room.localParticipant.publishTrack(videoTrack, {
name: 'mytrack',
simulcast: true,
});
videoTrack.mute();
room.localParticipant.unpublishTrack(videoTrack);
This library uses (loglevel)[] for its internal logs. You can change the effective log level with the logLevel
field in ConnectOptions
.
example/sample.ts contains a demo webapp that uses the SDK. Run it with yarn sample
Browser | Desktop OS | Mobile OS |
---|---|---|
Chrome | Windows, macOS, Linux | Android |
Firefox | Windows, macOS, Linux | Android |
Safari | macOS | iOS |
Edge (Chromium) | Windows, macOS |