Skip to content

Instantly share code, notes, and snippets.

@EricDavies

EricDavies/demo_arun.html

Created May 12, 2015 15:59
Show Gist options
  • Save EricDavies/908ca6451dbd6a26d93e to your computer and use it in GitHub Desktop.
Save EricDavies/908ca6451dbd6a26d93e to your computer and use it in GitHub Desktop.
Download ZIP
javascript for disconnecting and reconnecting when using easyrtc.easyApp
Raw
demo_arun.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
<title>EasyRTC Demo: Simple Video+Audio</title>
<link rel="stylesheet" type="text/css" href="/easyrtc/easyrtc.css" />
<!--hide-->
<link rel="stylesheet" type="text/css" href="css/landing.css" />
<link rel="stylesheet" type="text/css" href="css/demo_audio_video_simple.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_arun.js"></script>
</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">
<!-- Main Content -->
<h1>EasyRTC Demo: Simple Video+Audio</h1>
<p>The application provides a simple audio-video chat using the easyrtc.easyApp method.</p>
<p>Connection is handled using an onload statement in the body. Requests are automatically accepted.<p>
<p>To hang-up on a call, hover your mouse over the upper right of the video, and click on the 'X' which appears at the top right of other person's video object.</p>
<hr />
<h2>The Demo</h2>
<!--show-->
<div id="demoContainer">
<button onclick="connect();">Connect</button>
<button onclick="disconnect();">Disconnect</button>
<div id="connectControls">
<div id="iam">Not yet connected...</div>
<br />
<strong>Connected users:</strong>
<div id="otherClients"></div>
</div>
<div id="videos">
<video autoplay="autoplay" class="easyrtcMirror" id="selfVideo" muted="muted" volume="0" ></video>
<div style="position:relative;float:left;">
<video autoplay="autoplay" id="callerVideo"></video>
</div>
<!-- each caller video needs to be in it's own div so it's close button can be positioned correctly -->
</div>
</div>
<!--hide-->
<br style="clear:both;" />
<hr />
<h2>The Code</h2>
<h3>HTML</h3>
<pre id="prettyHtml" class="prettyprint linenums:1">
</pre>
<h3>CSS</h3>
<p>In order to show the 'X' in the upper right corner, the callerVideo video tag must be in a div with relative positioning.:</p>
<pre id="prettyCSS" class="prettyprint linenums:1">
</pre>
<h3>JavaScript</h3>
<p>The contents of demo_audio_video_simple.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);
loadAndFilter(getHelperPath("css"), "prettyCSS", 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>
Raw
demo_arun.js
var selfEasyrtcid = "";
function connect() {
easyrtc.setVideoDims(640,480);
easyrtc.setRoomOccupantListener(convertListToButtons);
easyrtc.easyApp("easyrtc.audioVideoSimple", "selfVideo", ["callerVideo"], loginSuccess, loginFailure);
}
function disconnect() {
easyrtc.disconnect();
document.getElementById("iam").innerHTML = "I am disconnected";
}
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 performCall(otherEasyrtcid) {
easyrtc.hangupAll();
var successCB = function() {};
var failureCB = function() {};
easyrtc.call(otherEasyrtcid, successCB, failureCB);
}
function loginSuccess(easyrtcid) {
selfEasyrtcid = easyrtcid;
document.getElementById("iam").innerHTML = "I am " + easyrtc.cleanId(easyrtcid);
}
function loginFailure(errorCode, message) {
easyrtc.showError(errorCode, message);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment