[[ixnx:wrtc:js:tutorial:start|Tutorial]] step 6: ====== Step 6: Events ====== To be able to receive incoming calls, allow and deny them and hang up, you need to implement [[ixnx:wrtc:js:api:wrtc:start#events|event handlers]]: '' \\ %%%% \\ \\ \\ %%

%% \\ Name:
\\ Pwd :
\\
\\ \\

\\ **%%

** \\

\\ '' 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() =====


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

[[ixnx:wrtc:js:api:wrtc:onerror|wrtc.onError()]] is called if anything goes wrong. It allows you to display the occurred error to the user. ===== wrtc.onIncomingCall() =====


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: [[ixnx:wrtc:js:api:wrtc:onincomingcall|this function]] is called when someone calls you. This example code displays [[ixnx:wrtc:js:api:call:getpartner|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 [[ixnx:wrtc:js:api:call:answercall|call.answerCall()]] will be executed. * If she clicks on Deny [[ixnx:wrtc:js:api:call:denycall|call.denyCall()]] will be executed. wrtc_kit will take care of all signaling necessary to answer (or deny) the call. ===== wrtc.onConnecting() =====


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 [[ixnx:wrtc:js:api:wrtc:onconnecting|this event]] occurs to allow you to give feedback to the user. The Deny button allows user to stop the call. ===== wrtc.onTalking() =====


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 [[ixnx:wrtc:js:api:wrtc:ontalking|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 [[ixnx:wrtc:js:api:call:hangup|call.hangup()]], wrtc_kit takes care of the rest. ===== Hangup =====


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 [[ixnx:wrtc:js:api:wrtc:start#events|other event functions]], allowing your code to react to other situations. You can see a full list of event functions [[ixnx:wrtc:js:api:wrtc:start#events|here]]. **[[ixnx:wrtc:js:tutorial:step7|Step 7: it actually works!]]**