I tried webRTC video conference with peerJS and succeeded in one-to-one conference, i need some assistance to take forward this for multiparty video conference, here i try to explain what i did please assist from where i struck
here i am posting my full code so that anyone can use by modifying few info,
INTENSION
- Alice login and calls to Bob
- Bob Joins Alice Call
- Alice calls Carole (using Add Call Button)
- Carole Joins Alice Call
- Create Conference between Alice, Bob and Carole(using Join Call button)
achived
- Alice login and calls to Bob
- Bob Joins Alice Call
- Alice calls Carole
- Carole Joins Alice
mycase
- Signup and created Alice.
- Alice logins. goes to CALLS using navigation.
- creates Bob and Carole using Add contact.
- Goes to Phone book made call to BOB.
- Bob joined Alice.
- Alice made another call to Carole using add call.
- Carole joins Alice.
- Alice has bob and carole where bob and carole missing each other.
- yet to merge their streams!
PENDING & need Assistance
- Create Conference between Alice, Bob and Carole when i click on join conference bob and carole too should have alice
how to make conference between Alice, Bob and Carole ?
/*-----------------
indexedDB
------------------*/
var iDB;
const openiDB = indexedDB.open('webRTC',1)
openiDB.onupgradeneeded = function(){
iDB = openiDB.result
if(!iDB.objectStoreNames.contains('contacts')){
iDB.createObjectStore('contacts',{keyPath:'mobile',unique:true})
}
if(!iDB.objectStoreNames.contains('callLog')){
iDB.createObjectStore('callLog',{keyPath:'id',autoIncrement:true})
}
if(!iDB.objectStoreNames.contains('chatLog')){
iDB.createObjectStore('chatLog',{keyPath:'mobile'})
}
}
openiDB.onsuccess = function(){
iDB = openiDB.result
}
openiDB.onerror = function(){
console.log(openiDB.error)
}
/*-----------------
jQuery
------------------*/
$(document).ready(function(){
/*-----------------
functions
------------------*/
function gIndex(){
$("body").append(
$("<footer>").text("2020 All rights reserved to SIKANDAR")
)
}
function uIndex(){
$("main").empty().append(
$("<div>").attr('class','error'),
$("<article>").attr('class','welCome').append(
$("<h2>").attr('class','aH2').text("Hello "+user.fName),
$("<aside>").attr('class','msg')
),
$("<nav>").append(
$("<span>").attr({'class':'navIcon','id':'meetings'}).text("MEETINGS"),
$("<span>").attr({'class':'navIcon','id':'calls'}).text("CALLS"),
$("<span>").attr({'id':'logo'}).text("HOME"),
$("<span>").attr({'class':'navIcon','id':'chats'}).text("CHATS"),
$("<span>").attr({'class':'navIcon','id':'settings'}).text("MENU")
),
$("<section>").attr('class','modal').append(
$("<span>").attr('class','mClose').text("X"),
$("<div>").attr('class','mWrap').append(
$("<aside>").attr('class','contacts').append(
$("<div>").attr('class','formContact'),
$("<div>").attr('class','showContacts')
),
$("<aside>").attr('class','players').append(
$("<div>").attr('class','row').append(
$("<video playsinline muted>").attr({'controls':false,'id':'lCam','preload':'none'})
),
$("<div>").attr('class','row'),
$("<div>").attr('class','row2').append(
$("<button>").attr('id','aCall').text("ADD"),
$("<button>").attr('id','jCall').text("JOIN").prop('disabled',true),
$("<button>").attr('id','eCall').text("END")
)
)
),
),
$("<section>").attr('class','iScreen').append()
)
$('.modal,.contacts,.players,.iScreen,.error').hide()
}
function lCamCheck(cT,iCall){
let lCam = $("#lCam")[0]
switch(cT){
case 'incoming':{
switch(lCam.srcObject){
case null:{
navigator.mediaDevices.getUserMedia(constraints).then(stream=>{
lCam.srcObject = stream;
iCall.answer(stream)
lCam.play()
}).catch(error=>console.error(error))
break;
}
default:{
iCall.answer(lCam.srcObject)
break;
}
}
break;
}
case 'outgoing':{
switch(lCam.srcObject){
case null:{
navigator.mediaDevices.getUserMedia(constraints).then(stream=>{
lCam.srcObject = stream;
let outGoing = socket.call(iCall,stream)
lCam.play()
outGoing.on('stream',rStream=>{
rCamCheck(iCall,rStream)
$("button[value='"+iCall+"']").prop('disabled',true)
$(".players").show()
},err=>console.error(err))
addLog(iCall,'outgoing')
}).catch(error=>console.error(error))
break;
}
default:{
let outGoing = socket.call(iCall,lCam.srcObject)
lCam.play()
outGoing.on('stream',rStream=>{
rCamCheck(iCall,rStream)
$("button[value='"+iCall+"']").prop('disabled',true)
},err=>console.error(err))
addLog(iCall,'outgoing')
break;
}
}
break;
}
}
}
function rCamCheck(m,rS){
let rCam = $("video[name='"+m+"']")[0]
if(!rCam){
$(".players .row:nth-child(2)").append(
$("<video playinline>").attr({'class':'rCam','name':m,'controls':false,'preload':'none'})
)
$("video[name='"+m+"']")[0].srcObject = rS
$("video[name='"+m+"']")[0].play()
}else{ // function is repeating two times hence writing else
$("video[name='"+m+"']")[0].pause()
//$("video[name='"+m+"']")[0].srcObject = rS
$("video[name='"+m+"']")[0].play()
console.log(socket)
}
}
function addLog(m,t){
let dt = new Date()
let log = {
'date' : dt.toLocaleDateString('en-CA'),
'time' : dt.toLocaleTimeString('en-CA',{hour12:false}),
'mobile': m,
'type' : t
}
let addLog = iDB.transaction(["callLog"],'readwrite').objectStore("callLog").add(log)
addLog.onerror = function(){
console.error(addLog.error)
}
}
function showLog(){
let sLog = iDB.transaction(["callLog"]).objectStore("callLog").getAll()
sLog.onsuccess = function(){
if(sLog.result.length>0){
$(".callLog").empty().append(
$("<div>").attr('class','row1').append(
$("<span>").attr('class','cSpan').text("DATE"),
$("<span>").attr('class','cSpan').text("TIME"),
$("<span>").attr('class','cSpan').text("MOBILE"),
$("<span>").attr('class','cSpan').text("TYPE")
)
)
$.each(sLog.result,function(k,v){
$("<div>").attr('class','row1').append(
$("<span>").attr('class','cSpan').text(v.date),
$("<span>").attr('class','cSpan').text(v.time),
$("<span>").attr('class','cSpan').text(v.mobile),
$("<span>").attr('class','cSpan').text(v.type)
).appendTo(".callLog")
})
}else{
$(".callLog").empty().append(
$("<div>").attr('class','row1').append(
$("<span>").attr('class','cSpan').text("DATE"),
$("<span>").attr('class','cSpan').text("TIME"),
$("<span>").attr('class','cSpan').text("MOBILE"),
$("<span>").attr('class','cSpan').text("TYPE")
),
$("<div>").attr('class','row').text("No Call Records")
)
}
}
sLog.onerror = function(){
console.log(sLog.error)
}
}
function phBook(){
let lCNT = iDB.transaction(["contacts"]).objectStore("contacts").getAll()
lCNT.onsuccess = function(){
$(".showContacts").empty().append(
$("<div>").attr('class','row2').append(
$("<span>").text("DP"),$("<span>").text("NAME"),$("<span>").text("CALL")
)
)
if(lCNT.result.length>0){
$.each(lCNT.result,function(k,v){
$(".showContacts").append(
$("<div>").attr('class','row2').append(
$("<img>").attr({'alt':'DP'}),
$("<span>").text(v.fName),
$("<button>").attr({'value':v.mobile,'class':'vCall'}).text("CALL")
)
)
})
}else{
$(".showContacts").append(
$("<div>").attr('class','row').text("No Contacts")
)
}
}
lCNT.onerror = function(){
console.error(lCNT.error)
}
}
function showLogin(){
$("main").append(
$("<article>").append(
$("<aside>").attr('class','login').append(
$("<fieldset>").append(
$("<legend>").text("User Login"),
$("<form>").attr('id','formLogin').append(
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'text','name':'lMobile','placeholder':'Enter Mobile Number',
'pattern':'[0-9]{10}','title':'Enter 10 digit mobilenumbers without country code'
}).prop('required',true),
$("<label>").attr('for','lMobile').text("*")
),
$("<div>").attr('class','row').append(
$("<input>").attr({'type':'submit','value':'LOGIN'}),
$("<input>").attr({'type':'button','name':'signUP','value':'SIGNUP'})
)
)
)
),
$("<aside>").attr('class','signup').append(
$("<fieldset>").append(
$("<legend>").text("User Registration"),
$("<form>").attr('id','formSignup').append(
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'text','name':'fName','placeholder':'Enter First Name'
}).prop('required',true),
$("<label>").attr('for','fName').text("*")
),
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'text','name':'lName','placeholder':'Enter Last Name'
}).prop('required',true),
$("<label>").attr('for','lName').text("*")
),
$("<div>").attr('class','row').append(
$("<input>").attr({'type':'email','name':'email','placeholder':'Enter e-Mail Id'}),
$("<label>").attr('for','email').text("*")
),
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'tel','name':'mobile','placeholder':'Enter Mobile Number',
'pattern':'[0-9]{10}','title':'Enter 10 digit mobile number with out country code'
}).prop('required',true),
$("<label>").attr('for','mobile').text("*")
),
$("<div>").attr('class','row').append(
$("<input>").attr({'type':'submit','value':'REGISTER'}),
$("<input>").attr({'type':'reset','value':'reset'})
)
)
)
)
)
)
$(".signup").hide()
}
/*-----------------
appShell
------------------*/
let user;let uAuth = localStorage.getItem('uAuth');
if(typeof(user)=="undefined"){
user = JSON.parse(localStorage.getItem('user'))
}
let iceServers = {
'iceServers':[{'urls':'stun:stun.l.google.com:19302'},{'urls':'stun:stun1.l.google.com:19302'}]
}
//console.log(navigator.mediaDevices.getSupportedConstraints())
let constraints = {
'video':{'width':640,'height':480,'frameRate':{'max':24}},
'audio':{'echoCancellation':true,'noiseSuppression':true,'sampleSize':8}
}
let socket; let peerJS = {'host':'localhost','port':9000,'path':'/myapp','config':iceServers};
switch(uAuth){
case null:{
gIndex();
showLogin()
break;
}
case 'true':{
uIndex()
socket = new Peer(user.mobile,peerJS)
socket.on('open',function(){
console.log(socket.id+" Connceted")
})
socket.on('error',function(error){
$(".error").text(error.message).show()
//$(".aH1").css('color','firebrick')
let lCam = $("#lCam")[0];let rCams = $("video")
lCam.srcObject.getTracks().forEach(track=>{track.stop();$(".modal").hide()})
if(rCams.length>1){
let rCam = $("video")
rCam[1].srcObject.getTracks().forEach(track=>track.stop())
}
})
socket.on('call',async function(inComing){
$('.iScreen').show()
await lCamCheck('incoming',inComing)
await phBook()
await inComing.on('stream',rStream=>{
rCamCheck(inComing.peer,rStream)
$(".modal,.players").show()
$("button[value='"+inComing.peer+"']").prop('disabled',true)
},err=>console.error(err))
await addLog(inComing.peer,'incoming')
})
}
}
$(document).on('submit','form',function(e){
e.preventDefault()
})
$(document).on('click','input[name="signUP"]',function(){
$(".login").hide(),
$(".signup").show()
})
$(document).on('submit','#formSignup',async function(){
let nUser = await {
fName : $("input[name='fName']").val(),
lName : $("input[name='lName']").val(),
email : $("input[name='email']").val(),
mobile : $("input[name='mobile']").val()
}
await localStorage.setItem('user',JSON.stringify(nUser))
location.reload()
})
$(document).on('submit','#formLogin',function(){
let mobile = $("input[name='lMobile']").val();
switch(user){
case null:{
$("input[name='lMobile']").val("")
$("label[for='lMobile']").text(" please signup").css('color','firebrick')
break;
}
default:{
if(mobile == user.mobile){
localStorage.setItem('uAuth',true)
location.reload()
}else{
$("input[name='lMobile']").val("")
$("label[for='lMobile']").text(" re-check mobile").css('color','firebrick')
}
}
}
})
$(document).on('click','.navIcon',function(){
let text = $(this).attr('id')
$("article").remove()
$("<article>").empty().attr("class",text).append(
$("<h2>").attr('class','aH2').text(text.toUpperCase())
).insertBefore("nav")
})
$(document).on('click','#calls',function(){
$(".calls").append(
$("<aside>").append(
$("<div>").attr('class','row2').append(
$("<img>").attr({
'alt':'addCNT','src':'assets/addContact.svg','type':'image/svg+xml','id':'aCNT','class':'cOPT'
}),
$("<img>").attr({
'alt':'phBook','src':'assets/phBook.svg','type':'image/svg+xml','id':'phBook','class':'cOPT'
})
)
),
$("<aside>").attr('class','callLog').append(
$("<h3>").attr('class','aH3')
)
)
showLog()
})
$(document).on('click','#aCNT',function(){
$(".showContacts").hide()
$(".formContact").empty().append(
$("<fieldset>").append(
$("<legend>").text("ADD CONTACT"),
$("<form>").attr('id','formCNT').append(
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'text','name':'fName','placeholder':'Enter First Name'
}).prop('required',true),
$("<label>").attr('for','fName')
),
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'text','name':'lName','placeholder':'Enter Last Name'
}).prop('required',true),
$("<label>").attr('for','lName')
),
$("<div>").attr('class','row').append(
$("<input>").attr({
'type':'tel','name':'mobile','placeholder':'Enter Mobile Number',
'pattern':'[0-9]{10}','title':'Enter 10 digit mobile number with out country code'
}).prop('required',true),
$("<label>").attr('for','mobile')
),
$("<div>").attr('class','row').append(
$("<input>").attr({'type':'submit','value':'ADD'}),
$("<input>").attr({'type':'reset','value':'reset'})
)
)
)
)
$(".modal,.contacts").show()
})
$(document).on('submit','#formCNT',function(){
let contact = {
fName: $("input[name='fName']").val(),
lName: $("input[name='lName']").val(),
mobile: $("input[name='mobile']").val()
}
let aCNT = iDB.transaction(["contacts"],'readwrite').objectStore("contacts").put(contact)
aCNT.onsuccess = function(){
$(".formContact").empty()
$(".modal,.contacts").hide()
}
aCNT.onerror = function(){
}
})
$(document).on('click','#phBook',function(){
$(".modal,.contacts,.showContacts").show()
phBook()
})
$(document).on('click','.mClose',function(){
$(".modal").hide()
})
$(document).on('click','.vCall',function(){
$(".contacts").hide()
lCamCheck('outgoing',$(this).val())
//check rcam from here if possible
})
$(document).on('click','#aCall',function(){
$(".contacts").toggle()
})
$(document).on('click','#eCall',function(){
location.reload(true)
})
})
html,body{margin: 0;padding: 0;background-color: silver;}
header{background-color: teal;text-align: center;box-shadow: 0 10px 8px black;}
.aH1{margin: auto;}
.aH2{margin: auto 10px;}
main{display: flex; flex-direction: column;margin-top: 20px;}
article{display: flex;flex-direction: column;}
aside{display: flex;flex-direction: column;padding: 5px;}
.row{display: flex; flex-direction: row;justify-content: center;margin:5px;}
.row>input{margin:5px}
.row1{display: flex;justify-content: space-around;}
.row2{display: flex;justify-content: space-between;margin:5px 0}
.cOPT{height:5vh}
.error{border-radius: 4px;border:2px dashed firebrick; background-color: rgba(0,0,0,0.6);color: white;text-align: center;}
nav{display: flex;align-items: center;position: fixed;
bottom: 0;width: 100vw;justify-content: space-around;background-color: teal;border-top: 1px solid black;}
.navIcon{height:5.4vh}
video{width:30vw;transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: rotateZ(1turn);-webkit-transform: rotateZ(1turn);}
.rCam{margin:5px}
footer{display: flex; justify-content: center;position: fixed;bottom: 0;width: 100vw;}
.modal{position: fixed;top: 0;left: 0;width: 100vw;display: flex;flex-direction: column;padding: 0.5%;
background-color: rgba(0,0,0,0.6);height: 100vh;z-index: 1;justify-content: flex-start}
.mClose{color: red;text-align: right;cursor: default;font-size: 1.5em;}
.mWrap{color:white;overflow-y: scroll;flex-direction: column;width:99vw;margin-bottom:5.4vh}
.players>div:nth-child(3){flex-flow:row-wrap;}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="google" content="notranslate">
<meta name="description" content="webRTC video social networking">
<meta name="author" content="Sikandar">
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/peerjs.min.js"></script>
<title>webRTC</title>
</head>
<body>
<header><h1 class="aH1">webRTC</h1></header>
<main></main>
</body>
</html>