-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebRTC.html
69 lines (62 loc) · 2.52 KB
/
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
<html lang="en">
<head>
<title>Live Edit Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
var conn;
var peer = new Peer();
peer.on('open', function (id) {
$('#pid').text(id);
});
peer.on('connection', connect);
//CONNECT
function connect(c) {
conn = c;
console.log('in connect', conn.peer);
$('#rid').val(conn.peer);
$('#rid').prop('disabled', true);
$('#progbar').width('100%');
document.getElementById('status').innerText = "Connected";
conn.on('data', function (data) {
$('#inputText').val($('#inputText').val() + data);
});
}
$(document).ready(function () {
$('#connect').click(function () {
console.log('connecting...');
$('progbar').width('50%');
var c = peer.connect($('#rid').val());
c.on('open', function () {
console.log(c);
connect(c);
});
});
$('#inputText').keypress(function (e) {
console.log(e);
var ev = e || window.event;
var asciiKey = ev.keyCode || ev.which;
text = String.fromCharCode(asciiKey);
console.log(text, conn);
conn.send(text);
});
});
</script>
<h2 style="margin-left: 30%;">Live Edit with webRTC</h2>
Your peer id is: <span id="pid"></span><br><br> Connect to peer: <input type="text" id="rid" placeholder="Someone else's id">
<input type="button" value="Connect" id="connect">
<input type="button" value="Disconnect" id="disconnect"><br><div id="status"></div>
<div class="progress progress-stripped active" style="width: 25%;">
<div id="progBar" class="bar" style="width: 0%"></div>
</div>
<br>
<textarea id="inputText" rows="30" style="width: 45%; margin-left:20%">
</textarea>
</body>
</html>