Created
September 3, 2014 15:53
-
-
Save EricDavies/cee0cf87a8bcc027f4fe to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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_audio_video_simple.js"></script> | |
</head> | |
<body onload="connect();"> | |
<!--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"> | |
<div id="connectControls"> | |
<div id="iam">Not yet connected...</div> | |
<br /> | |
<strong>Connected users:</strong> | |
<div id="otherClients"></div> | |
<input type="checkbox" id="enableCamera" | |
checked="checked" onclick="enableCamera(this.checked);"> | |
<label for="enableCamera">Enable camera</label> | |
</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>© 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var selfEasyrtcid = ""; | |
function connect() { | |
easyrtc.joinRoom("smurf"); | |
easyrtc.setVideoDims(640,480); | |
easyrtc.setRoomOccupantListener(convertListToButtons); | |
easyrtc.easyApp("easyrtc.audioVideoSimple", "selfVideo", ["callerVideo"], loginSuccess, loginFailure); | |
} | |
function clearConnectList() { | |
var otherClientDiv = document.getElementById('otherClients'); | |
while (otherClientDiv.hasChildNodes()) { | |
otherClientDiv.removeChild(otherClientDiv.lastChild); | |
} | |
} | |
function enableCamera(flag) { | |
console.log("checked value = " + flag); | |
easyrtc.enableCamera(flag); | |
} | |
function convertListToButtons (roomName, data, isPrimary) { | |
console.log("Calling convertListToButtons room=" + roomName); | |
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