Browse code

Created repository.

DoubleBastionAdmin authored on 26/01/2022 20:32:42
Showing 1 changed files
videoconference/index.php
History View file @ 06fbd76
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,519 @@
1 
+<?php
2 
+/**
3 
+ *  Copyright (C) 2021  Double Bastion LLC
4 
+ *
5 
+ *  This file is part of Roundpin, which is licensed under the
6 
+ *  GNU Affero General Public License Version 3.0. The license terms
7 
+ *  are detailed in the "LICENSE.txt" file located in the root directory.
8 
+ *
9 
+ *  This is a modified version of the original file "index.html",
10 
+ *  first modified in 2020. The copyright notice for the original
11 
+ *  content follows:
12 
+
13 
+/*
14 
+  Cyber Mega Phone 2K
15 
+  Copyright (C) 2017 Digium, Inc.
16 
+
17 
+  This program is free software, distributed under the terms of the
18 
+  MIT License. See the LICENSE file at the top of the source tree.
19 
+*/
20 
+
21 
+session_start();
22 
+
23 
+if ($_SESSION['loggedtoroundpin'] == true) {
24 
+
25 
+?>
26 
+
27 
+<script type="text/javascript">
28 
+    let validateSToken = "<?php print_r($_SESSION['validate_s_access']); ?>";
29 
+    let userName = "<?php print_r($_SESSION['loginname']); ?>";
30 
+</script>
31 
+
32 
+<!DOCTYPE html>
33 
+
34 
+<html>
35 
+<head>
36 
+	<meta charset="utf-8" />
37 
+	<title>Roundpin Video Conference</title>
38 
+	<link rel="stylesheet" type="text/css" href="css/conference-phone.min.css">
39 
+        <link rel="stylesheet" type="text/css" href="../fonts/font-awesome-4.7.0/css/font-awesome.min.css"/>
40 
+
41 
+        <link rel="stylesheet" type="text/css" href="../css/jeegoo-1.0.0.min.css"/>
42 
+
43 
+        <link rel="shortcut icon" type="image/svg" href="../images/favicon.svg" />
44 
+	<script type="text/javascript" src="js/sdp-interop-sl-1.4.0.min.js"></script>
45 
+        <script type="text/javascript" src="js/jssip-3.7.0.min.js"></script>
46 
+	<script type="text/javascript" src="js/utils.min.js"></script>
47 
+        <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
48 
+
49 
+	<script type="text/javascript" src="js/conference-phone.min.js"></script>
50 
+
51 
+        <script type="text/javascript" src="../js/jquery.jeegoopopup.1.0.0.min.js"></script>
52 
+
53 
+<script type="text/javascript">
54 
+
55 
+let phone;
56 
+let numPressed = null;
57 
+
58 
+window.onload = function() {
59 
+
60 
+        var mvcount = 0;
61 
+        var sipPassDec = '';
62 
+
63 
+	document.getElementById("connect").value = "Connect";
64 
+	document.getElementById("connect").disabled = false;
65 
+	document.getElementById("call").value = "Call";
66 
+	document.getElementById("call").disabled = true;
67 
+        document.getElementById("call").style.display = 'none';
68 
+        document.getElementById("fullscreen").style.display = 'none';
69 
+
70 
+	function findMediaView(parent, stream) {
71 
+		let nodes = parent.childNodes;
72 
+
73 
+		for (let i = 0; i < nodes.length; ++i) {
74 
+			if (nodes[i].id == stream.id) {
75 
+				return nodes[i];
76 
+			}
77 
+		}
78 
+		return null;
79 
+	}
80 
+
81 
+        function dtmfMenuShow() {
82 
+
83 
+                $.jeegoopopup.close();
84 
+
85 
+	        var leftPos = event.pageX - 90;
86 
+	        var topPos = event.pageY + 28;
87 
+
88 
+		if ($(window).width() < 680) {
89 
+		    leftPos = event.pageX - 50;
90 
+		}
91 
+
92 
+	        var html = "<div id=\"sendPinDialPad\">";
93 
+	        html += "<div><input type=\"text\" id=\"dialText\" class=\"dialTextInput\"></div>";
94 
+	        html += "<table cellspacing=10 cellpadding=0 style=\"margin-left:auto; margin-right: auto\">";
95 
+	        html += "<tr><td><button class=dtmfButtons onclick=\"phone.dtmfSend('1');new Audio('../sounds/dtmf.mp3').play();\"><div>1</div><span>&nbsp;</span></button></td>";
96 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('2');new Audio('../sounds/dtmf.mp3').play();\"><div>2</div><span>ABC</span></button></td>";
97 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('3');new Audio('../sounds/dtmf.mp3').play();\"><div>3</div><span>DEF</span></button></td></tr>";
98 
+	        html += "<tr><td><button class=dtmfButtons onclick=\"phone.dtmfSend('4');new Audio('../sounds/dtmf.mp3').play();\"><div>4</div><span>GHI</span></button></td>";
99 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('5');new Audio('../sounds/dtmf.mp3').play();\"><div>5</div><span>JKL</span></button></td>";
100 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('6');new Audio('../sounds/dtmf.mp3').play();\"><div>6</div><span>MNO</span></button></td></tr>";
101 
+	        html += "<tr><td><button class=dtmfButtons onclick=\"phone.dtmfSend('7');new Audio('../sounds/dtmf.mp3').play();\"><div>7</div><span>PQRS</span></button></td>";
102 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('8');new Audio('../sounds/dtmf.mp3').play();\"><div>8</div><span>TUV</span></button></td>";
103 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('9');new Audio('../sounds/dtmf.mp3').play();\"><div>9</div><span>WXYZ</span></button></td></tr>";
104 
+	        html += "<tr><td><button class=dtmfButtons onclick=\"phone.dtmfSend('*');new Audio('../sounds/dtmf.mp3').play();\">*</button></td>";
105 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('0');new Audio('../sounds/dtmf.mp3').play();\">0</button></td>";
106 
+	        html += "<td><button class=dtmfButtons onclick=\"phone.dtmfSend('#');new Audio('../sounds/dtmf.mp3').play();\">#</button></td></tr>";
107 
+	        html += "</table>";
108 
+	        html += "</div>";
109 
+
110 
+	        $.jeegoopopup.open({
111 
+			html: html,
112 
+			width: "auto",
113 
+			height: "auto",
114 
+			left: leftPos,
115 
+			top: topPos,
116 
+			scrolling: 'no',
117 
+			skinClass: 'jg_popup_basic',
118 
+			overlay: true,
119 
+			opacity: 0,
120 
+			draggable: true,
121 
+			resizable: false,
122 
+			fadeIn: 0
123 
+	        });
124 
+
125 
+	        $("#jg_popup_overlay").click(function() { $.jeegoopopup.close(); });
126 
+	        $(window).on('keydown', function(event) { if (event.key == "Escape") { $.jeegoopopup.close(); } });
127 
+        }
128 
+
129 
+	function createMediaControls(video) {
130 
+
131 
+		let controls = document.createElement("div");
132 
+		controls.className = "media-controls";
133 
+
134 
+                if (video.srcObject.local == true) {
135 
+		        let sendPin = document.createElement("button");
136 
+                        sendPin.className = "mediaControlBtn";
137 
+                        sendPin.id = "sendPinBtn";
138 
+		        sendPin.innerHTML = '<i class="fa fa-keyboard-o" aria-hidden="true" title="Show Keypad"></i>';
139 
+                        sendPin.onclick = function() { dtmfMenuShow(); }
140 
+
141 
+		        controls.appendChild(sendPin);
142 
+                }
143 
+
144 
+		let audioTracks = video.srcObject.getAudioTracks();
145 
+		if (audioTracks.length > 0) {
146 
+                        let muteAudio = document.createElement("button");
147 
+                        muteAudio.className = "mediaControlBtn";
148 
+                        muteAudio.innerHTML = '<i class="fa fa-microphone-slash" aria-hidden="true" title="Mute Audio"></i>';
149 
+			muteAudio.setAttribute("state", "Unmute");
150 
+			muteAudio.onclick = function() {
151 
+				let state = this.getAttribute("state");
152 
+                                if (state == "Mute") {
153 
+                                    this.setAttribute("state", "Unmute");
154 
+                                    this.innerHTML = '<i class="fa fa-microphone-slash" aria-hidden="true" title="Mute Audio"></i>';
155 
+                                } else if (state == "Unmute") {
156 
+                                    this.setAttribute("state", "Mute");
157 
+                                    this.innerHTML = '<i class="fa fa-microphone" aria-hidden="true" title="Unmute Audio"></i>';
158 
+                                }
159 
+				mute(video.srcObject, {audio: this.getAttribute("state") == "Mute"});
160 
+			};
161 
+			controls.appendChild(muteAudio);
162 
+		}
163 
+
164 
+		let videoTracks = video.srcObject.getVideoTracks();
165 
+		if (videoTracks.length > 0) {
166 
+                        let muteVideo = document.createElement("button");
167 
+                        muteVideo.className = "mediaControlBtn";
168 
+                        muteVideo.innerHTML = '<i class="fa fa-ban" aria-hidden="true" title="Mute Video"></i>';
169 
+			muteVideo.setAttribute("state", "Unmute");
170 
+			muteVideo.onclick = function() {
171 
+				let state = this.getAttribute("state");
172 
+                                if (state == "Mute") {
173 
+                                    this.setAttribute("state", "Unmute");
174 
+                                    this.innerHTML = '<i class="fa fa-ban" aria-hidden="true" title="Mute Video"></i>';
175 
+                                } else if (state == "Unmute") {
176 
+                                    this.setAttribute("state", "Mute");
177 
+                                    this.innerHTML = '<i class="fa fa-video-camera" aria-hidden="true" title="Unmute Video"></i>';
178 
+                                }
179 
+
180 
+				mute(video.srcObject, {video: this.getAttribute("state") == "Mute"});
181 
+			};
182 
+			controls.appendChild(muteVideo);
183 
+
184 
+                        if (video.srcObject.local == true) {
185 
+                                let ScreenShare = document.createElement("button");
186 
+                                ScreenShare.className = "mediaControlBtn";
187 
+                                ScreenShare.innerHTML = '<i class="fa fa-desktop" aria-hidden="true" title="Share Screen"></i>';
188 
+				ScreenShare.onclick = function() {
189 
+					phone.ShareScreen();
190 
+				};
191 
+
192 
+				controls.appendChild(ScreenShare);
193 
+
194 
+                                let VideoShare = document.createElement("button");
195 
+                                VideoShare.className = "mediaControlBtn";
196 
+                                VideoShare.innerHTML = '<i class="fa fa-video-camera" aria-hidden="true" title="Share Camera"></i>';
197 
+				VideoShare.onclick = function() {
198 
+					phone.ShareVideo();
199 
+				};
200 
+
201 
+				controls.appendChild(VideoShare);
202 
+                        }
203 
+
204 
+                        let fullScreen = document.createElement("button");
205 
+                        fullScreen.className = "mediaControlBtn";
206 
+                        fullScreen.innerHTML = '<i class="fa fa-expand" aria-hidden="true" title="Full Screen"></i>';
207 
+			fullScreen.onclick = function() {
208 
+			    this.fullScreen.request();
209 
+			};
210 
+
211 
+			fullScreen.fullScreen = new FullScreen(video);
212 
+			controls.appendChild(fullScreen);
213 
+		}
214 
+		return controls;
215 
+	}
216 
+
217 
+
218 
+	function createMediaView(stream) {
219 
+
220 
+		let mediaView = document.createElement("div");
221 
+		mediaView.className = "media-view";
222 
+		mediaView.id = "new-media-view"+stream.id; // Makes it easy to find later
223 
+                mediaView.style.width = localStorage.getItem("VidConfWindowWidth")+"%";
224 
+
225 
+		let videoView = document.createElement("div");
226 
+                videoView.className = "video-view";
227 
+                videoView.id = "video-view"+stream.id;
228 
+
229 
+		let video = document.createElement("video");
230 
+                video.className = "videoElem";
231 
+                video.id = "locVideo"+stream.id;
232 
+		video.autoplay = true;
233 
+		video.srcObject = stream;
234 
+		video.onloadedmetadata = function() {
235 
+
236 
+		      let tracks = stream.getVideoTracks();
237 
+
238 
+		      for (let i = 0; i < tracks.length; ++i) {
239 
+			   tracks[i].enabled = true;
240 
+		      }
241 
+
242 
+		};
243 
+
244 
+		if (stream.local == false) {
245 
+
246 
+			function checkForVideo() {
247 
+				if (video.videoWidth < 10 || video.videoHeight < 10) {
248 
+                                    mediaView.style.display = 'none';
249 
+				    return;
250 
+				}
251 
+                                mediaView.style.display = 'inline';
252 
+			}
253 
+                        checkForVideo();
254 
+			setInterval(checkForVideo, 1000);
255 
+		}
256 
+
257 
+		// Video elements connected to local streams will by default
258 
+		// echo both the video and the audio back to ourselves. Since
259 
+		// we don't want to hear ourselves we mute it, which mutes only
260 
+		// the audio portion.
261 
+		if (stream.local == true) {
262 
+			video.muted = true;
263 
+		} else if (mvcount == 0) {
264 
+			// We hide the video view until we receive video
265 
+                        // We hide our own remote video track
266 
+                        mvcount = 1;
267 
+                        document.getElementById(mediaView.id).style.display = 'none';
268 
+		}
269 
+
270 
+		videoView.appendChild(video);
271 
+		mediaView.appendChild(videoView);
272 
+		mediaView.appendChild(createMediaControls(video));
273 
+
274 
+		return mediaView;
275 
+	}
276 
+
277 
+	function removeMediaView(parent, stream) {
278 
+		let node = findMediaView(parent, stream);
279 
+		if (node) {
280 
+			parent.removeChild(node);
281 
+		}
282 
+	}
283 
+
284 
+	function getValue(id) {
285 
+		let obj = document.getElementById(id);
286 
+		return obj.value ? obj.value : obj.placeholder;
287 
+	}
288 
+
289 
+        $.ajax({
290 
+            'async': false,
291 
+            'global': false,
292 
+            type: "POST",
293 
+            url: "../get-sippass.php",
294 
+            dataType: "JSON",
295 
+            data: {
296 
+                    username: userName,
297 
+                    s_ajax_call: validateSToken
298 
+            },
299 
+            success: function (sipdatafromdb) {
300 
+                           sipPassDec = sipdatafromdb;
301 
+            },
302 
+            error: function(sipdatafromdb) {
303 
+                     alert("An error occurred while attempting to retrieve data from the database!");
304 
+            }
305 
+        });
306 
+
307 
+        document.getElementById("connect").addEventListener("click", function() {
308 
+		if (document.getElementById("connect").value == "Disconnect") {
309 
+			document.getElementById("call").value = "Call";
310 
+			document.getElementById("call").disabled = true;
311 
+			document.getElementById("connect").value = "Disconnecting";
312 
+			document.getElementById("connect").disabled = true;
313 
+
314 
+			phone.disconnect();
315 
+			return;
316 
+		}
317 
+
318 
+                phone = new ConferencePhone(localStorage.getItem("SipUsername"), localStorage.getItem("SipUsername"), sipPassDec, localStorage.getItem("wssServer"), localStorage.getItem("StunServer"), true);
319 
+
320 
+                sipPassDec = '';
321 
+
322 
+		phone.handle("connected", function () {
323 
+
324 
+			if (document.getElementById("connect").value != "Disconnect") {
325 
+				document.getElementById("connect").value = "Registering";
326 
+			} else {
327 
+				document.getElementById("connect").value = "Disconnect";
328 
+				document.getElementById("connect").disabled = false;
329 
+				document.getElementById("call").disabled = false;
330 
+			}
331 
+		});
332 
+
333 
+		phone.handle("disconnected", function () {
334 
+			document.getElementById("connect").value = "Connect";
335 
+			document.getElementById("connect").disabled = false;
336 
+			document.getElementById("call").value = "Call";
337 
+			document.getElementById("call").disabled = true;
338 
+		});
339 
+
340 
+		phone.handle("registered", function () {
341 
+			document.getElementById("connect").value = "Disconnect";
342 
+			document.getElementById("connect").disabled = false;
343 
+			document.getElementById("call").disabled = false;
344 
+		});
345 
+
346 
+		phone.handle("registrationFailed", function () {
347 
+			phone.disconnect();
348 
+		});
349 
+
350 
+		phone.handle("incoming", function (reason) {
351 
+			document.getElementById("call").value = "Answer";
352 
+		});
353 
+
354 
+		phone.handle("failed", function (reason) {
355 
+			document.getElementById("call").value = "Call";
356 
+			document.getElementById("call").disabled = false;
357 
+		});
358 
+
359 
+		phone.handle("ended", function (reason) {
360 
+			document.getElementById("call").value = "Call";
361 
+			document.getElementById("call").disabled = document.getElementById("connect").value == "Connect";
362 
+		});
363 
+
364 
+		phone.handle("streamAdded", function (stream) {
365 
+			document.getElementById("media-views").appendChild(createMediaView(stream));
366 
+			document.getElementById("call").value = "Hangup";
367 
+			document.getElementById("call").disabled = false;
368 
+                        document.getElementById("call").style.display = 'inline';
369 
+                        document.getElementById("fullscreen").style.display = 'inline';
370 
+                        document.getElementById("fullscreen").innerHTML = '<i class="fa fa-expand" aria-hidden="true"></i><b>&nbsp; Fullscreen';
371 
+		});
372 
+
373 
+		phone.handle("streamRemoved", function (stream) {
374 
+			removeMediaView(document.getElementById("media-views"), stream);
375 
+		});
376 
+
377 
+		phone.connect();
378 
+
379 
+		document.getElementById("connect").disabled = true;
380 
+		document.getElementById("connect").value = "Connecting";
381 
+	});
382 
+
383 
+        document.getElementById("connect").click();
384 
+
385 
+        let videoConfExtension = localStorage.getItem("VidConfExtension");
386 
+
387 
+        let constraints = { audio: true, video: true };
388 
+        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
389 
+            phone.call(videoConfExtension);
390 
+        }).catch(function(err) { });
391 
+
392 
+        let node = document.getElementById("call");
393 
+
394 
+        if (node.value == "Answer") {
395 
+	    node.disabled = true;
396 
+	    node.value = "Hangup";
397 
+	}
398 
+
399 
+        document.getElementById("call").addEventListener("click", function() {
400 
+            if (node.value == "Hangup") {
401 
+	        phone.terminate();
402 
+                document.getElementById("call").remove();
403 
+                window.close();
404 
+            }
405 
+        });
406 
+
407 
+	$("#showConnectionBttns").click(function() {
408 
+	  if ($("#connection").is(':visible')) {
409 
+	      $("#connection").hide();
410 
+	      $("#showConnectionBttns").html('<i class="fa fa-caret-down" aria-hidden="true"></i>');
411 
+	  } else {
412 
+	      $("#connection").show();
413 
+	      $("#showConnectionBttns").html('<i class="fa fa-caret-up" aria-hidden="true"></i>');
414 
+	  }
415 
+	});
416 
+
417 
+	document.addEventListener("fullscreenchange", onFullScreenChange, false);
418 
+	document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
419 
+	document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
420 
+
421 
+	function onFullScreenChange() {
422 
+	   if (document.mozFullScreenElement != null || document.webkitFullscreenElement != null || document.fullscreenElement != null) {
423 
+	       document.getElementById("fullscreen").innerHTML = '<i class="fa fa-compress" aria-hidden="true"></i><b>&nbsp; Exit Fullscreen';
424 
+	       document.getElementById("fullscreen").style.width = "148px";
425 
+	   } else {
426 
+	       document.getElementById("fullscreen").innerHTML = '<i class="fa fa-expand" aria-hidden="true"></i><b>&nbsp; Fullscreen';
427 
+	       document.getElementById("fullscreen").style.width = "117px";
428 
+	   }
429 
+	}
430 
+
431 
+}; // window.onload
432 
+
433 
+window.onbeforeunload = function() {
434 
+       phone.terminate();
435 
+};
436 
+
437 
+window.onunload = function() {
438 
+       if (phone) {
439 
+	   phone.disconnect();
440 
+       }
441 
+}; // window.onunload
442 
+</script>
443 
+</head>
444 
+<body>
445 
+	<div id="connection">
446 
+               <div id="VideoConferenceLogo"><img src="../images/small-logo.svg" /></div>
447 
+	       <input type="button" id="connect" class="connect" value="Connect" style="display:none;" />
448 
+               <button id="call" class="call"><i class="fa fa-phone" aria-hidden="true"></i><b>&nbsp; Hangup</b></button>
449 
+               <button id="fullscreen" class="fullscreen" onclick="toggleFullScreen(document.body)"><i class="fa fa-expand" aria-hidden="true"></i><b>&nbsp; Fullscreen</b></button>
450 
+	</div>
451 
+        <div id="showConnectionBttns"><i class="fa fa-caret-down" aria-hidden="true"></i></div>
452 
+
453 
+	<div id="media-views" class="media-views"></div>
454 
+
455 
+<script type="text/javascript">
456 
+
457 
+FullScreen.prototype.request = function() {
458 
+	if (this.is()) {
459 
+		return;
460 
+	}
461 
+
462 
+	if (this._obj.requestFullscreen) {
463 
+		this._obj.requestFullscreen();
464 
+	} else if (this._obj.mozRequestFullScreen) {
465 
+		this._obj.mozRequestFullScreen();
466 
+	} else if (this._obj.webkitRequestFullScreen) {
467 
+		this._obj.webkitRequestFullScreen();
468 
+	} else if (this._obj.msRequestFullscreen) {
469 
+		this._obj.msRequestFullscreen();
470 
+	}
471 
+
472 
+	this.setData(true);
473 
+};
474 
+
475 
+function toggleFullScreen(elem) {
476 
+
477 
+    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) ||
478 
+       (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
479 
+        if (elem.requestFullScreen) {
480 
+            elem.requestFullScreen();
481 
+        } else if (elem.mozRequestFullScreen) {
482 
+            elem.mozRequestFullScreen();
483 
+        } else if (elem.webkitRequestFullScreen) {
484 
+            elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
485 
+        } else if (elem.msRequestFullscreen) {
486 
+            elem.msRequestFullscreen();
487 
+        }
488 
+
489 
+    } else {
490 
+        if (document.cancelFullScreen) {
491 
+            document.cancelFullScreen();
492 
+        } else if (document.mozCancelFullScreen) {
493 
+            document.mozCancelFullScreen();
494 
+        } else if (document.webkitCancelFullScreen) {
495 
+            document.webkitCancelFullScreen();
496 
+        } else if (document.msExitFullscreen) {
497 
+            document.msExitFullscreen();
498 
+        }
499 
+    }
500 
+}
501 
+
502 
+window.onclick = function(event) {
503 
+	let modal = document.getElementById("account-modal");
504 
+	if (event.target == modal) {
505 
+		modal.style.display = "none";
506 
+	}
507 
+}
508 
+
509 
+</script>
510 
+</body>
511 
+</html>
512 
+
513 
+<?php
514 
+
515 
+} else {
516 
+     header("Location: ../roundpin-login.php");
517 
+  }
518 
+
519 
+?>
0 520 
\ No newline at end of file