Create video chat with SignalWire Video API

SignalWire Video API is one of the enterprise-grade video communication platforms in the industry now. Unlike most other platforms, SignalWire video API provides cloud rendered single stream for all connected users to the meeting. It is a huge advantage over other platforms because it uses less bandwidth and computer resources and serves higher video quality. The pricing is reasonable compared to other CPAAS platforms like Twilio, Vonage, etc.

Here we are going to discuss how to build a simple video conference using SignalWire APIs. All the video chat rooms are created, managed and deleted on SignalWire servers using provided APIs. To consume those APIs we have to create a SignalWire account and create a SignalWire Project. Then we can consume the APIs using project ID and API key. For better security of API key, we should keep it in our own backend server and consume SignalWire APIs via that backend.

Our Backend API for getting token (NodeJS)

const auth = {
    username: "<project_id>",
    password: "<api_token>" 
};

const  permissions  =  [
		...
		"room.member.set_input_volume",
		"room.self.undeaf",
		...
	];

const SIGNALWIRE_VIDEO_API = "https://<signalwire_username>.signalwire.com/api/video"

app.post('/get-signalwire-token', async (req, res) => {
    let { user_name, room_name } = req.body;
    try {
        let token = await axios.post(
            `${SIGNALWIRE_VIDEO_API}/room_tokens`,
            { user_name, room_name, permissions },
            { auth }
        );
        return res.json({ token: token.data.token })
    } catch (e) {
        console.error(e);
        return res.sendStatus(500);
    }
})

Frontend Application (ReactJS)

SignalWire provides Javascript client SDK for easily building web applications to work with SignalWire servers. SDK gives us abilities like creating, joining, leaving, controlling other users in meetings, changing the layout of the view and more.

To add SignalWire javascript SDK to your ReactJS project:

yarn add @signalwire/js

Then in the component which shows the meeting elements, get the meeting token with relevant permissions from the above API and initiate the room session.

import  React,  {  useEffect,  useRef,  useState  }  from  "react";
import  axios  from  "axios";
import  *  as  SignalWire  from  "@signalwire/js";

export  default  function  Video({name, room}) {
	useEffect(() => {
        try {
			const { data: { token } }  =  await  axios.post(`${BACKEND_URL}/get-signalwire-token`,
				{
					user_name: name,
					room_name:  room,
				});

			const room  =  new  SignalWire.Video.RoomSession({
					token,
					rootElement:  document.getElementById('conference'),
					video:  true,
				});

			await room.join();
			
		}  catch  (error)  {
			console.error("Something went wrong",  error); 
		}
	});

	return <div id="conference" />;
}	

After the roomSession is created and the local user joined to the session the room HTML element will append as the child to the "conference" element.

Add more features to the video call.

SignalWire Video SDK is a feature-rich library that gives abilities to the developer to make video chat applications like Zoom, MS Teams, Jitsi platforms.

Changing the layout of videos.

To change the layout each user needs to obtain permission from Video API.

const  permissions  =  [
    ...
	"room.member.set_input_volume",
	"room.self.undeaf",
    
	// add this permission.
        "room.set_layout"
    ...
];

If you added the above permission to the token, You can set the layout of the video grid of that roomSession.

To get supported layouts,

const supportedLayouts = await room.getLayouts();

Set the layout,

const { layouts } = await room.getLayouts();

room.setLayout({name: layouts[0]});

Since the video grid is composed in the SignalWire servers, once a participant changes the layout every user will see that changed layout instantly.

Also, there are a lot of conference/member events/methods listeners to allow applications to respond to each event.

• member.joined
• member.left
• member.talking
• member.updated
• recording.ended
• recording.started

and more. You can find them in the SignalWire video SDK docs

We develop custom video applications using SignalWire APIs. If you are interested send us an email with your requirement to support@telzee.io and one of our experts will get in touch with you.