Create a Real-Time Video Chat Room with WebRTC & Twilio
In my last article, “The Dawn of WebRTC”, I showed how to create a simple photo booth app using the Web Real-Time Communications (WebRTC) API. In this article, I will show you how to build a more practical video chat room.
To recap, WebRTC was developed to provide web and mobile developers with the ability to create high definition video and audio calls using simple APIs. Many large and small companies spanning all industries including, but not limited to, healthcare, education, customer care, professional services and social media are building next-gen applications utilizing WebRTC.
Chances are you have probably used this technology without even being aware of it. If you have used Facebook Messenger, WhatsApp and/or SnapChat video or voice features, you have unknowingly used WebRTC to communicate with your family and friends.
Jump Start Development
WebRTC and other similar web technologies are changing the way people communicate and engage in various ways. Developers are providing enhanced communications that integrate easily into any application. Just as companies like Facebook, SnapChat, Tango and WhatsApp are integrating live audio and video capabilities into their apps, so can you.
It may surprise you that the process for doing so is simple, quick and best of all cost efficient. Since this great technology was open-sourced by Google, you can now build your applications royalty free without licensing costs. However, the road to building your own solution can be quite daunting if you are not familiar with some common components required by WebRTC such as TURN/STUN, signaling, multipoint conferencing units (MCU) and so on.
In our industry, there are upwards of 20 platforms as a service (PaaS) providers offering WebRTC solutions. After gaining years of experience working with this technology, we (at Blacc Spot Media) have a few favorite PaaS providers that have proven to work well for our clients. We partner with many providers to shorten the development time required to get our clients’ products to market quickly. One of the providers we have had the opportunity to partner with is Twilio. In this article we are going to focus on their platform.
Twilio Video
If you are not familiar with Twilio, they provide a suite of communications tools through a set of simple APIs and SDKs. Their solution enables developers to add real-time communications capabilities to their apps. New to the Twilio arsenal is Programmable Video which allows you to create HD multi-party video and audio experiences in your mobile and web apps. Twilio is a veteran in the WebRTC industry and is expanding its current Twilio Client product, which already has some WebRTC components running at its core. Twilio Video has a bright future with a full roadmap of enhancements on the way. Soon you will be able to experience mobile screen sharing along with enhanced multi-party capabilities.
Building a Chat Room
You will need a Twilio account to use this demo. If you don’t have one you can sign up now for a free account. Make sure Your select “Programmable Video” as the first service you plan to use. Once you have created your account, you will need the following information to create your app:
| Credentials | Description |
|---|---|
| Twilio Account SID | Your main Twilio account identifier – find it on your dashboard. |
| Twilio Video Configuration SID | Adds video capability to the access token – generate one here |
| API Key | Used to authenticate – generate one here. |
| API Secret | Used to authenticate – just like the above, you’ll get one here. |
We are also going to be using Firebase as a simple way to keep track of which users are available to chat. Firebase is a Mobile Backend as a Service that powers your app’s backend, including data storage, user authentication, static hosting, and more. If you don’t have an account, sign up for a free one to get started. Once you complete these instructions, you will be able to upload this demo to a server to run a live video chat room.
The Demo
The code developed in this article is available on GitHub, and you can view a live demo at Blacc Spot Media. Currently, WebRTC is only supported in Google Chrome, Mozilla Firefox, and Opera on the desktop:
If you are deploying this demo to a web server, it is important to note that as of Chrome 47, a SSL encrypted domain is required to gain access to a user’s microphone and camera. A simple way to solve this problem is to use the new Let’s Encrypt service to install a free certificate. You can find a good Tutorial on how to install the certificate on your server at Digital Ocean.
PHP
In order to gain access to the Twilio platform, you must first be authenticated in the system. In this example we are using PHP on the server side to get up and running quickly. Twilio has a wide array of server side libraries to fit your preference. After authentication occurs, we then pass the account credentials you received from your Twilio account above.
// ADD TWILIO REQURIED LIBRARIES
require_once('twilio/Services/Twilio.php');
// TWILIO CREDENTIALS
$TWILIO_ACCOUNT_SID = 'your account sid here';
$TWILIO_CONFIGURATION_SID = 'your configuration sid here';
$TWILIO_API_KEY = 'your API key here';
$TWILIO_API_SECRET = 'your API secret here';
// CREATE TWILIO TOKEN
// $id will be the user name used to join the chat
$id = $_GET['id'];
$token = new Services_Twilio_AccessToken(
$TWILIO_ACCOUNT_SID,
$TWILIO_API_KEY,
$TWILIO_API_SECRET,
3600,
$id
);
// GRANT ACCESS TO CONVERSTATION
$grant = new Services_Twilio_Auth_ConversationsGrant();
$grant->setConfigurationProfileSid($TWILIO_CONFIGURATION_SID);
$token->addGrant($grant);
// JSON ENCODE RESPONSE
echo json_encode(array(
'id' => $id,
'token' => $token->toJWT(),
));
HTML
The HTML code for this demo is quite simple and includes the ability to connect to the chat room using your name and see a full list of users that are available to chat as well as an event log.
Continue reading %Create a Real-Time Video Chat Room with WebRTC & Twilio%
LEAVE A REPLY
You must be logged in to post a comment.