Step 6: Events

To be able to receive incoming calls, allow and deny them and hang up, you need to implement event handlers:

<!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 = ""};
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/>
<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>

Event handlers are functions that get called by wrtc_kit each time some extraordinary event occurs, such as you receive an incoming call, a call is established, or something goes wrong. There are different events your code needs to react to:

wrtc.onError = function(obj, err) {
  if (err.errorCode > 0)
    status.innerHTML = "ERROR " + err.errorCode + ": " + err.errorMsg;
};

wrtc.onError() is called if anything goes wrong. It allows you to display the occurred error to the user.

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);
};

This is where things are getting interesting: this function is called when someone calls you. This example code displays the name of who is calling you, together with two buttons: Answer and Deny. The user can now click on one of the buttons depending on her preferences:

• If she clicks on Answer call.answerCall() will be executed.
• If she clicks on Deny call.denyCall() will be executed.

wrtc_kit will take care of all signaling necessary to answer (or deny) the call.

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);
};

During the establishment of a call this event occurs to allow you to give feedback to the user. The Deny button allows user to stop the call.

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);
};

Once the call has been connected this event occurs, so that you can adjust the looks of your client accordingly. In this example we display the name of the person the user is connected to, and a Hangup button so that she can easily finish the call. The hangup button calls call.hangup(), wrtc_kit takes care of the rest.

wrtc.onGotHungUp = wrtc.onHungUp = wrtc.onDisconnected = function() {status.innerHTML = ""};

Depending on if the call was ended by you, at the other end, or inbetween, different events occur. In all three cases we just remove the contents of the status field.

This simple example client just displays some ugly text and buttons in a status field. Your implementation can display not only fancier buttons, but also play different sounds such as ring signals etc.

There are also lots of other event functions, allowing your code to react to other situations. You can see a full list of event functions here.

Step 7: it actually works!