-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathskyway_sample.html
141 lines (113 loc) · 3.96 KB
/
skyway_sample.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
<html>
<head>
<title>PeerJS - Video chat example</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!--<script type="text/javascript" src="https://skyway.io/dist/0.3/peer.js"></script>-->
<script src="skyway.js"></script>
<script>
// Compatibility shim
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// PeerJS object
var peer = new Peer({ key: '5c234cf5-14dc-495a-b592-a09da85a3f40', debug: 3});
peer.on('open', function(){
$('#my-id').text(peer.id);
});
// Receiving a call
peer.on('call', function(call){
// Answer the call automatically (instead of prompting user) for demo purposes
call.answer();
step3(call);
});
peer.on('error', function(err){
alert(err.message);
// Return to step 2 if error occurs
step2();
});
// Click handlers setup
$(function(){
$('#make-call').click(function(){
// Initiate a call!
var call = peer.call($('#callto-id').val(), window.localStream);
step3(call);
});
$('#end-call').click(function(){
window.existingCall.close();
step2();
});
// Retry if getUserMedia fails
$('#step1-retry').click(function(){
$('#step1-error').hide();
step1();
});
// Get things started
step1();
});
function step1 () {
// Get audio/video stream
navigator.getUserMedia({audio: false, video: true}, function(stream){
// Set your video displays
$('#my-video').prop('src', URL.createObjectURL(stream));
window.localStream = stream;
step2();
}, function(){ $('#step1-error').show(); });
}
function step2 () {
$('#step1, #step3').hide();
$('#step2').show();
}
function step3 (call) {
// Hang up on an existing call if present
if (window.existingCall) {
window.existingCall.close();
}
// Wait for stream on the call, then set peer video display
call.on('stream', function(stream){
$('#their-video').prop('src', URL.createObjectURL(stream));
});
// UI stuff
window.existingCall = call;
$('#their-id').text(call.peer);
call.on('close', step2);
$('#step1, #step2').hide();
$('#step3').show();
}
</script>
</head>
<body>
<div class="pure-g">
<!-- Video area -->
<div class="pure-u-2-3" id="video-container">
<video id="their-video" autoplay></video>
<video id="my-video" muted="true" autoplay></video>
</div>
<!-- Steps -->
<div class="pure-u-1-3">
<h2>PeerJS Video Chat</h2>
<!-- Get local audio/video stream -->
<div id="step1">
<p>Please click `allow` on the top of the screen so we can access your webcam and microphone for calls.</p>
<div id="step1-error">
<p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when asked for permission by the browser.</p>
<a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
</div>
</div>
<!-- Make calls to others -->
<div id="step2">
<p>Your id: <span id="my-id">...</span></p>
<p>Share this id with others so they can call you.</p>
<h3>Make a call</h3>
<div class="pure-form">
<input type="text" placeholder="Call user id..." id="callto-id">
<a href="#" class="pure-button pure-button-success" id="make-call">Call</a>
</div>
</div>
<!-- Call in progress -->
<div id="step3">
<p>Currently in call with <span id="their-id">...</span></p>
<p><a href="#" class="pure-button pure-button-error" id="end-call">End call</a></p>
</div>
</div>
</div>
</body>
</html>