Skip to main content

Browser SDK

npm install @signalwire/js

Overview

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.

Voice calls, dialing the PSTN, and connecting to SIP endpoints

This latest version of the Browser SDK is ideal for Chat applications and streaming or conferencing with audio and video. If you need to add browser support for voice calls or dial the PSTN or SIP endpoints, please use our previous version of the Browser SDK.

How It 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​

Install the SDK​

Choose your preferred installation method:

npm install @signalwire/js

Or include it via CDN:

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

Obtain tokens from your server​

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

// Server-side: Get a Video Room token
// Replace <YOUR_SPACE>, <username>, and <password> with your actual values
const response = await fetch('https://<YOUR_SPACE>.signalwire.com/api/video/room_tokens', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Basic ' + btoa('<PROJECT_ID>:<API_TOKEN>') // Your SignalWire credentials
},
body: JSON.stringify({
room_name: "my_room",
user_name: "John Smith",
permissions: [
"room.self.audio_mute",
"room.self.audio_unmute",
"room.self.video_mute",
"room.self.video_unmute",
"room.self.deaf",
"room.self.undeaf",
"room.self.set_input_volume",
"room.self.set_output_volume",
"room.self.set_input_sensitivity"
],
room_display_name: "My Room",
join_as: "member"
})
});

const { token } = await response.json();

Test your setup​

Create a simple video room to test your setup:

import { Video } from "@signalwire/js";

// Join a video room
const roomSession = new Video.RoomSession({
token: "your-room-token", // From your server
rootElement: document.getElementById("video-container")
});

// Listen for events
roomSession.on("member.joined", (e) => {
console.log(`${e.member.name} joined the room`);
});

roomSession.on("room.joined", () => {
console.log("Successfully joined the room!");
});

// Join the room
await roomSession.join();

Add this HTML element to your page:

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

Usage Examples​

import { Video } from "@signalwire/js";

const roomSession = new Video.RoomSession({
token: "your-room-token",
rootElement: document.getElementById("video-container"),
video: true,
audio: true
});

// Handle room events
roomSession.on("room.joined", () => {
console.log("Joined the video room");

// Set up UI controls after joining
setupControls();
});

roomSession.on("member.joined", (e) => {
console.log(`${e.member.name} joined`);
});

roomSession.on("member.left", (e) => {
console.log(`${e.member.name} left`);
});

// Detect when members are talking
roomSession.on("member.talking", (e) => {
if (e.member.id === roomSession.memberId) {
console.log("You are talking");
} else {
console.log(`${e.member.name} is talking`);
}
});

// Join the room
await roomSession.join();

// Example: Set up media controls for your UI
function setupControls() {
// Toggle camera on button click
document.getElementById("cameraBtn").onclick = async () => {
if (roomSession.localVideo.active) {
await roomSession.videoMute();
console.log("Camera muted");
} else {
await roomSession.videoUnmute();
console.log("Camera unmuted");
}
};

// Toggle microphone on button click
document.getElementById("micBtn").onclick = async () => {
if (roomSession.localAudio.active) {
await roomSession.audioMute();
console.log("Microphone muted");
} else {
await roomSession.audioUnmute();
console.log("Microphone unmuted");
}
};
}

Explore the SDK​