open-easyrtc
Version:
Open-EasyRTC enables quick development of WebRTC
110 lines (97 loc) • 4.9 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
<title>EasyRTC Demo: Instant Messaging</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>
<link rel="stylesheet" type="text/css" href="js/prettify/prettify.css" />
<script type="text/javascript" src="js/prettify/loadAndFilter.js"></script>
<script type="text/javascript" src="js/prettify/jquery.min.js"></script>
<!--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_instant_messaging.js"></script>
<!--hide-->
<!-- Styles used within the demo -->
<style type="text/css">
#stuffToSend {width:300px;}
#sendMessageArea{
float:left;
width:400px;
padding-right:20px;
}
#sendMessageText{
width:100%;
}
#conversation {
height:300px;
border:solid 1px gray;
overflow-y:scroll;
}
</style>
<!--show-->
</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"><span class="menu_item">Local Demos</span></a>
<a class="menu_link" href="http://www.easyrtc.com/docs/"><span class="menu_item">Documentation</span></a>
<a class="menu_link" href="https://github.com/priologic/easyrtc/issues"><span class="menu_item">Github Support</span></a>
<a class="menu_link" href="http://www.easyrtc.com/"><span class="menu_item">Easyrtc.com</span></a>
</div>
<div id="main">
<!-- Main Content -->
<h1>EasyRTC Demo: Instant Messaging</h1>
<p>This application demonstrates text messaging using the easyrtc.sendDataWS method.
It should connect to the server upon start up, and display buttons for the other
peers running the same application.</p>
<p>To use it, enter a message into the text box on the left side of the page.
Then press one of the buttons for another peer to send the message to that peer.
The message should appear on the text box to the right on both this page, and that of the peer.</p>
<hr />
<h2>The Demo</h2>
<!--show-->
<div id="sendMessageArea">
<div id="iam">Obtaining ID...</div>
<textarea id="sendMessageText"></textarea>
<div id="otherClients"></div>
</div>
<div id="receiveMessageArea">
Received Messages:
<div id="conversation"></div>
</div>
<!--hide-->
<hr />
<h2>The Code</h2>
<h3>HTML</h3>
<pre id="prettyHtml" class="prettyprint linenums:1">
</pre>
<h3>JavaScript</h3>
<p>The contents of demo_instant_messaging.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>
<!--hide-->
<div id="footer">
<a href="https://github.com/open-easyrtc/open-easyrtc"><img id="logo_pb_easyrtc" src="../easyrtc/img/powered_by_easyrtc.png" height="60" width="200" alt="Powered By Open-EasyRTC" /></a>
<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>