HTML
Hah, now we're entering the inner sanctum of our applications. Actually the HTML (index.html) is the same for both the SIP.js and the VERTO version. The only thing to change is which JavaScript files to load.
The VERTO flavor is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="A WebRTC client for Verto FreeSWITCH module">
<meta name="author" content="Giovanni Maruzzelli">
<link rel="icon" href="favicon.ico">
<title>WebRTC Rooms</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="high.css" rel="stylesheet">
</head>
<body>
<div id="conference">
<input type="hidden" id="passwd" value="mysecretpassword_LOL" />
<input type="hidden" id="cidnumber" value="WebRTC" />
<div class="form-signin">
<h2 class="form-signin-heading">WebRTC Rooms</h2>
<div id="content" class="form-signin-content">
<input type=number id="login" min=1000 max=1019 step=1 class="form-control" placeholder="Login with a Number between 1000 and 1019" required autofocus>
<button class="btn btn-lg btn-primary btn-success" data-inline="true" id="loginbtn">Login</button>
<input id="ext" class="form-control" placeholder="Insert the Extension to Call or Wait to be Called" required autofocus>
<button class="btn btn-lg btn-primary btn-success" data-inline="true" id="callbtn">Call</button>
<button class="btn btn-lg btn-primary btn-danger" data-inline="true" id="backbtn">Back</button>
</div>
<div id="video1" align="center" class="embed-responsive embed-responsive-4by3">
<video id="webcam" autoplay="autoplay" class="embed-responsive-item"> </video>
</div>
<button class="btn btn-lg btn-primary btn-danger" data-inline="true" id="hupbtn">Hangup</button>
<br id="br" />
<textarea id="chatwin" class="form-control" rows="5" readonly></textarea>
<br id="br" />
<input id="chatmsg" class="form-control" rows="1" placeholder="type here your chat msg" autofocus></input>
<button class="btn btn-primary btn-success" data-inline="true" id="chatsend">Send Msg</button>
</div>
<div align="center" class="inner">
<p>2017<br/>Giovanni Maruzzelli - OpenTelecom.IT</p>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>
<script type="text/javascript" src="js/verto-min.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript" src="high2.js"></script>
</body>
</html>
This file uses the bootstrap CSS framework, so it works perfectly on mobile and is reactive to different display format and sizes. The first few lines serve just for this, to setup the minimalist but quick GUI interface.
Then, in the HTML body, we have a lot of DIVs, BUTTONs, INPUTs, TEXTAREAs, each of them with its own "id".
We will use that "id" value from Javascript, to refer to each single HTML element when we want to show or hide the item (eg, the login button disappear after you register to the server), or to read or write its input and output area (we want to read what extension the user want to call, and we want to display chat messages in the chat textarea).
We have the special "video" element, which bootstrap.css displays in a beautyful way on any device. Its "id" will be referenced by both the VERTO and SIP.js initialization scripts (eg, they need to know where to display the video stream).
The last few lines are the scripts to load.
We recognize verto-min.js from /usr/src/freeswitch/html5/verto/video_demo/js/verto-min.js, one flavor of the VERTO JavaScript library distributed in FreeSWITCH sources.
Our script, the one that interact with the HTML elements' "id" is named high2.js.
The final lines of index.html SIP.js version load different Javascript:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.json-2.4.min.js"></script>
<script type="text/javascript" src="js/sip.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<script type="text/javascript" src="highsipjs2.js"></script>
</body>
</html>
We recognize the sip.js library (linked to the latest release, available at http://sipjs.com/download/ , while our script is highsipjs2.js
Here's a screenshot of the VERTO flavor, with Verto objects in Javascript console
