open-easyrtc
Version:
Open-EasyRTC enables quick development of WebRTC
162 lines (141 loc) • 6.86 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
<title>EasyRTC Demo: Multistream calls</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>
<!--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"><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">
<!--hide-->
<!-- Main Content -->
<h1>EasyRTC Demo: Multistream calls</h1>
<p>This application demonstrates sending multiple video streams from one caller to another.
You can open up the media streams before or after establishing the call to the other peer.</p>
<p>To use it, press the Connect button.
You should see buttons representing the video sources and a list of buttons representing other people using this demo.
Click one of those buttons to initiate a chat. Note: this demo looks much better when hosted on an https site.</p>
<p>
Note: this example requires a hand-crafted plugin to support
screensharing. You have to implement this yourself. See
<a href="https://www.webrtc-experiment.com/">
Muaz Khans's website https://www.webrtc-experiment.com/
</a> for details.
</p>
<hr />
<h2>The Demo</h2>
<!--show-->
<div id="demoContainer">
<div id="connectControls">
<button id="connectButton" onclick="connect()">Connect</button>
<button id="hangupButton" disabled="disabled" onclick="hangup()">Hangup</button>
<button id="installPluginButton">Install plugin</button>
<div id="pluginstatus"></div>
<div id="iam">Not yet connected...</div>
<H3> Video sources</h3>
<div id="videoSrcBlk"></div>
<br />
<strong>Connected users:</strong>
<div id="otherClients"></div>
</div>
<div id="videos">
<h3>Local media streams</h3>
<div autoplay="autoplay" id="localVideos"></div>
<h3>Remote media streams</h3>
<div autoplay="autoplay" id="remoteVideos"></div>
<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>
<script type="text/javascript" src="js/demo_multistream_no_iframe.js"></script>
<!-- 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>