You can use WebRTC solutions in different communication formations. In addition to peer-to-peer (1-1) and publish-play (1-N) communication types, you can also implement a WebRTC conference (N-N) solution with Ant Media Server Javascript SDK. Let’s have a look at that step by step.
Step 1. Prepare the HTML Page
Before joining a room, include JavaScript files to your page in the header as follows.
<head>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/webrtc_adaptor.js"></script>
</head>
Then you need to insert video tags to your page. HTML5 video tags are used for both local and remote videos. First, you need to create a local video with the id “localVideo”. This id is given to WebRTCAdaptor as “localVideoId” parameter.
<div class=”row”>
<div class=”col-sm-6″>
<video id=”localVideo” autoplay muted></video>
</div>
Then create your remote videos for other participants. You need to create them when each new participants joined and remove when left. You need to manage the id of remote videos. In our example, we have used “remoteVideo0”, “remoteVideo1” as remote video tags to create and remove easily by adding remoteVideoIndex to the video ID.
<div class=”col-sm-6″>
<video id=”remoteVideo0″ autoplay></video>
</div>
</div>
When “newStreamAvailable” notification is received from the server then you need to create and address new remote video as follows:
remoteVideos[obj.streamId] = document
.getElementById(“remoteVideo”
+ remoteVideoIndex);
remoteVideoIndex++;
When “streamLeaved” notification is received from the server then you need to remove remote video as follows:
remoteVideos[obj.streamId].srcObject = null;
remoteVideos[obj.streamId] = null;
delete remoteVideos[obj.streamId];
remoteVideoIndex–;
These operations are already defined in the WebRTCAdaptor object according to callbacks. You can customize according to your needs.
You need to define some variables also;
Remote video variables;
var remoteVideoIndex = 0;
var remoteVideos = new Array();
Media source variable;
var mediaConstraints = {
video : true,
audio : true };
SDP variable;
var sdpConstraints = {
OfferToReceiveAudio : false,
OfferToReceiveVideo : false};
You need to define websocketURL for WebSocket connection, WebRTCAdaptor uses this URL to create a connection.
var websocketURL = ws://SERVER_NAME:5080/WebRTCAppEE/websocket
var websocketURL = wss://SERVER_NAME:5443/WebRTCAppEE/websocket (for secure connections)
Finally, create a WebRTCAdaptor object with required parameters like in the example.
Step 2. Create a WebRTC Conference Room (Optional)
A conference room should be created first before other operations. In fact, this step is optional. If you don’t create a conference room, then it is created automatically after receiving the first join request from the clients.
However, if you want to control conference room validity in your application, then you need to create a custom conference room. It can be created using createConferenceRoom REST service. Conference room consists of the following parameters:
{
"roomId":"id_of_room",
"startDate":"start_date_of_room",
"endDate":"end_date_of_room"
}
The roomId parameter is the key parameter and should be defined in the create request. The startDate and endDate parameters are optional parameters and accepting Unix timestamp values. If startDate is not defined then it is automatically defined as now, similar, If endDate is not defined then it automatically defined as one hour later.
Step 3. Join a Room
When WebRTCAdaptor is initialized successfully, it creates a web socket connection. After a successful connection, the client gets the “initialized” notification from the server.The server basically sends below WebSocket message to the client.
{
command: "notification",
definition: "initialized"
}
Then clients can send join WebSocket message to join a conference room with ‘joinRoom’ method. In our example “joinRoom” method performs this operation
webRTCAdaptor.joinRoom(roomId , streamId);
joinRoom method sends the below WebSocket message to the server.
{
command: "joinRoom",
room: "{roomId}"
}
Step 4. Publish & Play
When joined the room successfully. The server creates a notification including current participants of the conference room. Again WebRTCAdaptor callback method is invoked for the below WebSocket message.
{
command: "notification",
definition: "joinedTheRoom",
streamId: "the_stream_id_of_client",
streams: "the_streams_in_the_room"
}
According to the application, the client can either start to publish or play current streams in the room by sending WebSocket messages. If you want to play streams of current participants then you need to call “webRTCAdaptor.play” method for each stream. Such as:
if (obj.streams != null) {
obj.streams.forEach(function(item) {
console.log(item);
webRTCAdaptor.play(item, token, roomNameBox.value);
});
}
For publishing; just call publish method as follows. ‘token’ parameter is required if a one-time token is enabled.
webRTCAdaptor.publish(streamId, token);
publish method basically sends the below WebSocket message.
{
command: "publish",
streamId: "the_stream_id_of_client",
token: "the_id_of_token"
}
For playing; call the play method such as ; ‘token’ parameter is required if one-time token is enabled.
webRTCAdaptor.play(streamId, token);
Play method sends the below WebSocket message to the server
{
command: "play",
streamId: "id_of_stream_for_playing",
token: "the_id_of_token",
room: "the_id_of_room"
}
When a new participant joins the room after the client, the server sends a notification message so that current participants can play it. WebRTCAdaptor callback method is invoked for the below WebSocket message;
{
command : "notification",
definition : "streamJoined",
streamId: "new_stream_id_joined_the_room"
}
When a new participant leaves the room, the server sends a notification message so that current participants can stop and remove it. This notification also triggers WebRTCAdaptor callback method for the below WebSocket message is;
{
command : "notification",
definition : "streamLeaved",
streamId: "stream_id_leaved_the_room"
}
Step 5. Secure Your Room Streams (Optional)
To protect your streams, you can use one-time tokens for that. Please read this blog post for more details. The critical point is that; if you are planning to use a token for playing streams in the conference room then you need to define the room id to the token.
Then add this token to publish and play the messages described above. Such as:
{
command: "publish",
streamId: "the_stream_id_of_client",
token: "the_id_of_token"
}
Step 6. Leave a Room
Any time participants can leave the room by sending leave a message. When this message is received, the server stops publishing and playing activities of related client automatically.
{
command : "leaveFromRoom",
room: "roomName"
}
To leave the room, call the leaveFromRoom with the id of the room. In our example, “leaveRoom” method performs this operation
webRTCAdaptor.leaveFromRoom(roomId);
for ( var key in remoteVideos) {
console.log(“index: ” + key);
remoteVideos[key].srcObject = null;
remoteVideos[key] = null;
delete remoteVideos[key];
}
remoteVideoIndex = 0;
You can analyze and follow the conference example on Github also.
We hope this blog post will give an idea about WebRTC conference applications. You can analyze the example at the test server. Follow us to read the next WebRTC blogs. If you have any questions, just drop an email or fill out the contact form 🙂
Useful Links
You can try Ant Media Server for free with all its features!
You can download native Android and iOS WebRTC SDKs and integrate them into your applications for free!
Ant Media Server Github Wiki
You would want to check Ultra Low Latency Video Streaming and 7 Use Cases, Future of Ultra-Low Latency Streaming Market, How to Create a Video Conference Solution with Ant Media Server?, Build powerful interactive WebRTC Data Channel Applications with Actions and Events.
