Migrate from v3

1
import { SignalWire, StaticCredentialProvider } from "@signalwire/js";

1
class UserCredentialProvider {
2
  async authenticate(context) {
3
    const response = await fetch("/api/subscriber/token", {
4
      method: "POST",
5
      headers: { "Content-Type": "application/json" },
6
      body: JSON.stringify({ fingerprint: context?.fingerprint }),
7
    });
8
    const { token, expiresAt } = await response.json();
9
    return { token, expiry_at: expiresAt };
10
  }
11
12
  async refresh() {
13
    return this.authenticate();
14
  }
15
}

1
const client = await SignalWire({
2
  host,
3
  token: "<TOKEN>",
4
  debug: { logWsTraffic: true },
5
});

1
import { SignalWire, StaticCredentialProvider } from "@signalwire/js";
2
3
const credentials = new StaticCredentialProvider({ token: "<TOKEN>" });
4
5
// Second argument carries v3-style options (debug, logLevel, custom logger, etc.)
6
const client = new SignalWire(credentials, {
7
  logLevel: "debug",
8
  debug: { logWsTraffic: true },
9
});
10
11
client.ready$.subscribe((ready) => {
12
  if (ready) console.log("Client connected and authenticated");
13
});
14
15
client.errors$.subscribe((error) => {
16
  console.error("Client error:", error);
17
});

1
client.isConnected$.subscribe((connected) => { /* ... */ });
2
client.isRegistered$.subscribe((registered) => { /* ... */ });
3
client.ready$.subscribe((ready) => { /* connected + authenticated */ });

1
const call = await client.dial({
2
  to: "/private/user1",
3
  rootElement: document.getElementById("container"),
4
  nodeId: steeringId,
5
  userVariables: { /* ... */ },
6
});
7
await call.start();

1
const call = await client.dial("/private/user1", {
2
  audio: true,
3
  video: true,
4
});
5
// No rootElement, no nodeId, no start() — routing is internal
6
7
call.remoteStream$.subscribe((stream) => {
8
  if (stream) document.getElementById("remoteVideo").srcObject = stream;
9
});
10
11
call.localStream$.subscribe((stream) => {
12
  if (stream) document.getElementById("localVideo").srcObject = stream;
13
});

1
// v3
2
const call = await client.dial({ to, rootElement, nodeId, userVariables });
3
await call.start();
4
roomObj.on("room.joined", handler);
5
roomObj.on("media.connected", handler);
6
roomObj.hangup();
7
8
// v4
9
const call = await client.dial(address, { audio, video });
10
call.status$.subscribe(handler);          // replaces on('room.joined')
11
call.localStream$.subscribe(/* ... */);   // replaces rootElement auto-render
12
call.remoteStream$.subscribe(/* ... */);
13
call.hangup();

1
await client.online({
2
  incomingCallHandlers: {
3
    all: (notification) => {
4
      window.__invite = notification.invite;
5
    },
6
  },
7
});
8
9
const call = await window.__invite.accept({
10
  rootElement: document.getElementById("container"),
11
});
12
await window.__invite.reject();
13
await client.offline();

1
// Registration happens automatically on client construction.
2
client.session.incomingCalls$.subscribe((calls) => {
3
  const ringing = calls.filter((c) => c.status === "ringing");
4
  if (ringing.length > 0) showIncomingCallUI(ringing[0]);
5
});
6
7
function acceptCall(call) {
8
  call.answer(); // synchronous
9
  call.remoteStream$.subscribe((stream) => {
10
    document.getElementById("remoteVideo").srcObject = stream;
11
  });
12
}
13
14
function rejectCall(call) {
15
  call.reject(); // synchronous
16
}
17
18
// Equivalent to v3's client.offline() / client.online()
19
await client.unregister();
20
await client.register();

1
const self = call.self;
2
3
await self.mute();
4
await self.unmute();
5
await self.toggleMute();
6
7
await self.muteVideo();
8
await self.unmuteVideo();
9
await self.toggleMuteVideo();
10
11
await self.toggleDeaf();
12
13
// Sync access
14
const isMuted = call.self?.audioMuted;
15
const isVideoMuted = call.self?.videoMuted;
16
17
// Reactive
18
call.self$.subscribe((self) => {
19
  if (self) {
20
    self.audioMuted$.subscribe((muted) => updateMuteButton(muted));
21
  }
22
});

1
roomSession.on("member.joined", (member) => addParticipantToUI(member));
2
roomSession.on("member.left", (member) => removeParticipantFromUI(member));
3
roomSession.on("member.updated", handler);
4
const members = roomSession.members; // flat objects with properties

1
// Full list (re-emits on every change)
2
call.participants$.subscribe((participants) => {
3
  renderParticipantList(participants);
4
});
5
6
// Individual events
7
call.memberJoined$.subscribe((event) => addParticipantToUI(event.member));
8
call.memberLeft$.subscribe((event) => removeParticipantFromUI(event.member_id));
9
10
// Per-participant observables for fine-grained UI updates:
11
//   participant.name$
12
//   participant.audioMuted$
13
//   participant.videoMuted$
14
//   participant.isTalking$
15
//   participant.handraised$
16
//   participant.deaf$
17
//   participant.visible$
18
//   participant.position$
19
20
const participants = call.participants;

1
await call.self.startScreenShare();
2
await call.self.stopScreenShare();
3
4
call.self$.subscribe((self) => {
5
  if (self) {
6
    self.screenShareStatus$.subscribe((status) => {
7
      console.log("Screen share:", status);
8
    });
9
  }
10
});

1
// v3
2
roomObj.getLayoutList();
3
roomObj.setLayout({ name: layoutName });
4
roomObj.on("layout.changed", (event) => console.log(event.layout));
5
6
// v4
7
call.layouts$.subscribe((layouts) => console.log("Available:", layouts));
8
call.layout$.subscribe((layout) => console.log("Current:", layout));
9
10
await call.setLayout("grid", {});
11
12
await call.setLayout("highlight-1-active-4", {
13
  "participant-id": "reserved-1",
14
});

1
// State observable (for server-initiated recordings)
2
call.recording$.subscribe((isRecording) => updateRecordingIndicator(isRecording));
3
4
const isRecording = call.recording;

1
import { WebRTC } from "@signalwire/js";
2
3
enumerateDevices();
4
getCameraDevicesWithPermissions();
5
createDeviceWatcher(); // for change detection
6
7
await WebRTC.getCameras();
8
await WebRTC.getMicrophones();
9
await WebRTC.getSpeakers();
10
await WebRTC.checkCameraPermissions();
11
12
roomObj.updateMicrophone({ deviceId });
13
roomObj.updateCamera({ deviceId });

1
client.videoInputDevices$.subscribe((cameras) => populateCameraSelect(cameras));
2
client.audioInputDevices$.subscribe((mics) => populateMicSelect(mics));
3
client.audioOutputDevices$.subscribe((speakers) => populateSpeakerSelect(speakers));
4
5
// Pass the full MediaDeviceInfo, not just deviceId
6
call.self.selectVideoInputDevice(deviceInfo);
7
call.self.selectAudioInputDevice(deviceInfo);
8
call.self.selectAudioOutputDevice(deviceInfo);
9
10
// Sync access
11
const cameras = client.videoInputDevices;

1
const info = await client.getSubscriberInfo();
2
console.log("Logged in as:", info.name);

1
const user = client.user;
2
3
user.fetched$.subscribe((fetched) => {
4
  if (fetched) {
5
    console.log("User ID:", user.id);
6
    console.log("Display name:", user.displayName);
7
  }
8
});

1
const data = await client.address.getAddresses({
2
  type,
3
  displayName,
4
  pageSize: 10,
5
});
6
// data.data, data.hasNext, data.hasPrev, data.nextPage(), data.prevPage()

1
const directory = client.directory;
2
3
directory.addresses$.subscribe((addresses) => {
4
  // Reactive list — accumulates as loadMore() is called
5
  addresses.forEach((addr) => console.log(addr.displayName, addr.type));
6
});
7
8
directory.hasMore$.subscribe((hasMore) => toggleLoadMoreButton(hasMore));
9
directory.loading$.subscribe((loading) => showSpinner(loading));
10
11
directory.loadMore(); // fetches and appends the next page

1
const address = client.directory.addresses.find((a) => a.name === "user1");
2
const call = await client.dial(address.defaultChannel, { video: true, audio: true });
3
4
// URI strings still work
5
const call2 = await client.dial("/private/user1");

1
client.conversation.sendMessage({ addressId, text });
2
client.conversation.subscribe((newMsg) => { /* ... */ });
3
client.conversation.getConversationMessages({ addressId, pageSize });

1
callAddress.sendText(text); // scoped to the call's address
2
3
callAddress.textMessages$.subscribe((textMessagesCollection) => {
4
  textMessagesCollection.values$.subscribe((messages) => renderMessages(messages));
5
  textMessagesCollection.hasMore$.subscribe((hasMore) => {});
6
  textMessagesCollection.loadMore();
7
});

1
await call.hangup();
2
3
await client.disconnect(); // closes the WebSocket
4
client.destroy();          // releases subscriptions and resources
5
6
// Manual subscription cleanup, if needed
7
const sub = call.status$.subscribe((status) => console.log(status));
8
sub.unsubscribe();

1
const call = await client.dial("/public/room");
2
3
const callMedia = document.getElementById("call-media");
4
callMedia.call = call;
5
// Child components receive the call automatically via Lit context