Step 8: Online List

Entering the name of who you want to call manually is flexible, but inconvenient. It would be better to see a list of people you can call. wrtc.onOnlineList() gives you a list of all people connected to the IXNX server:

<!DOCTYPE html>
<html><head>
<script type="module">
import { wrtcObject} from "/luci-static/resources/wrtc_kit_m.js";
const status = document.getElementById('status');
const wrtc = new wrtcObject(function() {
this.wsServer = "50.11.69.17";
});
wrtc.onError = function(obj, err) {
if (err.errorCode > 0)
status.innerHTML = "ERROR " + err.errorCode + ": " + err.errorMsg;
};
wrtc.onIncomingCall = function(obj) {
status.innerHTML = "Call from " + obj.getPartner();
const button = document.createElement("button");
button.textContent = "Answer";
button.addEventListener("click", obj.answerCall);
status.appendChild(button);
const button2 = document.createElement("button");
button2.textContent = "Deny";
button2.addEventListener("click", obj.denyCall);
status.appendChild(button2);
};
wrtc.onConnecting = function(obj) {
status.innerHTML = "Connecting to " + obj.getPartner();
const button = document.createElement("button");
button.textContent = "Deny";
button.addEventListener("click", obj.denyCall);
status.appendChild(button);
};
wrtc.onTalking = function(obj) {
status.innerHTML = "Connected to " + obj.getPartner();
const button = document.createElement("button");
button.textContent = "Hang up";
button.addEventListener("click", obj.hangup);
status.appendChild(button);
};
wrtc.onGotHungUp = wrtc.onHungUp = wrtc.onDisconnected = function() {status.innerHTML = ""};
wrtc.onOnlineList = function(list) {
const online_ul = document.getElementById('online');
online_ul.innerHTML = "";
list.users.forEach(user ⇒ {
if (user.name != wrtc.addressName) {
var entry = document.createElement("li");
if (user.state.match(/OK/)) {
var a = document.createElement("button");
a.textContent = user.name;
a.onclick = function() {wrtc.call(user.name)};
entry.appendChild(a);
}
else
entry.textContent = user.name;
online_ul.appendChild(entry);
}
});
};
function ChangeName() {
wrtc.changeCredentials({addressName: document.getElementById('myname').value,
sipPassword: document.getElementById('mypwd').value});
};
document.getElementById('okbtn').addEventListener('click', ChangeName);
document.getElementById('callbtn').addEventListener('click',
function() {wrtc.call(document.getElementById('dial').value)});
</script>
</head><body>
<div>
Name:<input type="text" id="myname"><br/>
Pwd :<input type="password" id="mypwd"><br/>
<button id="okbtn">OK</button><br/>
<ul id="online"></ul>
<input type="text" id="dial"><button id="callbtn">Call</button>
</div>
<div id="status"></div>
<video id="localVideo" width="200px" autoplay="autoplay" muted="true"></video>
<video id="remoteVideo" width="300px" autoplay="autoplay"></video>
</body></html>

wrtc.onOnlineList() is not a full-blown presence handler, it only lists all users currently online, connected to the same IXNX unit you are. For real SIP presence handling please see functions wrtc.setSIPPresence(), wrtc.setSIPSubscribe() and wrtc.onSIPPresence().

The websocket server in your IXNX unit will automatically send out an updated list of online clients to all connected clients each time the list changes. When wrtc_kit receives such a list it will call wrtc.onOnlineList().

The list argument the function receives contains a JSON object containing a list of all users online – including yourself:

{"type":"who","users":[{"name":"Adam","state":"OK"},{"name":"Eva","state":"busy"}]}

wrtc.onOnlineList() does the following:

wrtc.onOnlineList = function(list) { 
  const online_ul = document.getElementById('online'); 
  online_ul.innerHTML = ""; 
  list.users.forEach(user => {
    if (user.name != wrtc.addressName) {
      var entry = document.createElement("li");
      if (user.state.match(/OK/)) {
        var a = document.createElement("button");
        a.textContent = user.name;
        a.onclick = function() {wrtc.call(user.name)};
        entry.appendChild(a);
      }
      else
        entry.textContent = user.name;
      online_ul.appendChild(entry);
    }
  });
}; 

1. it steps through all users listed in the JSON object
2. object property wrtc.addressName contains your username, and is used to avoid displaying yourself in the list
3. the user's state can be ”OK” or ”busy” depending on if they are available for calling or already busy talking to someone.
4. if the user in the list is in ”OK” state, we create a clickable button. If you click on it function wrtc.call() will be called with that name, resulting in a call being placed to that user.
5. if the user in the list is busy in a call then you should not be able to call them. To avoid it the user is only listed as a non-clickable text string.

Yes, a click-to-call presence list is this easy to implement. This example code creates a butt-ugly list, but it works. You can create much nicer lists, with small green and red icons for available and busy users, and little telephone icons to call them.

(The reason why we check for state.match(/OK/) in the code is because there actually is a third state apart from "OK" and "busy", called "buOK" = currently in call, but you can call in and join the call – but that is beyond the scope of this basic tutorial.)

Step 9: Cookie!