This repository was archived by the owner on May 5, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
103 lines (87 loc) · 3.57 KB
/
index.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
<!DOCTYPE html>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link href="/_packages/document.css" rel="stylesheet"/>
<script src="/_packages/document.js"></script>
<style>
.demo{
border:1px solid #ccc;
/* display content vertically, with flex box */
display: -webkit-box;
-webkit-box-align: center;
display: -moz-box;
-moz-box-align: center;
display: -ms-box;
-ms-box-align: center;
display: box;
box-align: center;
}
.demo video{
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:2.0;
border:1px solid #eee;
display: block;
padding:3px;
max-height:200px;
}
form.msg input,form.msg textarea{
width:100%;
background-color: #eee;
border:1px solid #ccc;
padding:4px;
}
</style>
<body>
<header>
<h1>PeerJS - WebRTC video chat</h1>
</header>
<blockquote>
PeerJS is a service which makes it easier to build a chat room using the <strike>upcoming</strike> <em>present</em> <a href="http://www.w3.org/TR/webrtc/">WebRTC's PeerConnection API</a>. The PeerConnection API proposes to be able to send data, video etc from one user-agent to another without the need for it going through a server. PeerJS handles this handshake with a simple Socket.IO backend server.
</blockquote>
<form class="msg">
<div class="demo">
<video id="myvideo"></video>
</div>
<input type="text" name="input" placeholder="message"/>
<textarea name="textarea"></textarea>
</form>
<aside>Share chatroom link <a id="chat-room-link" target="_blank"></a></aside>
<h2>Demo Code</h2>
<p>The above demo takes just a few steps to implement. Firstly embed the Peer.JS script</p>
<script class="pre" src="https://peer-server.herokuapp.com/peer.min.js"></script>
<p>Next, create a unique id with Math.random() for the chat room, you could hard code this if you like, but anyway, i'm generating it like so...</p>
<script class="pre">
window.location.hash = (window.location.hash || parseInt(Math.random()*1e4,10).toString(16));
</script>
<p><b>connect with video</b>. Call the library Peer and invoke a new session. Append the video tag (defined by the id 'myvideo'). Connect to the "room" we spoke about earlier. Then listen for new media streams from other people in the same chat room.</p>
<script class="pre">
var session = Peer.initSession().addMedia('myvideo').connect(window.location.hash).on('media', function(e){
document.querySelector('div.demo').appendChild(e.video);
});
</script>
<p><b>send data</b> Send data to the room. createDataChannel has been proposed but is not implemented. The relay server works pretty well though</p>
<script class="pre">
var form = document.querySelector('form.msg');
session.on('message', function(event){
form.textarea.value = event.data+"\n"+form.textarea.value;
});
form.addEventListener('submit', function(e){
e.preventDefault();
form.textarea.value = "me:" + this.input.value+"\n"+form.textarea.value;
session.send('message', {data:this.input.value});
this.input.value = '';
});
</script>
<p>Lastly, because chatting to yourself can bring about men in white coats, i've added a link to share the page with friends (to test you can just open in a new tab).</p>
<script class="pre">
var link = document.getElementById('chat-room-link');
link.innerHTML = window.location.href;
link.href = window.location.href;
</script>
<p>[Optionally]. If the user-agent doesn't support WebRTC then lets so something</p>
<script class="pre">
if(!Peer.supported){
document.querySelector('.demo').innerHTML = "This demo is not supported in your browser, for more information see http://www.webrtc.org/running-the-demos";
}
</script>