<< Table of Contents
One can write a custom WebRTC application for Web Browser using Loris WebRTC Service.
To do this:
- Include "signaling.js", "wsclient.js" and "webrtc_peer.js" into your html file.
- The minimal javascript code that implements video calls is shown below:
/*
* minloris.js
*/
var signaling = null;
var TAG = " [ 📋 HTML ] "
var myId = null;
var toId = null;
var peer = null;
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
function run(){
var host = "loris.highdim.com";
var port = "443";
var username = "***************";
var password = "***************";
myId = localStorage.getItem("myId");
toId = localStorage.getItem("toId");
if(myId != null){
document.getElementById("caption").innerHTML = "Minimal WebRTC (" + myId + ")";
signaling = new Signaling();
signaling.setup(host, port, username, password, myId, function(msg){
console.log(TAG, msg);
if(msg["type"] == "echo"){
console.log(TAG + "CONNECTED!");
}
if (msg["type"] == "call_request"){
document.getElementById("incomeCall").style.display = "block";
document.getElementById("incomeCallInfo").innerHTML = "Income call from: " +
msg["from"] ;
}
if (msg["type"] == "call_stop"){
document.getElementById("incomeCall").innerHTML = "";
document.getElementById("incomeCall").style.display = "none";
}
if (msg["type"] == "call_decline"){
document.getElementById("outcomeCall").innerHTML = "";
document.getElementById("outcomeCall").style.display = "none";
}
if (msg["type"] == "call_answer"){
document.getElementById("outcomeCall").innerHTML = "";
document.getElementById("outcomeCall").style.display = "none";
document.getElementById("conversation").style.display = "block";
startWebRTC(msg["from"],true);
}
if(msg["type"] == "answer"){
peer.HandleAnswer(msg);
}
if (msg["type"] == "offer"){
console.log(TAG, "call peer.HandleOffer 1");
if(peer != null){
console.log(TAG, "call peer.HandleOffer 2");
peer.HandleOffer(msg);
}
}
if (msg["type"] == "candidate"){
peer.OnRemoteIceCandidateFunc(msg);
}
if (msg["type"] == "conversation_stop"){
document.getElementById("conversation").style.display = "none";
if(peer!==null){
peer.Stop();
}
peer = null;
delete peer;
}
});
signaling.connect();
}
}
function disconnect(){
signaling.disconnect();
}
function sendEcho(){
signaling.sendEcho();
}
function sendCallRequest(){
signaling.sendCallRequest(toId);
document.getElementById("outcomeCall").style.display = "block";
document.getElementById("outcomeCallInfo").innerHTML = "Calling: " + toId;
}
function stopCallRequest(){
signaling.sendCallStop(toId);
document.getElementById("outcomeCall").innerHTML = "";
document.getElementById("outcomeCall").style.display = "none";
}
function acceptIncomeCall(){
document.getElementById("incomeCall").innerHTML = "";
document.getElementById("incomeCall").style.display = "none";
document.getElementById("conversation").style.display = "block";
startWebRTC(toId,false);
}
function rejectIncomeCall(){
signaling.sendCallDecline(toId);
document.getElementById("incomeCall").innerHTML = "";
document.getElementById("incomeCall").style.display = "none";
}
function conversationStop(){
signaling.sendConversationStop(toId);
document.getElementById("conversation").style.display = "none";
if(peer!==null){
peer.Stop();
}
peer = null;
delete peer;
}
function startWebRTC(remoteId,isInitiator){
console.log(TAG + " startWebRTC... ");
peer = new WebRtcPeer(localVideo, remoteVideo, signaling, myId);
peer.remoteId = remoteId;
peer.Start(isInitiator);
}
function addUser1(){
localStorage.setItem("myId", "User1");
localStorage.setItem("toId", "User2");
}
function addUser2(){
localStorage.setItem("myId", "User2");
localStorage.setItem("toId", "User1");
}