forked from butorenjin/easyrtc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo_multistream_iframe.html
148 lines (131 loc) · 6.52 KB
/
demo_multistream_iframe.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE 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>
<script type="text/javascript" src="/easyrtc/labs/desktop_capture_iframe_version.js"></script>
<script type="text/javascript" src="js/demo_multistream_iframe.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"><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://easyrtc.com/forum/"><div class="menu_item">Support: EasyRTC Forums</div></a><a class="menu_link" href="http://www.easyrtc.com/"><div class="menu_item">EasyRTC.com</div></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>
<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>
<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>
<!-- 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="http://www.skedans.com/?from=landing"><img id="logo_priologic" src="images/skedans_logo.png" height="40" width="150" alt="Created By Skedans Systems, 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>© 2016 - Skedans Systems, 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>