-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpsap.html
173 lines (141 loc) · 4.92 KB
/
psap.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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html style='background:#209387;'>
<head>
<title>112.camera</title>
<meta charset='utf-8'>
<meta name="referrer" content="origin" />
<meta name='viewport' content='width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0, viewport-fit=cover'>
<link href='css/showme.css' rel='stylesheet' />
<style>
body
{
background: #209387;
color: #c3e0dd;
font-family: Roboto, Verdana, 'Lucida Sans', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 18px;
padding: 0;
margin: 0;
text-align: center;
}
@media only screen and (max-width: 700px)
{
.wrap
{
padding: 15px;
}
}
h1
{
text-align: center;
margin: 40px 0;
font-size: 22px;
font-weight: bold;
color: #666;
}
.flex_display
{
display: flex;
justify-content:center;
flex-wrap: wrap;
}
a
{
color: #c3e0dd;
}
</style>
</head>
<body>
<div style='margin:2em 0;font-family:Verdana'>
<span style='color:#cd3233;background:rgba(255,255,255, .5); padding:3px 6px'>POPPY 112.CAMERA - DEMO ONLY - NOT FOR REAL USE</span>
</div>
<div id='live' class='flex_display'></div>
<div style='background:#209387; color:black; position:fixed; bottom:0px;left:0; width:100%; padding-bottom:0; text-align:center;font-size:12px'>© <a href='mailto:info@my-poppy.eu'>info@my-poppy.eu</a> & GitHub project contributors - <a href='https://github.com/ccloquet/showme' target='_blank'>github.com/ccloquet/showme</a> - MIT Licence</div>
<div class='center-div' id='waiting' style='display:none'></div>
</body>
</html>
<script src="lib/jquery-3.3.1.js?a=7" ></script>
<script src="lib/peerjs-0.3.18.js?a=7" ></script>
<script src='params.js?a=7' ></script>
<script src='lib/showme.js?a=7' ></script>
<script>
var userid = get_userid(); // SHOULD BE an international phone number format
var query_php = 'query.php';
var global_peer = null
// ask for privacy, but max once a day
var goLS = false;
if (localStorage.getItem('POPPY_DT') === null) goLS = true;
else if (localStorage.getItem('POPPY_DT') < Date.now()-24*3600*1000) goLS = true;
if (goLS)
{
var yesno = window.confirm('After clicking on OK, your IP adress & browser identification will be recorded for security & development purposes and retained during max 1 year. The images are never stored. Privacy policy: docs.my-poppy.eu/privacy_poppy.html. Click on Cancel to exit without your data being recorded.');
init(userid);
}
else
{
init(userid);
}
localStorage.setItem('POPPY_DT', Date.now());
function init(userid)
{
if (!validate_userid(userid))
{
//error_msg();
return false;
}
$.post( query_php,
{
action: 'get_ice_servers',
},
function(e)
{
if (!hasGetUserMedia())
{
return false;
}
var ice_servers = e.ice_servers;
var mypeerid = userid + '-00'; // the call taker (me) -- later, if taken, takes -01 or -02
var remotepeerid = userid + '-1'; // the citizen
$('#live').append('<div><video style="border-radius:10px; margin:0 10px" height="640" id="video-' + mypeerid + '" muted="muted" controls autoplay></video></div>')
// for Chrome 70+: should be muted to autoplay !
global_peer = new Peer(mypeerid, {config: {iceServers: ice_servers}, host: peerjs_url, debug: 3, port: 443, secure: true});
console.log(global_peer)
makePeerHeartbeater(global_peer);
var dataConnection = global_peer.connect(remotepeerid); // to ask the remotepeer to reinitiate the connexion
global_peer.on('open', function(e) { console.log('My peer ID is: ' + e); });
global_peer.on('close', function(e) { console.log('CLOSE: ', e); });
global_peer.on('disconnected', function(e) { console.log('DISCONNECTED: ', e); });
global_peer.on('error', function(e) { console.log('ERROR', this, e, global_peer); });
global_peer.on('call', function(call)
{
console.log(call.peer,remotepeerid)
if (call.peer != remotepeerid) // guarantees the connection is 1-1
{
return false;
}
call.answer(); // no mediastream here -> one way only
call.on('stream', function(remote_media_stream)
{
var video = document.getElementById('video-'+mypeerid);
video.srcObject = remote_media_stream;
//console.log('STREAMING RECEIVED', video, video.srcObject, remote_media_stream)
});
});
}
,
'json');
}
// handle network deconnections
function networkChange(e)
{
switch(e.type)
{
case 'offline': $('#waiting').html('Waiting for network').addClass('blink_me').show(); break;
case 'online': $('#waiting').removeClass('blink_me').hide(); location.reload(); break; // should be more advanced, without reloading, but this is currently quite robust
}
}
// Update the online status icon based on connectivity
window.addEventListener('online', networkChange);
window.addEventListener('offline', networkChange);
</script>