Step 10: The complete code

tutorial.htm

<!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";
  if (this.getCookie("me")) { 
    document.getElementById('myname').value = this.addressName = this.getCookie("me"); 
    this.sipHa1 = this.getCookie("ha1"); 
  } 
});
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.onSIPRegistration = function(result) { 
  if (wrtc.sipHa1) { 
    document.cookie = "ha1=" + wrtc.sipHa1 + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict"; 
    document.getElementById('mypwd').value = ""; 
  } 
}; 
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.cookie = "me=" + wrtc.addressName + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict"; 
};
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/><br/>
  <ul id="online"></ul>
  <input type="text" id="dial"><button id="callbtn">Call</button>
</div><br/>
<div id="status"></div>
<video id="localVideo" width="200px" autoplay="autoplay" muted="true"></video>
<video id="remoteVideo" width="300px" autoplay="autoplay"></video>
</body></html>

Now it is your turn

We have no more steps, you have reached the end of this tutorial.

You have created an ugly but working WebRTC client, capable of video calls, SIP calls, presence, and global connectivity. And its source code fits on one A4 paper.

Now it is your turn, to create your own WebRTC client, that will most definitely be much more appealing, with lots of bells and whistles.

You can add stylesheets designing the web page layout.
You can make the online list look much-much nicer. Or implement a proper SIP presence client.
You can make better feedback in your event functions, with ring-tones, sounds, nice buttons, etc.
You can add more functions and features to your client.
You can create different clients for different uses.
You can even create something entirely different and innovative use of WebRTC and SIP connectivity, other than a simple voice or video client.

The wrtc_kit is highly flexible. You can create many different clients with it, opted towards different users. The wrtc object has many properties you can tweak to make it behave in the way you desire.

Step 11: Going Online