Core

Browser SDK Guides

View as Markdown

The SignalWire Browser SDK is a JavaScript library that enables WebRTC-based voice, video, and chat applications directly in web browsers. Built on WebSocket architecture, it provides real-time communication capabilities without plugins or downloads.

npm

@signalwire/js

GitHub

signalwire-js

Guides & Examples

Step-by-step tutorials and practical examples to get you building quickly

$npm install @signalwire/js

Great guides to get you started

Video Guides

Getting Started with the SignalWire Video SDK

Learn how to build a video conferencing application using the SignalWire Browser SDK.

Zoom like application

Learn how to build a Zoom clone application using the SignalWire Browser SDK.

Chat Guides

Get Started with a Chat Application

Learn how to build a chat application using the SignalWire Browser SDK.

How the Browser SDK Works

The SDK operates through WebSocket connections that handle both method calls and real-time events. When you call methods like join() or publish(), the SDK sends requests and returns promises. Simultaneously, you can listen for real-time events like new members joining or messages arriving using the .on() method.

Getting Started

1

Install the SDK

Choose your preferred installation method:

$npm install @signalwire/js

Or include it via CDN:

1<script src="https://cdn.signalwire.com/@signalwire/js"></script>
2

Obtain tokens from your server

Browser applications require tokens from SignalWire’s REST APIs for security. Create these server-side:

1// Server-side: Get a Video Room token
2// Replace <YOUR_SPACE>, <username>, and <password> with your actual values
3const response = await fetch('https://<YOUR_SPACE>.signalwire.com/api/video/room_tokens', {
4  method: 'POST',
5  headers: {
6    'Content-Type': 'application/json',
7    'Accept': 'application/json',
8    'Authorization': 'Basic ' + btoa('<PROJECT_ID>:<API_TOKEN>')  // Your SignalWire credentials
9  },
10  body: JSON.stringify({
11    room_name: "my_room",
12    user_name: "John Smith",
13    permissions: [
14      "room.self.audio_mute",
15      "room.self.audio_unmute",
16      "room.self.video_mute",
17      "room.self.video_unmute",
18      "room.self.deaf",
19      "room.self.undeaf",
20      "room.self.set_input_volume",
21      "room.self.set_output_volume",
22      "room.self.set_input_sensitivity"
23    ],
24    room_display_name: "My Room",
25    join_as: "member"
26  })
27});
28
29const { token } = await response.json();
3

Test your setup

Create a simple video room to test your setup:

1import { Video } from "@signalwire/js";
2
3// Join a video room
4const roomSession = new Video.RoomSession({
5  token: "your-room-token",  // From your server
6  rootElement: document.getElementById("video-container")
7});
8
9// Listen for events
10roomSession.on("member.joined", (e) => {
11  console.log(`${e.member.name} joined the room`);
12});
13
14roomSession.on("room.joined", () => {
15  console.log("Successfully joined the room!");
16});
17
18// Join the room
19await roomSession.join();

Add this HTML element to your page:

1<div id="video-container"></div>

Usage Examples

1import { Video } from "@signalwire/js";
2
3const roomSession = new Video.RoomSession({
4  token: "your-room-token",
5  rootElement: document.getElementById("video-container"),
6  video: true,
7  audio: true
8});
9
10// Handle room events
11roomSession.on("room.joined", () => {
12  console.log("Joined the video room");
13
14  // Set up UI controls after joining
15  setupControls();
16});
17
18roomSession.on("member.joined", (e) => {
19  console.log(`${e.member.name} joined`);
20});
21
22roomSession.on("member.left", (e) => {
23  console.log(`${e.member.name} left`);
24});
25
26// Detect when members are talking
27roomSession.on("member.talking", (e) => {
28  if (e.member.id === roomSession.memberId) {
29    console.log("You are talking");
30  } else {
31    console.log(`${e.member.name} is talking`);
32  }
33});
34
35// Join the room
36await roomSession.join();
37
38// Example: Set up media controls for your UI
39function setupControls() {
40  // Toggle camera on button click
41  document.getElementById("cameraBtn").onclick = async () => {
42    if (roomSession.localVideo.active) {
43      await roomSession.videoMute();
44      console.log("Camera muted");
45    } else {
46      await roomSession.videoUnmute();
47      console.log("Camera unmuted");
48    }
49  };
50
51  // Toggle microphone on button click
52  document.getElementById("micBtn").onclick = async () => {
53    if (roomSession.localAudio.active) {
54      await roomSession.audioMute();
55      console.log("Microphone muted");
56    } else {
57      await roomSession.audioUnmute();
58      console.log("Microphone unmuted");
59    }
60  };
61}