open-easyrtc
Version:
Open-EasyRTC enables quick development of WebRTC
147 lines (127 loc) • 5.89 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
<title>EasyRTC Demo: Data Channel File-sharing</title>
<link rel="stylesheet" type="text/css" href="css/landing.css" />
<link rel="stylesheet" type="text/css" href="../easyrtc/easyrtc.css" />
<!--hide-->
<!-- 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="../easyrtc/easyrtc_ft.js"></script>
<script type="text/javascript" src="js/demo_data_channel_filesharing.js"></script>
<!--hide-->
<!-- Styles used within the demo -->
<style type="text/css">
.alert img {
float:left;
padding-right: 10px;
}
.peerblock {
width: 800px;
border-radius:2px;
border:1px solid gray;
}
.receiveBlock {
width: 500px;
margin:10px;
display: inline-block;
}
.dragndrop {
display: inline-block;
padding:2em;
margin: 2px;
border:2px solid black;
border-radius: 5px;
}
.dragndropStatus {
display: inline-block;
}
.connecting {
background-color: yellow;
}
.usesSockets {
background-color: pink;
}
.notConnected {
visibility:hidden;
}
.connected {
background-color: #e0ffe0;
}
.notConnected:hover {
margin: 1px;
border-width: 3px;
}
.connected:hover {
margin: 1px;
border-width:3px;
}
.connectButton {
padding:2em;
}
</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: Data Channel File-sharing</h1>
<p>This application demonstrates file sharing using the easyrtc.sendData method.
It should connect to the server upon start up, and display drag-and-drop areas for other peers.</p>
<p>To use it, connect to a peer then drop a file into the drag-and-drop area for that peer. The peer should receive it.
</p>
<p class="alert"><img alt="Warn" height="32" width="32" src="images/br_status_warn.png" />
This demo requires reliable data channels which means it needs Firefox or Chrome (version 32+).
In the absence of reliable data channels it will fallback to using websockets to transfer a file.
Notice that it uses easyrtc_ft.js as well as easyrtc.js.
</p>
<hr />
<h2>The Demo</h2>
<!--show-->
<div id="iam">Obtaining ID...</div><BR />
<div id="peerZone">
</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>
<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>