wrtc_kit logs a lot to the Javascript console of the web browser, making debug easier. To see the log simply press Ctrl+Shift+J in most browsers.

At the bottom of the Javascript log is a command prompt. You can inspect and change all properties here. Try for instance to write wrtc.addressName and press enter.

You can also log your own events into the log by calling wrtc.consoleLog() or wrtc.moduleLog() from your code.

The console log can also be saved to local file on user's PC by calling wrtc.adv.saveLog(). You can also request the console log from the other part of a call by calling wrtc.adv.getLog() or call.adv.getLog(). You should put a button calling these functions on your webpage for debug purposes.

The demo client in this tutorial can only make one call at a time. The page has a static video element called remoteVideo that displays the received call, wrtc_kit will automatically search for video element called remoteVideo for that purpose. But that is only for one call.

If you want to have two simultaneous calls, talk to two different people at the same time, you will need to create video elements dynamically for each new call.

The main wrtc_kit property deciding if your client will be able to handle one call at a time or multiple calls is wrtc.maxNrCalls. By default it is 1 allowing only one call at a time. By setting it to 2 you can have 2 calls at a time, 10 will give you 10, etc. But you need to do more than simply increase the value.

wrtc.onNewCallObject() is an event function called each time wrtc_kit creates a new call. You can use this function to dynamically create video elements for each new call:

wrtc.onNewCallObject = function(callobj) {
  var video = document.createElement('video');
  video.autoplay = "autoplay";
  callobj.remoteVideo = video;
}

And you can use wrtc.onEndCallObject() to dynamically remove the video elements too:

wrtc.onEndCallObject = function(callobj) {
  callobj.remoteVideo.outerHTML = "";
}

By adding a user field to the call object you can even create own status fields for your calls:

wrtc.onNewCallObject = function(callobj) {
  var div = document.createElement('div');
  var statusdiv = document.createElement('div');
  div.appendChild(statusdiv);
  var video = document.createElement('video');
  video.autoplay = "autoplay";
  div.appendChild(video);
  callobj.remoteVideo = video;
  callobj.user = {};
  callobj.user.status = statusdiv;    
}

The above code dynamically creates a new <div> element for each new call, that includes an inner <div> element to display status in, and a <video> element to display received video in. Each call will get its own status field, that can contain its own buttons:

wrtc.onIncomingCall = function(obj) {
  obj.user.status.innerHTML = "Call from " + obj.getPartner();
  const button = document.createElement("button");
  button.textContent = "Answer";
  button.addEventListener("click", obj.answerCall);
  obj.user.status.appendChild(button);
  const button2 = document.createElement("button");
  button2.textContent = "Deny";
  button2.addEventListener("click", obj.denyCall);
  obj.user.status.appendChild(button2);
};

Compare this wrtc.onIncomingCall() function with the one in Tutorial step 6! The dynamically created status field is tied to the call object itself and can be accessed using obj.user.status. Each call can have its own status field.

When call is ended wrtc_kit will discharge the used call object, but you need to destroy the dynamic <div> you used for display:

wrtc.onEndCallObject = function(obj) {
  obj.user.div.outerHTML = "";
}

As obj.user.div also contains the <video> element that one will be killed too.

tiny.htm

<!DOCTYPE html>
<html><head>
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<script type="module">
  import { wrtcObject} from "/luci-static/resources/wrtc_kit_m.js";
  const wrtc = new wrtcObject(function() {
    this.wsServer = "50.11.69.17";
    this.getVideo = false;
    this.adv.callTo = "support@company.com";
  });
  wrtc.onIncomingCall = function(obj) {obj.answerCall()};
</head><body>
</body></html>

Look at this tiny client: it has no video, it has no user login, it has no dial field or button, it has no online users list… what can it be used for? Well, even without all those features, it can still make voice calls!

By not setting any username one will be generated automatically, guest_ followed by a random number.

If you look closely, the wrtc initialization function sets this.getVideo to false, turning off video media. The wrtc object doesn't need any additional objects for audio only calls.

The line this.adv.callTo = "support@company.com" makes the client automatically call your support's SIP phone as soon as the page gets loaded. If you replace that line with this.getURLvars() you can instead include the address to call into the page's URL:
company.com/tiny.htm?call=support@company.com

wrtc.onIncomingCall() automatically answers any incoming calls. (Perhaps support will want to call back to the customer.)

How to finish the call? Simply close the window to end the call.

Now you are ready to explore the wrtc_kit API