st-livekit-client
v1.10.3
Published
JavaScript/TypeScript client SDK for LiveKit
Downloads
1
Readme
JavaScript/TypeScript client SDK for LiveKit
livekit-client
is the official client SDK for LiveKit. With it, you can add real time video and audio to your web apps.
Docs
Docs and guides at https://docs.livekit.io
Installation
Yarn
yarn add livekit-client
NPM
npm install livekit-client --save
Usage
Examples below are in TypeScript, if using JS/CommonJS imports replace import with:
const LiveKit = require('livekit-client');
LiveKit.connect(...);
Connecting to a room, publish video & audio
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
Manually publish, mute, unpublish
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);
Configuring logging
This library uses (loglevel)[] for its internal logs. You can change the effective log level with the logLevel
field in ConnectOptions
.
Examples
SDK Sample
example/sample.ts contains a demo webapp that uses the SDK. Run it with yarn sample
Browser Support
| Browser | Desktop OS | Mobile OS | | --------------- | --------------------- | --------- | | Chrome | Windows, macOS, Linux | Android | | Firefox | Windows, macOS, Linux | Android | | Safari | macOS | iOS | | Edge (Chromium) | Windows, macOS |