forked from cjb/serverless-webrtc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
serverless-webrtc.html
117 lines (110 loc) · 4.87 KB
/
serverless-webrtc.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WebRTC p2p data</title>
<script src="js/adapter.js"></script>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/serverless-webrtc-bootstrap.css" rel="stylesheet">
</head>
<body>
<a href="https://github.com/cjb/serverless-webrtc/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
<div class="span4">
<Video id="localVideo">
</div>
<div class="span4">
<Video id="remoteVideo">
</div>
<div class="span4">
<fieldset class="well">
<p class="head muted">
Serverless WebRTC chat demonstration.
</p>
<div class="text-info" id="chatlog" style="height:350px; overflow:auto;">
</div>
</fieldset>
<form class="form-inline" onSubmit="return sendMessage()" action="">
<input type="text" id="messageTextBox" placeholder="Type your message here">
<button type="submit" id="sendMessageBtn" class="btn">Send message</button>
</form>
<input type="file" id="fileBtn">
</div>
<div class="modal" id="showLocalOffer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
<div class="modal-header">
<h3 id="myModalLabel">Send your local offer to someone else</h3>
</div>
<div class="modal-body">
Here's your "offer" -- it tells someone else how to connect to you. Send the whole thing to them, for example in an instant message or e-mail.
<br/>
<textarea class="input-large" id="localOffer" name="localOffer" rows="10" cols="100"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="offerSentBtn" data-dismiss="modal" aria-hidden="true">Okay, I sent it.</button>
</div>
</div>
<div class="modal" id="showLocalAnswer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
<div class="modal-header">
<h3 id="myModalLabel">Send your local answer to someone else</h3>
</div>
<div class="modal-body">
Here's your "answer" -- it tells someone else how to connect to you. Send the whole thing to them, for example in an instant message or e-mail.
<br/>
<textarea class="input-large" id="localAnswer" name="localAnswer" rows="10" cols="100"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="answerSentBtn" data-dismiss="modal" aria-hidden="true">Okay, I sent it.</button>
</div>
</div>
<div class="modal" id="getRemoteOffer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
<div class="modal-header">
<h3 id="myModalLabel">Paste the "offer" you received</h3>
</div>
<div class="modal-body">
The person who created the room will send you an "offer" string -- paste it here.
<br/>
<textarea class="input-large" id="remoteOffer" name="remoteOffer" rows="10" cols="100"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="offerRecdBtn" data-dismiss="modal" aria-hidden="true">Okay, I pasted it.</button>
</div>
</div>
<div class="modal" id="getRemoteAnswer" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
<div class="modal-header">
<h3 id="myModalLabel">Paste the "answer" you received</h3>
</div>
<div class="modal-body">
Now paste in the "answer" that was sent back to you.
<br/>
<textarea class="input-large" id="remoteAnswer" name="remoteAnswer" rows="10" cols="100"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="answerRecdBtn" data-dismiss="modal" aria-hidden="true">Okay, I pasted it.</button>
</div>
</div>
<div class="modal" id="waitForConnection" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" hidden>
<div class="modal-header">
<h3 id="myModalLabel">Waiting for connection</h3>
</div>
<div class="modal-body">
This dialog will disappear when a connection is made.
</div>
<div class="spinner" align="center">
<img src="img/spinner.gif"></img>
</div>
</div>
<div class="modal" id="createOrJoin" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="myModalLabel">Create or join a room?</h3>
</div>
<div class="modal-footer">
<button class="btn" id="joinBtn" data-dismiss="modal" aria-hidden="true">Join</button>
<button class="btn btn-primary" id="createBtn" data-dismiss="modal" aria-hidden="true">Create</button>
</div>
</div>
<script src="js/serverless-webrtc.js"></script>
<script src="js/file-transfer.js"></script>
</body>
</html>