Documentation: Minimal WebRTC App for Web Browser

<< 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");
}
				
			
Download full example code




HighDim GmbH
© 2022