Create index.php

sipjs/index.php

@@ -0,0 +1,323 @@
+<?php
+/*
+	FusionPBX
+	Version: MPL 1.1
+
+	The contents of this file are subject to the Mozilla Public License Version
+	1.1 (the "License"); you may not use this file except in compliance with
+	the License. You may obtain a copy of the License at
+	http://www.mozilla.org/MPL/
+
+	Software distributed under the License is distributed on an "AS IS" basis,
+	WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+	for the specific language governing rights and limitations under the
+	License.
+
+	The Original Code is FusionPBX
+
+	The Initial Developer of the Original Code is
+	Mark J Crane <[email protected]>
+	Portions created by the Initial Developer are Copyright (C) 2018
+	the Initial Developer. All Rights Reserved.
+*/
+
+//includes
+	require_once "root.php";
+	require_once "resources/require.php";
+
+//check permissions
+	require_once "resources/check_auth.php";
+
+//show the header
+	require_once "resources/header.php";
+
+//get the user ID
+	$sql = "SELECT d.domain_name,e.extension,e.password FROM ";
+	$sql .= "v_extension_users as t, v_extensions as e, v_users as u, v_domains as d ";
+	$sql .= "WHERE u.user_uuid = t.user_uuid ";
+	$sql .= "AND e.extension_uuid = t.extension_uuid ";
+	$sql .= "AND e.domain_uuid = d.domain_uuid ";
+	$sql .= "AND u.user_uuid = '" . $_SESSION['user_uuid'] . "' ";
+	$sql .= "AND e.domain_uuid = '" . $_SESSION["domain_uuid"] . "' LIMIT 1";
+	$prep_statement = $db->prepare($sql);
+	if ($prep_statement) {
+		$prep_statement->execute();
+		$row = $prep_statement->fetch(PDO::FETCH_ASSOC);
+		$domain_name = $row['domain_name'];
+		$user_extension = $row['extension'];
+		$user_password = $row['password'];
+	}
+
+?>
+
+<style type="text/css">
+.inner {
+	position: absolute;
+}
+
+.buttons{
+	position: fixed;
+	bottom: 0;
+	right: 0;
+	/*width: 200px;*/
+	border: 10px solid rgba(255, 255, 255, 0);
+}
+</style>
+
+<div class="">
+   <div style="position: absolute;"><video id="remote_video" width="640" height="480" muted="muted"></video></div>
+   <div style="position: absolute;"><video id="local_video" width="160" height="120" muted="muted"></video></div>
+	<!--<input id='send' name="send" type="button" class='btn btn-success' onclick="send();" value="Send" />-->
+</div>
+<div class="buttons">
+	<input id='answer' name="answer" type="button" class='btn btn-success' style="display: none;" onclick="answer();" value="Answer" />
+	<input id='decline' name="decline" type="button" class='btn btn-danger' style="display: none;" onclick="" value="Decline" />
+
+	<input id='mute_audio' name="mute_audio" type="button" class='btn btn-danger' style="display: none;" onclick="mute_audio();" value="Mute Audio" />
+	<input id='mute_video' name="mute_video" type="button" class='btn btn-danger' style="display: none;" onclick="mute_video();" value="Mute Video" />
+
+	<input id='unmute_audio' name="unmute_audio" type="button" class='btn btn-danger' style="display: none;" onclick="unmute_audio();" value="Unmute Audio" />
+	<input id='unmute_video' name="unmute_video" type="button" class='btn btn-danger' style="display: none;" onclick="unmute_video();" value="Unmute Video" />
+
+	<input id='end' name="end" type="button" class='btn btn-danger' style="display: none;" onclick="hangup();" value="End" />
+	<br />
+</div>
+
+<script src="resources/sip-0.7.8.min.js"></script>
+<script language="JavaScript" type="text/javascript">
+
+<?php
+echo "	var session;\n";
+echo "	var config = {\n";
+echo "		uri: '".$user_extension."@".$domain_name."',\n";
+echo "		ws_servers: 'wss://".$domain_name.":7443',\n";
+echo "		authorizationUser: '".$user_extension."',\n";
+echo "		password: atob('".base64_encode($user_password)."')\n";
+echo "	};\n";
+?>
+
+	var user_agent = new SIP.UA(config);
+
+	//here you determine whether the call has video and audio
+	var options = {
+		media: {
+			constraints: {
+				audio: true,
+				video: true
+			},
+			render: {
+				remote: document.getElementById('remote_video'),
+				local: document.getElementById('local_video')
+			}
+		}
+	};
+	//makes the call
+	//session = user_agent.invite('sip:[email protected]', options);
+
+	//answer
+	user_agent.on('invite', function (session) {
+		document.getElementById('dialplad').style.display = "none";
+		document.getElementById('answer').style.display = "inline";
+		document.getElementById('decline').style.display = "inline";
+		document.getElementById('end').style.display = "none";
+		document.getElementById('mute_audio').style.display = "inline";
+		document.getElementById('mute_video').style.display = "inline";
+		var answer = document.getElementById('answer');
+		answer.addEventListener("click", function () {
+			session.accept({
+				media: {
+					render: {
+						remote: document.getElementById('remote_video'),
+						local: document.getElementById('local_video')
+					}
+				}
+			});
+
+		}, false);
+
+		var decline = document.getElementById('decline');
+		decline.addEventListener("click", function () {
+			session.cancel();
+			document.getElementById('dialplad').style.display = "grid";
+			document.getElementById('answer').style.display = "none";
+			document.getElementById('decline').style.display = "none";
+			document.getElementById('end').style.display = "none";
+		}, false);
+
+	});
+
+	user_agent.on('cancel', function (session) {
+		document.getElementById('dialplad').style.display = "grid";
+		document.getElementById('answer').style.display = "none";
+		document.getElementById('decline').style.display = "none";
+		document.getElementById('end').style.display = "none";
+		document.getElementById('dialpad').style.display = "inline";
+	});
+
+	user_agent.on('bye', function (session) {
+		hangup();
+	});
+
+	function answer() {
+		document.getElementById('dialplad').style.display = "none";
+		document.getElementById('answer').style.display = "none";
+		document.getElementById('decline').style.display = "none";
+		document.getElementById('end').style.display = "inline";
+	}
+
+	function hangup() {
+		//session.bye();
+		session.terminate();
+		//session.cancel();
+		end();
+	}
+
+	function send() {
+		destination = document.getElementById('destination').value;
+		document.getElementById('dialplad').style.display = "none";
+		document.getElementById('answer').style.display = "none";
+		document.getElementById('decline').style.display = "none";
+		document.getElementById('end').style.display = "inline";
+		document.getElementById('local_video').style.display = "inline";
+		document.getElementById('remote_video').style.display = "inline";
+		document.getElementById('mute_audio').style.display = "inline";
+		document.getElementById('mute_video').style.display = "inline";
+		session = user_agent.invite('sip:'+destination+'@www.fusionpbx.com', options);
+		
+		var remote_video = document.getElementById("remote_video");
+		remote_video.setAttribute("controls","controls");
+
+	}
+
+	function mute_audio(destination) {
+		session.mute({audio: true}); 
+		document.getElementById('mute_audio').style.display = "none";
+		document.getElementById('unmute_audio').style.display = "inline";
+	}
+
+	function mute_video(destination) {
+		session.mute({video: true});
+		document.getElementById('local_video').style.display = "none";
+		document.getElementById('mute_video').style.display = "none";
+		document.getElementById('unmute_video').style.display = "inline";
+	}
+
+	function unmute_audio(destination) {
+		session.unmute({audio: true}); 
+		document.getElementById('mute_audio').style.display = "inline";
+		document.getElementById('unmute_audio').style.display = "none";
+	}
+
+	function unmute_video(destination) {
+		session.unmute({video: true});
+		document.getElementById('local_video').style.display = "inline";
+		document.getElementById('mute_video').style.display = "inline";
+		document.getElementById('unmute_video').style.display = "none";
+	}
+
+	function end() {
+		document.getElementById('dialplad').style.display = "grid";
+		document.getElementById('answer').style.display = "none";
+		document.getElementById('decline').style.display = "none";
+		document.getElementById('end').style.display = "none";
+
+		document.getElementById('local_video').style.display = "none";
+		document.getElementById('remote_video').style.display = "none";
+		
+		document.getElementById('mute_audio').style.display = "none";
+		document.getElementById('mute_video').style.display = "none";
+		document.getElementById('unmute_audio').style.display = "none";
+		document.getElementById('unmute_video').style.display = "none";
+		
+		document.getElementById('dialpad').style.display = "grid";
+	}
+
+	function digit_add($digit) {
+		document.getElementById('destination').value = document.getElementById('destination').value + $digit;
+	}
+
+	function digit_delete($digit) {
+		destination = document.getElementById('destination').value;
+		document.getElementById('destination').value = destination.substring(0, destination.length -1);
+	}
+
+	function digit_clear($digit) {
+		document.getElementById('destination').value = '';
+	}
+
+</script>
+
+<div id='dialplad' class='dialpad' style='position:absolute;z-index:999;'>
+	<div style="align: left">
+		<input type="text" id="destination" name="destination" class="destination" value="" />
+	</div>
+	<div class="dialpad_wrapper">
+		<div class="dialpad_box" onclick="digit_add('1');"><strong>1</strong><sup>&nbsp;&nbsp;&nbsp;</sup></div>
+		<div class="dialpad_box"onclick="digit_add('2');"><strong>2</strong><sup>ABC</sup></div>
+		<div class="dialpad_box" onclick="digit_add('3');"><strong>3</strong><sup>DEF</sup></div>
+
+		<div class="dialpad_box" onclick="digit_add('4');"><strong>4</strong><sup>GHI</sup></div>
+		<div class="dialpad_box" onclick="digit_add('5');"><strong>5</strong><sup>JKL</sup></div>
+		<div class="dialpad_box" onclick="digit_add('6');"><strong>6</strong><sup>MNO</sup></div>
+
+		<div class="dialpad_box" onclick="digit_add('7');"><strong>7</strong><sup>PQRS</sup></div>
+		<div class="dialpad_box" onclick="digit_add('8');"><strong>8</strong><sup>TUV</sup></div>
+		<div class="dialpad_box" onclick="digit_add('9');"><strong>9</strong><sup>WXYZ</sup></div>
+
+		<div class="dialpad_box" onclick="digit_add('*');"><strong>*</strong><sup></sup></div>
+		<div class="dialpad_box" onclick="digit_add('0');"><strong>0</strong><sup></sup></div>
+		<div class="dialpad_box" onclick="digit_add('#');"><strong>#</strong><sup></sup></div>
+
+		<div class="dialpad_box" onclick="digit_clear();"><strong></strong><sup>CLEAR</sup></div>
+		<div class="dialpad_box" onclick="digit_delete();"><strong></strong><sup>DELETE</sup></div>
+		<div class="dialpad_box" onclick="send();"><strong></strong><sup>SEND</sup></div>
+	</div>
+</div>
+
+<style type="text/css" style="display: none;">
+
+	.destination {
+		/*background-color: #333333;*/
+		background-color: rgba(255, 255, 255, 0.5);
+		color: #333333;
+		border-radius: 5px;
+		padding: 10px;
+		margin: 3px;
+		width: 305px;
+	}
+
+	.dialpad_wrapper {
+		display: grid;
+		grid-template-columns: 100px 100px 100px;
+		grid-gap: 5px;
+		color: #444444;
+	}
+
+	.dialpad_box {
+		/*background-color: #333333;*/
+		background-color: rgba(0, 0, 0, 0.7);
+		color: #FFFFFF;
+		border-radius: 5px;
+		padding: 10px;
+	}
+
+	strong {
+		padding: 5px 5px;
+		color: #FFFFFF;
+		font-size: 30px;
+	}
+
+	sup {
+		padding: 3px 3px;
+		color: #FFFFFF;
+		font-size: 10px;
+	}
+
+</style>
+
+<?php
+
+//show the footer
+	require_once "resources/footer.php";
+
+?>