Support Overview

Tutorials

Client API Usage Examples

Upgrade Information

FAQ

New Release History

You are here:   Visualware >   MyConnection Server >   Support >   Client API Usage Examples >   Custom VoIP Test in HTML 5 (JavaScript)

Custom VoIP Test in HTML 5 (JavaScript)

The example below shows how a VoIP test can be published that allows the user to make various options based on their needs. For this example the choices are number of VoIP lines to simulate, length of test and which codec to simulate.

This exact example is achieved using purely JavaScript

Number of VoIP Lines (1-50)
Test length (secs)  
Codec  
   

Current Settings

VoIP Lines Simulated:
Test Length:
Codec:

Your browser does not support the HTML5 canvas tag.

Code Required

The code below can be added to an HTML page to mimic the test above.

Copy and paste the code below just under the "body" tag in the web page. This code is responsible for grabbing the parameters from the address bar in the browser and setting up the codec values, codec names and also the limit on the number of lines to simulate. The limit in this example is 50.

<script type="text/javascript">

<!-- The function below controls the lines to simulate limit -->

function linelimit() {

if (document.getElementById("voiplines").value > 50){
document.getElementById("voiplines").value = 50;
document.getElementById("limit").innerHTML = "The maximum number of lines that can be simulated is 50."
}
}

<!-- The function below grabs the parameters from the URL string -->

function gup( name ){
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) return "";
else return results[1];}

var voiplines = gup( 'voiplines' );
var testlength = gup( 'testlength' );
var codec = gup( 'codec' );

if (voiplines == "") { voiplines = "1"; }
if (testlength == "") { testlength = "15"; }
if (codec == "") { codec = "g711"; }

var g711 = " <param name=\"voip_packetspersecond\" value=\"50\"></param><param name=\"voip_bytesperpacket\" value=\"160\"></param>";
var g729 = " <param name=\"voip_packetspersecond\" value=\"50\"></param><param name=\"voip_bytesperpacket\" value=\"20\"></param>";
var g72316 = " <param name=\"voip_packetspersecond\" value=\"34\"></param><param name=\"voip_bytesperpacket\" value=\"24\"></param>";
var g72315 = " <param name=\"voip_packetspersecond\" value=\"34\"></param><param name=\"voip_bytesperpacket\" value=\"20\"></param>";
var g72632 = " <param name=\"voip_packetspersecond\" value=\"50\"></param><param name=\"voip_bytesperpacket\" value=\"80\"></param>";
var g72624 = " <param name=\"voip_packetspersecond\" value=\"50\"></param><param name=\"voip_bytesperpacket\" value=\"60\"></param>";
var g728 = " <param name=\"voip_packetspersecond\" value=\"34\"></param><param name=\"voip_bytesperpacket\" value=\"60\"></param>";

var nameg711 = "G.711 (64 Kbps)";
var nameg729 = "G.729 (8 Kbps)";
var nameg72316 = "G.723.1 (6.3 Kbps)";
var nameg72315 = "G.723.1 (5.3 Kbps)";
var nameg72632 = "G.726 (32 Kbps)";
var nameg72624 = "G.726 (24 Kbps)";
var nameg728 = "G.728 (16 Kbps)";

</script>


Now copy and paste the code below where you want the choices to go (how many VoIP lines, codec etc). Note the table widths etc may need adjusting to fit in with the web page being copied to.

<form method="get" action="voip.html">

<table width="900" cellpadding="5" cellspacing="0"><tr>
<td width="22%">Number of VoIP Lines (1-50)</td>
<td width="8">

<script type="text/javascript">
document.write("<input type=\"text\" id=\"voiplines\" name=\"voiplines\" maxlength=\"2\" size=\"3\" onChange=\"linelimit()\" value=\""+voiplines+"\">");
</script>
</td>
<td width="70%"><div id="limit" style="font-size:10px; font-family:Tahoma, Geneva, sans-serif; font-weight:bold;"></div></td>
</tr>
<tr>
<td>Test length (secs)</td>
<td><select name="testlength">

<script type="text/javascript">

document.write("<option id=\"length15\" value=\"15\""); if (testlength == "15") { document.write("selected"); } document.write(">15</option>");
document.write("<option id=\"length30\" value=\"30\""); if (testlength == "30") { document.write("selected"); } document.write(">30</option>");
document.write("<option id=\"length45\" value=\"45\""); if (testlength == "45") { document.write("selected"); } document.write(">45</option>");
document.write("<option id=\"lenght60\" value=\"60\""); if (testlength == "60") { document.write("selected"); } document.write(">60</option>");

</script>

</select>

</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Codec</td>
<td><select name="codec">

<script type="text/javascript">

document.write("<option id=\"g711\" value=\"g711\""); if (codec == "g711") { document.write("selected"); } document.write(">G.711 (64 Kbps)</option>");
document.write("<option id=\"g729\" value=\"g729\""); if (codec == "g729") { document.write("selected"); } document.write(">G.729 (8 Kbps)</option>");
document.write("<option id=\"g72316\" value=\"g72316\""); if (codec == "g72316") { document.write("selected"); } document.write(">G.723.1 (6.3 Kbps)</option>");
document.write("<option id=\"g72315\" value=\"g72315\""); if (codec == "g72315") { document.write("selected"); } document.write(">G.723.1 (5.3 Kbps)</option>");
document.write("<option id=\"g72632\" value=\"g72632\""); if (codec == "g72632") { document.write("selected"); } document.write(">G.726 (32 Kbps)</option>");
document.write("<option id=\"g72624\" value=\"g72624\""); if (codec == "g72624") { document.write("selected"); } document.write(">G.726 (24 Kbps)</option>");
document.write("<option id=\"g728\" value=\"g728\""); if (codec == "g728") { document.write("selected"); } document.write(">G.728 (16 Kbps)</option>");

</script>

</select>

</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input type="submit" value="Apply"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</form>


Now copy and paste the code below where you want the current settings text and applet to appear. The only change that will be needed is the codebase, highligted in blue below. This should be changed to the address of your MyConnection Server installation.

<table width="100%" cellpadding="5" cellspacing="0">
<tr><td width="30%" valign="top">

<b>Current Settings</b>
<br><br><b>VoIP Lines Simulated</b>: <script type="text/javascript"> document.write(voiplines); </script> <br>
<b>Test Length</b>: <script type="text/javascript"> document.write(testlength); </script><br>
<b>Codec</b>:

<script type="text/javascript">

if (codec == "g711") { document.write(nameg711); }
else if (codec == "g729") { document.write(nameg729); }
else if (codec == "g72316") { document.write(nameg72316); }
else if (codec == "g72315") { document.write(nameg72315); }
else if (codec == "g72632") { document.write(nameg72632); }
else if (codec == "g72624") { document.write(nameg72624); }
else { document.write(nameg728); }

</script><br>
</td>
<td width="70%" align="left">

<p align="center">

<div id="canvas-container">
<canvas id="canvs3" style="background-color:#F0F0F0;">Your browser does not support the HTML5 canvas tag.</canvas>
</div>

<script type="text/javascript">

var m_applet_params = '<applet MAYSCRIPT name="myspeed" code="myspeedserver/applet/myspeed.class" codebase="http://mcssjc.visualware.com" archive="/myspeed/myspeed_s_8.jar,/myspeed/plugins_s_8.jar" width="600" height="400"><param name="permissions" value="all-permissions"><param name="testspecid" value="-1">';
m_applet_params += '<param name="voip_lines" value="'+voiplines+'">';
m_applet_params += '<param name="voip_simulationseconds" value="'+testlength+'">';
if (codec == "g711") { m_applet_params += g711; }
else if (codec == "g729") { m_applet_params += g729; }
else if (codec == "g72316") { m_applet_params += g72316; }
else if (codec == "g72315") { m_applet_params += g72315; }
else if (codec == "g72632") { m_applet_params += g72632; }
else if (codec == "g72624") { m_applet_params += g72624; }
else { m_applet_params += g728; }
m_applet_params += '</applet>';

</script>

</p>

</td></tr></table>

Don't forget to include the boot library include as the last entry in the page (right before the closing </body> tag.

<script src="http://mcssjc.visualware.com/boot.lib"></script>

</body>

 

 

MyConnection Server

Home
Online Testing Portal
Download
Purchase
Resources
Support

Visualware Products

VisualRoute
eMailTrackerPro
Visual IP Trace

   

© Visualware Inc. 2017 - All Rights Reserved