@signalwire/js v3.27.0

Summary

This release brings significant enhancements and new features to the SignalWireClient, focusing on improved video handling, expanded API capabilities, and better user management:

1. Video Handling:

   • New buildVideoElement function to easily create and manage video elements for calls and rooms.
   • Video streams now automatically adjust to occupy the full width of the specified container.

2. Enhanced API Capabilities:

   • Added methods for managing addresses and conversations, including fetching details, sending messages, and subscribing to updates.
   • New functionality to handle user variables when dialing calls, enabling more personalized and detailed session information.

3. User Management:

   • Introduced methods to get subscriber info and manage WebRTC endpoints' online/offline status.

4. Unified Notifications:

   • Unified approach for handling incoming call notifications via WebSocket and Push Notification, simplifying the development process.

5. Improved Flexibility:

   • Options to specify video/audio constraints while making calls, allowing for more customized call setups.

These updates collectively aim to provide a more flexible, powerful, and user-friendly experience for developers using the SignalWireClient.

---

Added

1. userVariables param added when dialing a Fabric call

const client = await SignalWire({
  host: ...
  token: ...,
})

const call = await client.dial({
      ...params,
      rootElement: document.getElementById('rootElement'),
      userVariables: {
                "name": "John Doe",
                "email": "johndoe@signalwire.com",
               //...
                "fullBrowserVersion": "125.0.0.0",
                "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36",
            }
    })

2.  buildVideoElement function that creates and optionally injects a video DOM element for a given Call or Room object

const call = await client.dial({
   // ...
})
await call.start();

const { element, unsubscribe } = await buildVideoElement({
   room: call,
})
const container = document.getElementById('container');
container.appendChild(element)

Or, to also implicitly inject the video DOM element into your chosen container:

const { element, unsubscribe } = await buildVideoElement({
   room: call,
   rootElement: document.getElementById('container'), 
})

3. getAddress method added to the address namespace in SignalWireClient which returns the details about a particular address id

client.address.getAddress({id: <address_id_to_fetch_details>})

4. getConversations, getConversationMessages, createConversationMessage methods added to the conversation namespace in SignalWireClient

const conversations = await client.conversation.getConversations()

const conversationMessages = await client.conversation.getConversationMessages({ addressId: '...' })

// Subscribe to updates
client.conversation.subscribeToUpdates((newConversation) => {
  console.log('>> newConversation', newConversation)
})

5. SignalWireClient.getSubscriberInfo method returns the info about the current subscriber

const subscriber = await client.getSubscriberInfo()

6. online and offline methods added to SignalWireClient to register/unregister the WebRTC endpoint

await client.online()
//or
await client.offline()

7. sendMessage and getMessages methods added to the conversation namespace

const result = await client.conversation.getConversations();
const convo = result.data.filter(c => c.id == <address_id>)[0];
convo.sendMessage({
  text: 'hello world~',
})
await convo.getMessages()

8. Ability to specify page size when querying for the conversation and the address namespace

await client.conversation.getConversations({ pageSize: 10 });

await client.conversation.getMessages({ pageSize: 10 });

await client.conversation.getConversationMessages({ pageSize: 10 });

const addressData = await client.address.getAddresses({
   type: 'room',
   displayName: 'john doe',
   pageSize: 10
})

---

Changed

1. The video stream will occupy the full width of the rootElement container (breaking)

2. Handling notifications of incoming calls via both WebSocket and Push Notification is now unified (breaking)

// register invitation callback for push notification only
client.online({pushNotification: __incomingCallNotification})

// register invitation callback for both push notification and websocket
client.online({all: __incomingCallNotification})

//accept call using the invite notification
function __incomingCallNotification(invite){
  const call = await invite.accept(document.getElementById('rootElement'))
}

3. Both SignalWireClient.dial and CallInvite.accept methods now accept an optional rootElement parameter to specify where to put the video stream

invite.accept(document.getElementById('rootElement'))

const call = await client.dial({
    // ...
      rootElement: document.getElementById('rootElement')
    });

4. member.joined event now emitted for all members in a call.joined event

5. Users can now pass video/audio constraints while making a call.

const call = await client.dial({
  to: "/public/some_resource",
  video: false, // boolean | MediaTrackConstraints
  audio: true, // boolean | MediaTrackConstraints
})