EricDavies/demo_audio_video.html

## demo_audio_video.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
        <title>EasyRTC Demo: Audio and Video</title>
        <link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />

        <!--hide-->
        <link rel="stylesheet" type="text/css" href="css/landing.css" />

        <!-- Prettify Code -->
        <script type="text/javascript" src="js/prettify/prettify.js"></script>
        <script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
        <script type="text/javascript" src="js/prettify/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />

        <!--show-->
        <!-- Assumes global locations for socket.io.js and easyrtc.js -->
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
        <script type="text/javascript" src="js/demo_audio_video.js"></script>

        <!--hide-->
        <!-- Styles used within the demo -->
        <style type="text/css">
            #demoContainer {
                position:relative;
            }
            #connectControls {
                float:left;
                width:250px;
                text-align:center;
                border: 2px solid black;
            }
            #otherClients {
                height:200px;
                overflow-y:scroll;
            }
            #selfVideo {
                height:225px;
                width:300px;
                float:left;
                border:1px solid gray;
                margin-left:10px;
            }
            #callerVideo {
                height:225px;
                width:300px;
                border:1px solid gray;
                margin-left:10px;
            }
            #acceptCallBox {
                display:none;
                z-index:2;
                position:absolute;
                top:100px;
                left:400px;
                border:red solid 2px;
                background-color:pink;
                padding:15px;
            }
        </style>
        <!--show-->
    </head>
    <body>
         <!--hide-->
        <div id="container">

            <div id="header">
                <a href="index.html"><img id="logo_easyrtc" src="images/easyrtc_logo.png" alt="EasyRTC" style="" /></a>
            </div>
            <div id="menu"><a class="menu_link" href="index.html"><div class="menu_item">Local Demos</div></a><a class="menu_link" href="https://github.com/priologic/easyrtc/tree/master/docs"><div class="menu_item">Documentation</div></a><a class="menu_link" href="https://groups.google.com/forum/#!forum/easyrtc"><div class="menu_item">Support: Discussion Group</div></a><a class="menu_link" href="http://www.easyrtc.com/"><div class="menu_item">EasyRTC.com</div></a></div>
            <div id="main">

                <!--hide-->
                <!-- Main Content -->
                <h1>EasyRTC Demo: Audio and Video</h1>

                <p>The application provides an audio-video chat where sharing of audio and video can be controlled individually before connection.</p>

                <p>To use it, press the Connect button.
                    You should see buttons representing other people using this demo.
                    Click one of those buttons to initiate a chat.</p>

                <hr />
                <h2>The Demo</h2>
                <!--show-->
                <div id="demoContainer">
                    <div id="connectControls">
                        <input type="checkbox" checked="checked" id="shareAudio" />Share audio
                        <input type="checkbox" checked="checked" id="shareVideo" />Share video<br />
                        <input type="checkbox" checked="checked" id="expectAudio" />Expect audio
                        <input type="checkbox" checked="checked" id="expectVideo" />Expect video<br />

                        <input type="checkbox" id="useFreshIce" onclick="easyrtc.setUseFreshIceEachPeerConnection(this.value);"/>Fresh Ice<br />
                        <button id="connectButton" onclick="connect()">Connect</button>
                        <button onclick="disconnect()">Disconnect</button>
                        <button id="hangupButton" disabled="disabled" onclick="hangup()">Hangup</button>
                        <div id="iam">Not yet connected...</div>
                        <br />
                        <strong>Connected users:</strong>
                        <div id="otherClients"></div>
                    </div>

                    <div id="videos">
                        <video autoplay="autoplay" id="selfVideo"  class="easyrtcMirror" muted="muted" volume="0"></video>
                        <video autoplay="autoplay" id="callerVideo"></video>
                        <div id="acceptCallBox"> <!-- Should be initially hidden using CSS -->
                            <div id="acceptCallLabel"></div>
                            <button id="callAcceptButton" >Accept</button> <button id="callRejectButton">Reject</button>
                        </div>
                    </div>
                </div>
                <!--hide-->
                <br style="clear:both;" />
                <hr />

                <h2>The Code</h2>
                <h3>HTML</h3>
                <pre  id="prettyHTML" class="prettyprint linenums:1">
                </pre>
                <h3>JavaScript</h3>
                <p>The contents of demo_audio_video.js:</p>
                <pre  id="prettyJS" class="prettyprint linenums:1">
                </pre>


                <!-- Runs the SyntaxHighlighter -->
                <script type="text/javascript">
                    loadAndFilter(window.location.href, "prettyHTML",2 );
                    loadAndFilter(getHelperPath("js"), "prettyJS", 2);
                </script>

                <!-- End Main Content -->

            </div>
            <div id="footer">
                <a href="http://www.priologic.com/?from=landing"><img id="logo_priologic" src="images/priologic_logo_white.png" height="40" width="150" alt="Created By Priologic Software Inc." /></a>
                <a href="http://www.easyrtc.com/?from=landing"><img id="logo_pb_easyrtc" src="/easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By EasyRTC" /></a>
                <p><em>&copy; 2014 - Priologic Software Inc., All Rights Reserved.</em></p>
                <p id="license">EasyRTC source code released under a BSD2 License. <a href="https://github.com/priologic/easyrtc/blob/master/LICENSE">See LICENSE file in project folder</a> for details.</p>
            </div>
        </div>
        <!--show-->
    </body>
</html>

## demo_audio_video.js
//
//Copyright (c) 2014, Priologic Software Inc.
//All rights reserved.
//
//Redistribution and use in source and binary forms, with or without
//modification, are permitted provided that the following conditions are met:
//
//    * Redistributions of source code must retain the above copyright notice,
//      this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above copyright
//      notice, this list of conditions and the following disclaimer in the
//      documentation and/or other materials provided with the distribution.
//
//THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
//AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
//IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
//ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
//LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
//CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
//SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
//INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
//CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
//ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
//POSSIBILITY OF SUCH DAMAGE.
//
var selfEasyrtcid = "";
var haveSelfVideo = false;

function disable(domId) {
    document.getElementById(domId).disabled = "disabled";
}


function enable(domId) {
    document.getElementById(domId).disabled = "";
}


function connect() {
  easyrtc.enableAudio(document.getElementById("shareAudio").checked);
  easyrtc.enableVideo(document.getElementById("shareVideo").checked);
  easyrtc.setRoomOccupantListener( convertListToButtons);
  easyrtc.initMediaSource(
		  function(){        // success callback
			  var selfVideo = document.getElementById("selfVideo");
			  easyrtc.setVideoObjectSrc(selfVideo, easyrtc.getLocalStream());
			  easyrtc.connect("easyrtc.audioVideo", loginSuccess, loginFailure);
		  },
		  loginFailure
	);
}


function hangup() {
    easyrtc.hangupAll();
    disable('hangupButton');
}


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


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

        var label = document.createTextNode("Call " + 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) {
    easyrtc.hangupAll();
    var acceptedCB = function(accepted, easyrtcid) {
        if( !accepted ) {
            easyrtc.showError("CALL-REJECTEd", "Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");
            enable('otherClients');
        }
    };

    var successCB = function() {
        setUpMirror();
        enable('hangupButton');
    };
    var failureCB = function() {
        enable('otherClients');
    };
    easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
    enable('hangupButton');
}


function loginSuccess(easyrtcid) {
    disable("connectButton");
  //  enable("disconnectButton");
    enable('otherClients');
    selfEasyrtcid = easyrtcid;
    document.getElementById("iam").innerHTML = "I am " + easyrtc.cleanId(easyrtcid);
    easyrtc.showError("noerror", "logged in");
}


function loginFailure(errorCode, message) {
    easyrtc.showError(errorCode, message);
}


function disconnect() {
  easyrtc.disconnect();
  document.getElementById("iam").innerHTML = "logged out";
  enable("connectButton");
  disable("disconnectButton");
  easyrtc.clearMediaStream( document.getElementById('selfVideo'));
  easyrtc.setVideoObjectSrc(document.getElementById("selfVideo"),"");
  easyrtc.closeLocalMediaStream();
  easyrtc.setRoomOccupantListener( function(){});
  clearConnectList();
}


easyrtc.setStreamAcceptor( function(easyrtcid, stream) {
    setUpMirror();
    var video = document.getElementById('callerVideo');
    easyrtc.setVideoObjectSrc(video,stream);
    enable("hangupButton");
});


easyrtc.setOnStreamClosed( function (easyrtcid) {
    easyrtc.setVideoObjectSrc(document.getElementById('callerVideo'), "");
    disable("hangupButton");
});


var callerPending = null;

easyrtc.setCallCancelled( function(easyrtcid){
    if( easyrtcid === callerPending) {
        document.getElementById('acceptCallBox').style.display = "none";
        callerPending = false;
    }
});


easyrtc.setAcceptChecker(function(easyrtcid, callback) {
    document.getElementById('acceptCallBox').style.display = "block";
    callerPending = easyrtcid;
    if( easyrtc.getConnectionCount() > 0 ) {
        document.getElementById('acceptCallLabel').innerHTML = "Drop current call and accept new from " + easyrtc.idToName(easyrtcid) + " ?";
    }
    else {
        document.getElementById('acceptCallLabel').innerHTML = "Accept incoming call from " + easyrtc.idToName(easyrtcid) + " ?";
    }
    var acceptTheCall = function(wasAccepted) {
        document.getElementById('acceptCallBox').style.display = "none";
        if( wasAccepted && easyrtc.getConnectionCount() > 0 ) {
            easyrtc.hangupAll();
        }
        callback(wasAccepted);
        callerPending = null;
    };
    document.getElementById("callAcceptButton").onclick = function() {
        acceptTheCall(true);
    };
    document.getElementById("callRejectButton").onclick =function() {
        acceptTheCall(false);
    };
} );
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
	<title>EasyRTC Demo: Audio and Video</title>
	<link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />

	<!--hide-->
	<link rel="stylesheet" type="text/css" href="css/landing.css" />

	<!-- Prettify Code -->
	<script type="text/javascript" src="js/prettify/prettify.js"></script>
	<script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
	<script type="text/javascript" src="js/prettify/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />

	<!--show-->
	<!-- Assumes global locations for socket.io.js and easyrtc.js -->
	<script src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="/easyrtc/easyrtc.js"></script>
	<script type="text/javascript" src="js/demo_audio_video.js"></script>

	<!--hide-->
	<!-- Styles used within the demo -->
	<style type="text/css">
	#demoContainer {
	position:relative;
	}
	#connectControls {
	float:left;
	width:250px;
	text-align:center;
	border: 2px solid black;
	}
	#otherClients {
	height:200px;
	overflow-y:scroll;
	}
	#selfVideo {
	height:225px;
	width:300px;
	float:left;
	border:1px solid gray;
	margin-left:10px;
	}
	#callerVideo {
	height:225px;
	width:300px;
	border:1px solid gray;
	margin-left:10px;
	}
	#acceptCallBox {
	display:none;
	z-index:2;
	position:absolute;
	top:100px;
	left:400px;
	border:red solid 2px;
	background-color:pink;
	padding:15px;
	}
	</style>
	<!--show-->
	</head>
	<body>
	<!--hide-->
	<div id="container">

	<div id="header">
	<a href="index.html"><img id="logo_easyrtc" src="images/easyrtc_logo.png" alt="EasyRTC" style="" /></a>
	</div>
	<div id="menu"><a class="menu_link" href="index.html"><div class="menu_item">Local Demos</div></a><a class="menu_link" href="https://github.com/priologic/easyrtc/tree/master/docs"><div class="menu_item">Documentation</div></a><a class="menu_link" href="https://groups.google.com/forum/#!forum/easyrtc"><div class="menu_item">Support: Discussion Group</div></a><a class="menu_link" href="http://www.easyrtc.com/"><div class="menu_item">EasyRTC.com</div></a></div>
	<div id="main">

	<!--hide-->
	<!-- Main Content -->
	<h1>EasyRTC Demo: Audio and Video</h1>

	<p>The application provides an audio-video chat where sharing of audio and video can be controlled individually before connection.</p>

	<p>To use it, press the Connect button.
	You should see buttons representing other people using this demo.
	Click one of those buttons to initiate a chat.</p>

	<hr />
	<h2>The Demo</h2>
	<!--show-->
	<div id="demoContainer">
	<div id="connectControls">
	<input type="checkbox" checked="checked" id="shareAudio" />Share audio
	<input type="checkbox" checked="checked" id="shareVideo" />Share video<br />
	<input type="checkbox" checked="checked" id="expectAudio" />Expect audio
	<input type="checkbox" checked="checked" id="expectVideo" />Expect video<br />

	<input type="checkbox" id="useFreshIce" onclick="easyrtc.setUseFreshIceEachPeerConnection(this.value);"/>Fresh Ice<br />
	<button id="connectButton" onclick="connect()">Connect</button>
	<button onclick="disconnect()">Disconnect</button>
	<button id="hangupButton" disabled="disabled" onclick="hangup()">Hangup</button>
	<div id="iam">Not yet connected...</div>
	<br />
	<strong>Connected users:</strong>
	<div id="otherClients"></div>
	</div>

	<div id="videos">
	<video autoplay="autoplay" id="selfVideo" class="easyrtcMirror" muted="muted" volume="0"></video>
	<video autoplay="autoplay" id="callerVideo"></video>
	<div id="acceptCallBox"> <!-- Should be initially hidden using CSS -->
	<div id="acceptCallLabel"></div>
	<button id="callAcceptButton" >Accept</button> <button id="callRejectButton">Reject</button>
	</div>
	</div>
	</div>
	<!--hide-->
	<br style="clear:both;" />
	<hr />

	<h2>The Code</h2>
	<h3>HTML</h3>
	<pre id="prettyHTML" class="prettyprint linenums:1">
	</pre>
	<h3>JavaScript</h3>
	<p>The contents of demo_audio_video.js:</p>
	<pre id="prettyJS" class="prettyprint linenums:1">
	</pre>


	<!-- Runs the SyntaxHighlighter -->
	<script type="text/javascript">
	loadAndFilter(window.location.href, "prettyHTML",2 );
	loadAndFilter(getHelperPath("js"), "prettyJS", 2);
	</script>

	<!-- End Main Content -->

	</div>
	<div id="footer">
	<a href="http://www.priologic.com/?from=landing"><img id="logo_priologic" src="images/priologic_logo_white.png" height="40" width="150" alt="Created By Priologic Software Inc." /></a>
	<a href="http://www.easyrtc.com/?from=landing"><img id="logo_pb_easyrtc" src="/easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By EasyRTC" /></a>
	<p><em>© 2014 - Priologic Software Inc., All Rights Reserved.</em></p>
	<p id="license">EasyRTC source code released under a BSD2 License. <a href="https://github.com/priologic/easyrtc/blob/master/LICENSE">See LICENSE file in project folder</a> for details.</p>
	</div>
	</div>
	<!--show-->
	</body>
	</html>
	//
	//Copyright (c) 2014, Priologic Software Inc.
	//All rights reserved.
	//
	//Redistribution and use in source and binary forms, with or without
	//modification, are permitted provided that the following conditions are met:
	//
	// * Redistributions of source code must retain the above copyright notice,
	// this list of conditions and the following disclaimer.
	// * Redistributions in binary form must reproduce the above copyright
	// notice, this list of conditions and the following disclaimer in the
	// documentation and/or other materials provided with the distribution.
	//
	//THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
	//AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
	//IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
	//ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
	//LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
	//CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
	//SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
	//INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
	//CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
	//ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
	//POSSIBILITY OF SUCH DAMAGE.
	//
	var selfEasyrtcid = "";
	var haveSelfVideo = false;

	function disable(domId) {
	document.getElementById(domId).disabled = "disabled";
	}


	function enable(domId) {
	document.getElementById(domId).disabled = "";
	}


	function connect() {
	easyrtc.enableAudio(document.getElementById("shareAudio").checked);
	easyrtc.enableVideo(document.getElementById("shareVideo").checked);
	easyrtc.setRoomOccupantListener( convertListToButtons);
	easyrtc.initMediaSource(
	function(){ // success callback
	var selfVideo = document.getElementById("selfVideo");
	easyrtc.setVideoObjectSrc(selfVideo, easyrtc.getLocalStream());
	easyrtc.connect("easyrtc.audioVideo", loginSuccess, loginFailure);
	},
	loginFailure
	);
	}


	function hangup() {
	easyrtc.hangupAll();
	disable('hangupButton');
	}


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


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

	var label = document.createTextNode("Call " + 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) {
	easyrtc.hangupAll();
	var acceptedCB = function(accepted, easyrtcid) {
	if( !accepted ) {
	easyrtc.showError("CALL-REJECTEd", "Sorry, your call to " + easyrtc.idToName(easyrtcid) + " was rejected");
	enable('otherClients');
	}
	};

	var successCB = function() {
	setUpMirror();
	enable('hangupButton');
	};
	var failureCB = function() {
	enable('otherClients');
	};
	easyrtc.call(otherEasyrtcid, successCB, failureCB, acceptedCB);
	enable('hangupButton');
	}


	function loginSuccess(easyrtcid) {
	disable("connectButton");
	// enable("disconnectButton");
	enable('otherClients');
	selfEasyrtcid = easyrtcid;
	document.getElementById("iam").innerHTML = "I am " + easyrtc.cleanId(easyrtcid);
	easyrtc.showError("noerror", "logged in");
	}


	function loginFailure(errorCode, message) {
	easyrtc.showError(errorCode, message);
	}


	function disconnect() {
	easyrtc.disconnect();
	document.getElementById("iam").innerHTML = "logged out";
	enable("connectButton");
	disable("disconnectButton");
	easyrtc.clearMediaStream( document.getElementById('selfVideo'));
	easyrtc.setVideoObjectSrc(document.getElementById("selfVideo"),"");
	easyrtc.closeLocalMediaStream();
	easyrtc.setRoomOccupantListener( function(){});
	clearConnectList();
	}


	easyrtc.setStreamAcceptor( function(easyrtcid, stream) {
	setUpMirror();
	var video = document.getElementById('callerVideo');
	easyrtc.setVideoObjectSrc(video,stream);
	enable("hangupButton");
	});



	easyrtc.setOnStreamClosed( function (easyrtcid) {
	easyrtc.setVideoObjectSrc(document.getElementById('callerVideo'), "");
	disable("hangupButton");
	});


	var callerPending = null;

	easyrtc.setCallCancelled( function(easyrtcid){
	if( easyrtcid === callerPending) {
	document.getElementById('acceptCallBox').style.display = "none";
	callerPending = false;
	}
	});


	easyrtc.setAcceptChecker(function(easyrtcid, callback) {
	document.getElementById('acceptCallBox').style.display = "block";
	callerPending = easyrtcid;
	if( easyrtc.getConnectionCount() > 0 ) {
	document.getElementById('acceptCallLabel').innerHTML = "Drop current call and accept new from " + easyrtc.idToName(easyrtcid) + " ?";
	}
	else {
	document.getElementById('acceptCallLabel').innerHTML = "Accept incoming call from " + easyrtc.idToName(easyrtcid) + " ?";
	}
	var acceptTheCall = function(wasAccepted) {
	document.getElementById('acceptCallBox').style.display = "none";
	if( wasAccepted && easyrtc.getConnectionCount() > 0 ) {
	easyrtc.hangupAll();
	}
	callback(wasAccepted);
	callerPending = null;
	};
	document.getElementById("callAcceptButton").onclick = function() {
	acceptTheCall(true);
	};
	document.getElementById("callRejectButton").onclick =function() {
	acceptTheCall(false);
	};
	} );