Step 7: It actually works!

The complete code of our example client so far:

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";
});
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/><br/>
  <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>

This is actually all that is needed for a basic videophone web page with SIP compatibility.

You can store your example client either in the IXNX unit itself, or on your own web server.

Where the web page is located and loaded from does not matter – as long as wrtc_kit can get in touch with the IXNX unit's websocket server. If you have set wrtc.wsServer in your code to a correct value it will work.

Read chapter 11 about how to put your own client online. You can do it right now, the code above is complete. (In next chapter 8 we will put some online list handling to it though.)

Here is what you already can do with our example client:

1. Open the example client in your web browser and set its username to ”Adam” by entering it into the Name: field and click on ”OK”.
2. Open the example client on another browser and set its Name: to ”Eva”.
3. Now by entering ”Adam” into Eva's dial field and clicking on Call it will call Adam.
4. Adam will get a message that Eva is calling, and can answer or deny the call using the buttons that appear.
5. After Adam has answered the call he and Eva will see and hear each other, until either of them clicks on their hangup button or closes their window.

It doesn't matter if Adam and Eva is on the same PC, same LAN, or the opposite ends of the world – they can establish a video call to each other using this simple client.

Adam can also enter Eva's SIP address into the dial field, and make a SIP call to Eva's SIP telephone. If Adam logs in to the client with his SIP authorization name and password Eva can call his SIP address and Adam can answer it using this web client.

If a suitable SIP to POTS FXO has been prepared Adam can also enter a telephone number into the dial field and call any analogue or mobile telephone.

Calls between web client pages are routed directly, media flows directly from one web browser to another. Calls to and from SIP are proxied by the IXNX unit.

Step 8: Online list