EricDavies/zoran.html

## zoran.html
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>Zoran test</title>
        <link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
        <script type="text/javascript" src="zoran.js"></script>
    </head>
    <body onload="connectWebRTC();">
        <h1> Other clients</h1>
        <div id="otherClients"></div>
        <button id="acceptButton" disabled="disabled" onclick="invokeDoAnswer();">Accept call</button>
        <h1>Videos</h1>
          <video autoplay="autoplay" width="320" height="160" id="selfVideo" muted="muted"  ></video>
          <br>
         <video autoplay="autoplay" id="callerVideo" width="320" height="160" style="border: 1px solid blue" ></video>
         <video autoplay="autoplay" id="callerVideo2" width="320" height="160" style="border: 1px solid red"></video>
    </body>
</html>

## zoran.js
var selfEasyrtcid = "";
var haveSelfVideo = false;
var webrtcConntactList = new Array();
var conference_mode = true;
var participants = new Array();
var auto_accept_id;

function connectWebRTC() {
    console.log("Connecting to webrtc....");
    // easyrtc.setSocketUrl("https://xxxxxxxxxxxxxxxxxx:8443");
    //  easyrtc.setVideoDims(640, 360);
    easyrtc.enableAudio(true);
    easyrtc.enableVideo(true);
    //  easyrtc.enableDataChannels(true);
    easyrtc.enableDebug(false);
    easyrtc.setRoomOccupantListener(convertListToButtons);
    easyrtc.connect("easyrtc.audioVideo", loginSuccess, loginFailure);

}

function clearConnectList() {
    var otherClientDiv = document.getElementById('otherClients');
    while (otherClientDiv.hasChildNodes()) {
        otherClientDiv.removeChild(otherClientDiv.lastChild);
    }
}


function convertListToButtons(roomName, data, isPrimary) {
    clearConnectList();
    var otherClientDiv = document.getElementById('otherClients');
    for (var easyrtcid in data) {
        var button = document.createElement('button');
        button.onclick = function(easyrtcid) {
            return function() {
                performCall(easyrtcid);
            };
        }(easyrtcid);

        var label = document.createTextNode(easyrtc.idToName(easyrtcid));
        button.appendChild(label);
        otherClientDiv.appendChild(button);
    }
}


function setUpMirror() {
    if (!haveSelfVideo) {
        var selfVideo = document.getElementById("selfVideo");
        easyrtc.setVideoObjectSrc(selfVideo, easyrtc.getLocalStream());
        selfVideo.muted = true;
        haveSelfVideo = true;
    }
}

function performCall(otherEasyrtcid) {
    var acceptedCB = function(accepted, easyrtcid) {
        if (!accepted) {
            console.log("call to " + otherEasyrtcid + " not accepted");
        }
        else {
            participants.push(otherEasyrtcid);
            console.log("call to " + otherEasyrtcid + " was accepted");
        }
    };

    var successCB = function() {
    };

    var failureCB = function() {
        console.log("call failed");
    };

    easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
}

function loginSuccess(easyrtcId) {
    selfEasyrtcid = easyrtcId;
    console.log("Logged to webrtc. I am " + easyrtc.cleanId(easyrtcId));
//    easyrtc.initMediaSource(
//            function() {
//                setUpMirror();
//            },
//            function(errorCode, errorText) {
//                console.log("didn't get local media");
//            });
}

function loginFailure(errorCode, message) {
    console.log("Webrtc connection error. Code: " + errorCode + " ,message:" + message);
}

function disconnect() {
    console.log('Logged off from webrtc');
    easyrtc.disconnect();
    clearConnectList();
    easyrtc.setVideoObjectSrc(document.getElementById('selfVideo'), "");
}

easyrtc.setStreamAcceptor(function(easyrtcid, stream) {
    setUpMirror();
    if (easyrtc.getConnectionCount() == 2) {
        var video2 = document.getElementById('callerVideo2');
        easyrtc.setVideoObjectSrc(video2, stream);
        console.log("Receiving one more video stream, from " + easyrtcid);
        if (conference_mode == true) {
            connectOtherPeers();
        }
    } else if (easyrtc.getConnectionCount() == 1) {
        var video = document.getElementById('callerVideo');
        easyrtc.setVideoObjectSrc(video, stream);
        console.log("Receiving video from " + easyrtcid);
    }
});


var acceptTheCall;

easyrtc.setAcceptChecker(function(easyrtcid, callback) {
    var acceptButton = document.getElementById("acceptButton");
    acceptTheCall = function(wasAccepted) {
        callback(wasAccepted);
        participants.push(easyrtcid);
        callerPending = null;
        acceptButton.disabled = true;
    };

    callerPending = easyrtcid;
    if (auto_accept_id == easyrtcid) {
        acceptTheCall(true);
        auto_accept_id = "";
    } else if (easyrtc.getConnectionCount() == 0) {
        acceptButton.disabled = false;
        console.log("incoming from " + easyrtcid);
    } else if (easyrtc.getConnectionCount() == 1) {
        acceptButton.disabled = false;
        console.log("incoming from " + easyrtcid);
    } else {
        acceptTheCall(false);
        console.log("Missed Call", "You have missed call from " + easyrtc.idToName(easyrtcid) + "<br><br><br><br><br>", '<button class="hangup_btn" onclick="VlClient.hide_notification();"><span>OK</span></button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="answer_btn" onclick="VlClient.hide_notification();performCall(\'' + easyrtcid + '\')"><span>Call ' + easyrtc.idToName(easyrtcid) + '</span></button>');
    }
});

function invokeDoAnswer() {
    acceptTheCall(true);
}


//conference specific code

function connectOtherPeers() {
    conference_mode = false;

    //
    easyrtc.sendPeerMessage(participants[1], 'AUTO_ACCEPT_CONF', {accept: participants[0]},
    function(msgType, msgBody) {
        console.log("Message was sent to " + participants[1]);
        easyrtc.sendPeerMessage(participants[0], 'INIT_CONF', {call: participants[1]},
        function(msgType, msgBody) {
            console.log("Message was sent to " + participants[0]);
        },
                function(errorCode, errorText) {
                    console.log("Error sending message to" + participants[0] + " : " + errorText);
                });

    },
            function(errorCode, errorText) {
                console.log("Error sending message to" + participants[1] + " : " + errorText);
            });
}

easyrtc.setPeerListener(function(easyrtcid, msgType, msgData, targeting) {
    console.log("From " + easyrtcid + ": " + JSON.stringify(msgData));
    conference_mode = false;
    var acceptedCB = function(accepted, easyrtcid) {
        if (!accepted) {
            console.log("Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");
        } else {
            console.log('Add to conference accepted accepted');
        }
    };

    var successCB = function() {
        console.log('Add to conference success');
    };

    var failureCB = function() {
        console.log('Failed add to conference');
    };

    easyrtc.call(msgData.call, successCB, failureCB, acceptedCB);

}, 'INIT_CONF');

easyrtc.setPeerListener(function(easyrtcid, msgType, msgData, targeting) {
    conference_mode = false;
    console.log("From " + easyrtcid + ": " + JSON.stringify(msgData));
    auto_accept_id = msgData.accept;
}, 'AUTO_ACCEPT_CONF');
	<!DOCTYPE html>
	<!--
	To change this license header, choose License Headers in Project Properties.
	To change this template file, choose Tools \| Templates
	and open the template in the editor.
	-->
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Zoran test</title>
	<link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
	<script src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
	<script type="text/javascript" src="zoran.js"></script>
	</head>
	<body onload="connectWebRTC();">
	<h1> Other clients</h1>
	<div id="otherClients"></div>
	<button id="acceptButton" disabled="disabled" onclick="invokeDoAnswer();">Accept call</button>
	<h1>Videos</h1>
	<video autoplay="autoplay" width="320" height="160" id="selfVideo" muted="muted" ></video>
	<br>
	<video autoplay="autoplay" id="callerVideo" width="320" height="160" style="border: 1px solid blue" ></video>
	<video autoplay="autoplay" id="callerVideo2" width="320" height="160" style="border: 1px solid red"></video>
	</body>
	</html>
	var selfEasyrtcid = "";
	var haveSelfVideo = false;
	var webrtcConntactList = new Array();
	var conference_mode = true;
	var participants = new Array();
	var auto_accept_id;

	function connectWebRTC() {
	console.log("Connecting to webrtc....");
	// easyrtc.setSocketUrl("https://xxxxxxxxxxxxxxxxxx:8443");
	// easyrtc.setVideoDims(640, 360);
	easyrtc.enableAudio(true);
	easyrtc.enableVideo(true);
	// easyrtc.enableDataChannels(true);
	easyrtc.enableDebug(false);
	easyrtc.setRoomOccupantListener(convertListToButtons);
	easyrtc.connect("easyrtc.audioVideo", loginSuccess, loginFailure);

	}

	function clearConnectList() {
	var otherClientDiv = document.getElementById('otherClients');
	while (otherClientDiv.hasChildNodes()) {
	otherClientDiv.removeChild(otherClientDiv.lastChild);
	}
	}


	function convertListToButtons(roomName, data, isPrimary) {
	clearConnectList();
	var otherClientDiv = document.getElementById('otherClients');
	for (var easyrtcid in data) {
	var button = document.createElement('button');
	button.onclick = function(easyrtcid) {
	return function() {
	performCall(easyrtcid);
	};
	}(easyrtcid);

	var label = document.createTextNode(easyrtc.idToName(easyrtcid));
	button.appendChild(label);
	otherClientDiv.appendChild(button);
	}
	}



	function setUpMirror() {
	if (!haveSelfVideo) {
	var selfVideo = document.getElementById("selfVideo");
	easyrtc.setVideoObjectSrc(selfVideo, easyrtc.getLocalStream());
	selfVideo.muted = true;
	haveSelfVideo = true;
	}
	}

	function performCall(otherEasyrtcid) {
	var acceptedCB = function(accepted, easyrtcid) {
	if (!accepted) {
	console.log("call to " + otherEasyrtcid + " not accepted");
	}
	else {
	participants.push(otherEasyrtcid);
	console.log("call to " + otherEasyrtcid + " was accepted");
	}
	};

	var successCB = function() {
	};

	var failureCB = function() {
	console.log("call failed");
	};

	easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
	}

	function loginSuccess(easyrtcId) {
	selfEasyrtcid = easyrtcId;
	console.log("Logged to webrtc. I am " + easyrtc.cleanId(easyrtcId));
	// easyrtc.initMediaSource(
	// function() {
	// setUpMirror();
	// },
	// function(errorCode, errorText) {
	// console.log("didn't get local media");
	// });
	}

	function loginFailure(errorCode, message) {
	console.log("Webrtc connection error. Code: " + errorCode + " ,message:" + message);
	}

	function disconnect() {
	console.log('Logged off from webrtc');
	easyrtc.disconnect();
	clearConnectList();
	easyrtc.setVideoObjectSrc(document.getElementById('selfVideo'), "");
	}

	easyrtc.setStreamAcceptor(function(easyrtcid, stream) {
	setUpMirror();
	if (easyrtc.getConnectionCount() == 2) {
	var video2 = document.getElementById('callerVideo2');
	easyrtc.setVideoObjectSrc(video2, stream);
	console.log("Receiving one more video stream, from " + easyrtcid);
	if (conference_mode == true) {
	connectOtherPeers();
	}
	} else if (easyrtc.getConnectionCount() == 1) {
	var video = document.getElementById('callerVideo');
	easyrtc.setVideoObjectSrc(video, stream);
	console.log("Receiving video from " + easyrtcid);
	}
	});



	var acceptTheCall;

	easyrtc.setAcceptChecker(function(easyrtcid, callback) {
	var acceptButton = document.getElementById("acceptButton");
	acceptTheCall = function(wasAccepted) {
	callback(wasAccepted);
	participants.push(easyrtcid);
	callerPending = null;
	acceptButton.disabled = true;
	};

	callerPending = easyrtcid;
	if (auto_accept_id == easyrtcid) {
	acceptTheCall(true);
	auto_accept_id = "";
	} else if (easyrtc.getConnectionCount() == 0) {
	acceptButton.disabled = false;
	console.log("incoming from " + easyrtcid);
	} else if (easyrtc.getConnectionCount() == 1) {
	acceptButton.disabled = false;
	console.log("incoming from " + easyrtcid);
	} else {
	acceptTheCall(false);
	console.log("Missed Call", "You have missed call from " + easyrtc.idToName(easyrtcid) + "<br><br><br><br><br>", '<button class="hangup_btn" onclick="VlClient.hide_notification();"><span>OK</span></button>      <button class="answer_btn" onclick="VlClient.hide_notification();performCall(\'' + easyrtcid + '\')"><span>Call ' + easyrtc.idToName(easyrtcid) + '</span></button>');
	}
	});

	function invokeDoAnswer() {
	acceptTheCall(true);
	}




	//conference specific code

	function connectOtherPeers() {
	conference_mode = false;

	//
	easyrtc.sendPeerMessage(participants[1], 'AUTO_ACCEPT_CONF', {accept: participants[0]},
	function(msgType, msgBody) {
	console.log("Message was sent to " + participants[1]);
	easyrtc.sendPeerMessage(participants[0], 'INIT_CONF', {call: participants[1]},
	function(msgType, msgBody) {
	console.log("Message was sent to " + participants[0]);
	},
	function(errorCode, errorText) {
	console.log("Error sending message to" + participants[0] + " : " + errorText);
	});

	},
	function(errorCode, errorText) {
	console.log("Error sending message to" + participants[1] + " : " + errorText);
	});
	}

	easyrtc.setPeerListener(function(easyrtcid, msgType, msgData, targeting) {
	console.log("From " + easyrtcid + ": " + JSON.stringify(msgData));
	conference_mode = false;
	var acceptedCB = function(accepted, easyrtcid) {
	if (!accepted) {
	console.log("Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");
	} else {
	console.log('Add to conference accepted accepted');
	}
	};

	var successCB = function() {
	console.log('Add to conference success');
	};

	var failureCB = function() {
	console.log('Failed add to conference');
	};

	easyrtc.call(msgData.call, successCB, failureCB, acceptedCB);

	}, 'INIT_CONF');

	easyrtc.setPeerListener(function(easyrtcid, msgType, msgData, targeting) {
	conference_mode = false;
	console.log("From " + easyrtcid + ": " + JSON.stringify(msgData));
	auto_accept_id = msgData.accept;
	}, 'AUTO_ACCEPT_CONF');