# st-livekit-client

> JavaScript/TypeScript client SDK for LiveKit

Latest version **1.10.3** (published 2021-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install st-livekit-client
pnpm add st-livekit-client
yarn add st-livekit-client
bun add st-livekit-client
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.10.3 |
| Published | 2021-08-26 |
| First published | 2021-08-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 190.7 KB |
| Known vulnerabilities | 0 (+11 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 653 |
| Author | David Zhao |
| Maintainers | sunsetsxue |

## Links

- npm: https://www.npmjs.com/package/st-livekit-client
- Repository: https://github.com/livekit/client-sdk-js
- Homepage: https://github.com/livekit/client-sdk-js#readme
- Issues: https://github.com/livekit/client-sdk-js/issues
- npm.io page: https://npm.io/package/st-livekit-client

## Dependencies (5)

- [events](https://npm.io/package/events.md) ^3.3.0
- [loglevel](https://npm.io/package/loglevel.md) ^1.7.1
- [@types/ws](https://npm.io/package/@types/ws.md) ^7.4.0
- [protobufjs](https://npm.io/package/protobufjs.md) ^6.10.2
- [webrtc-adapter](https://npm.io/package/webrtc-adapter.md) ^7.7.1

## Recent versions

- 1.10.3 (latest) — 2021-08-26
- 0.10.2 — 2021-08-26
- 1.10.2 — 2021-08-19
- 1.10.1 — 2021-08-19

## README

# JavaScript/TypeScript client SDK for LiveKit

`livekit-client` is the official client SDK for [LiveKit](https://github.com/livekit/livekit-server). With it, you can add real time video and audio to your web apps.

## Docs

Docs and guides at [https://docs.livekit.io](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:

```javascript
const LiveKit = require('livekit-client');

LiveKit.connect(...);
```

### Connecting to a room, publish video & audio

```typescript
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](https://docs.livekit.io/guides/access-tokens) for details

### Manually publish, mute, unpublish

```typescript
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](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        |

---
_Source: https://npm.io/package/st-livekit-client · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._