Tutorial step 9:
Step 9: Cookie!
Each time you start this client your name is guest_ followed by a random number. To avoid the need of reentering your name all the time we can store it in a cookie, and retrieve it at each start:
<!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/>
<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>
In the initialization function we use when creating wrtc we check if there is any "me" entry saved in the webpage's cookie. A web cookie is data web servers save for each web page. A web page can retrieve data saved last time that particular page has been visited. If there is data saved in the cookie we use wrtc.getCookie() to retrieve the saved values and restore user's name, and SIP password. This function is ideal for other initializations too.
In function ChangeName() we have added a line that stores the given username as "me" in the cookie.
The SIP password though is handled a bit differently. The user enters her SIP password into the mypwd text field. It cannot be seen on the webpage, but is actually stored in clear text and can be retrieved quite easily. You should not store the user's SIP password in clear text in the web cookie either - that would be a huge security breach!
What wrtc_kit does is that it creates an SHA hash sum of the password that can be stored more safely. That hash sum is all wrtc_kit needs to log in to the SIP server. The hash sum is calculated at the time of the first login, thus it does not exist yet when wrtc.addressName is stored into the cookie in ChangeName(). After wrtc_kit has logged in wrtc.onSIPRegistration() is called though, and at that time the value of wrtc.sipHa1 has been calculated and can be stored in the cookie.
