<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Replace the clientid Here with your Client ID. --> <meta name="google-signin-clientid" content="675954646436-qs593t199b1nt7gj0v6p4njau8724oss.apps.googleusercontent.com"> <meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.profile.emails.read"/> <meta name="google-signin-requestvisibleactions" content="http://schema.org/AddAction" /> <meta name="google-signin-cookiepolicy" content="single_host_origin" /> <!------> <link rel="stylesheet" href="css/jquery.mobile.min.css"/> <link rel="stylesheet" type="text/css" href="css/jsontable.css" /> <link rel="shortcut icon" href="favicon.ico" /> <meta charset="utf-8" /> <title>FreeSWITCH Verto™ Video Transcoding Demo</title> <style type="text/css"> .pageheader { font-size: 22px; font-weight: normal; height: 27px; } .ctlbtn { border: 2px; border-style:outset; color: #ffffff; min-width: 125px; background-color: #666666; font-face: arial; height:18px; font-size:7pt; } .ctlbtn:hover { color: #ffffae; cursor: pointer; } .vidbtn { font-face: arial; font-size:7pt; } #chatwin { background-color: #eeeeee; width: 500px; height:150px; overflow-y: scroll; scrolling: auto; text-align: left; border-style:inset; font-size: 10pt; color: #3333ff; resize:both; } .chatuid { font-size: 7pt; font-weight: bold; color: #ff3333; } .chatimg { max-width:100px; } .l1 { border:1; background-color:#fefefe; height:1px; opacity:0.4; } #chatmsg { width:400px; max-height:40px; } div#preload { display: none; } </style> </head> <body> <div data-role="page" id="page-login" align="center"> <div data-role="header" class="page-header"> FreeSWITCH Verto™ Video Transcoding Demo </div> </div> <div data-role="page" id="page-enum" align="center"> <div data-role="header" class="page-header"> FreeSWITCH Verto™ Looking For Devices </div> <div id="search" hidden="true"> <img src="images/search.gif"/> </div> </div> <div data-role="page" id="page-bwtest" align="center"> <div data-role="header" class="page-header"> FreeSWITCH Verto™ Testing Network Connection </div> <h1>Testing Network Connection</h1> <img src="images/speed.gif"/> </div> <div data-role="page" id="page-incall" align="center"> <div data-role="header" id="calltitle" class="pageheader"> Verto™ IN CALL </div> <div id="fs" xstyle="width:100%;height:100%"> <div id="rows" style="background-color:#f9f9f9"> <span id=usrinner style="margin:25px"> <span id=usrctl><b>User Controls</b></span> <div id=usr2> <div id="canvasButtons" hidden="true"> <button data-inline="true" id="hupbtn2">End Call</button> <button data-inline="true" id="fullbtn2">Enter Full Screen</button> </div> <div id="mainButtons"> <button data-inline="true" id="hold">HOLD</button> <button data-inline="true" id="hupbtn">End Call</button> <button data-inline="true" id="mutebtn">Toggle Audio Mute</button> <button data-inline="true" id="localmutebtn">Toggle Local Audio Mute</button> <button data-inline="true" id="localvidmutebtn">Toggle Local Video Mute</button> <!-- <button data-inline="true" class="startxferbtn">Transfer</button>--> <span class="sharediv"> <button data-inline="true" id="sharebtn">Share</button> <button data-inline="true" id="nosharebtn">End Share</button> </span> <span class="sharediv"> <button data-inline="true" id="smallerbtn">Smaller - </button> <button data-inline="true" id="biggerbtn">Bigger +</button> <button data-inline="true" id="fullbtn">Enter Full Screen</button> <button data-inline="true" id="vmutebtn">Toggle Video Mute</button> </span> </div> <br><br> <div id="conf" xstyle="width:100%;height:100%"> <div style="color:black;font-family: verdana" align="center" id="conf_count"></div><br> <table width="1400" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable"> </table> <div id="canvasui" style="width:700px;" hidden="true"> <br><br> <table border=0 cellspacing=0 cellpadding=0> <tr><td width=180><b>Additional Canvas</b>:</td><td><select style="width:200px;" id="canvasid"></select></td><td width=220 align=right><button id="canvasbut" style="width:200px;">Open Canvas</button></td></tr> </table> <br><br> </div> </div><!---conf--> <div id="message" hidden="true"> <hr class="l1" width="500"/> <div id="chatwin"></div> <!-- <textarea readonly id="chatwin"></textarea>--> <table><tr><td><textarea id="chatmsg"></textarea></td><td><button id="chatsend" style="width:100px;">Send</button></td></tr></table> <hr class="l1" width="500"/><br> </div> <div id="hctop" hidden="true"> <br/><br/> <div id="hcmessage"></div> <br><br> </div> <div class="ui-field-contain" id="xferdiv"> <input data-mini="true" type="text" id="xferto"><br> <button data-inline="true" id="cancelxferbtn">Cancel Transfer</button> <button data-inline="true" class="startxferbtn">Complete Transfer</button> </div> <img src="img/verto_black_web.gif" width="300"><br><br> <div id=keypad> <button class="dtmf" data-inline="true">1</button> <button class="dtmf" data-inline="true">2</button> <button class="dtmf" data-inline="true">3</button> <br> <button class="dtmf" data-inline="true">4</button> <button class="dtmf" data-inline="true">5</button> <button class="dtmf" data-inline="true">6</button> <br> <button class="dtmf" data-inline="true">7</button> <button class="dtmf" data-inline="true">8</button> <button class="dtmf" data-inline="true">9</button> <br> <button class="dtmf" data-inline="true">*</button> <button class="dtmf" data-inline="true">0</button> <button class="dtmf" data-inline="true">#</button> </div> <br><br> <div id="conf_mod" style="width:450px"></div> <div style="color:blue" id="conf_display"></div> </span> </div> </div><!-- fs --> <video id="webcam" autoplay="autoplay" style="width:100%;height:100%;object-fit:inherit;"></video> <br><br> <table><tr><td> <div style="width:500px;max-height:300px;overflow-y:scroll;display:block;unicode-bidi:embed;font-family:tahoma;white-space:pre;size:14pt;text-align:left" id="rtt_in"></div> </td></tr> <tr><td> <textarea style="width:500px;height:200px" id="rtt"></textarea> </td></tr> </table> <!--<video id="local_webcam" autoplay="autoplay" style="width:100%;height:100%;object-fit:inherit;"></video>--> </div><!-- rows --> <br><br> </div> <div data-role="page" id="page-main" align="center"> <div data-role="header" class="pageheader"> FreeSWITCH Verto™ Video Transcoding Demo (<span id="bwinfo">*checking*</span>) </div> <br> <center> <table width="1024" border="0"> <tr><td> <center><a target="_CC2104" href="https://www.cluecon.com"><img border="0" width="300" src="img/cc_banner.gif"></a></center></td> <td><center> <img src="img/verto_black_web.gif" width="300"></center> </td></tr> </table></center><br><br> <div id="offline"> <div id="errordisplay" style="font-weight:bold;font-size:18px;color:#ae0000"></div> <div class="ui-field-contain"> <label for="name">Login</label> <input type="text" size="20" id="login"/> </div> <div class="ui-field-contain"> <label for="name">Password</label> <input type="password" size="20" id="passwd"/> </div> <!-- <div class="ui-field-contain"> <label for="name">CID Name</label> <input type="text" size="30" class="name"/> </div> <div class="ui-field-contain"> <label for="name">CID Number</label> <input type="text" size="20" class="cid"/> </div> --> <div class="ui-field-contain"> <label for="name">Hostname</label> <input type="text" size="20" id="hostName"/> </div> <div class="ui-field-contain"> <label for="name">Websocket URL</label> <input type="text" size="20" id="wsURL"/> </div> <br><br> <img src="img/verto_black_web.gif" width="300"> <br><br> <button data-inline="true" id="loginbtn">Log In</button> <script> function playvid(file) { $("#ext").val("vid_" + file); $("#callbtn").click(); } function dial(ext) { $("#ext").val(ext); $("#callbtn").click(); } </script> <br><br><br> </div> <div id="online" align="center" style="width:75%"> <div class="ui-field-contain"> <script> function toggle_demo() { if ($('#demos').is(':visible')) { $('#demos').hide(); $('#showdemo').text("Show Demo Extensions"); } else { $('#devices').hide();$('#showdevices').show();$('#demos').show(); $('#showdemo').text("Hide Demo Extensions"); } } function toggle_device() { if ($('#devices').is(':visible')) { $('#devices').hide(); $('#showdevices').text("View Device Settings"); } else { $('#devices').show();$('#demos').hide(); $('#showdevices').text("Hide Device Settings"); } } </script> <!--<button data-inline="true" id="showdemo" onclick="toggle_demo();">View Demo Extensions</button>--> <button data-inline="true" id="showdevices" onclick="toggle_device();">View Device Settings</button> <button data-inline="true"id="speedbtn">Check Speed</button> <button data-inline="true"id="logoutbtn">Log Out</button> <div id="devices" style="border-style:outset;border-width:2px"> <div id="camdiv"> <legend><b>Camera</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usecamera"></select> <br> <legend><b>Share Device</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="useshare"></select> <br><br></div> <legend><b>Microphone</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usemic"></select> <br> <legend><b>Speaker</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usespeak"></select> <Br clear="all"><Br> <div style="xvisibility:hidden"> <label><input id="use_vid" type="checkbox" value="foo" > Use Video</label> <label><input id="use_stereo" type="checkbox" value="foo" > Stereo Audio</label> <label><input id="use_stun" type="checkbox" value="foo" > Use STUN</label> <!-- <label><input id="local_video" type="checkbox" value="foo" > Local Video</label>--> </div> <Br clear="all"> <br><br> <div > <fieldset data-role="controlgroup" data-type="horizontal"> <legend><b>Video Quality</b>:</legend> <input type="radio" name="vqual" id="vqual_qqvga" value="qqvga"> <label for="vqual_qqvga">QQVGA 160x120</label> <input type="radio" name="vqual" id="vqual_qvga" value="qvga"> <label for="vqual_qvga">QVGA 320x240</label> <input type="radio" name="vqual" id="vqual_vga" value="vga"> <label for="vqual_vga">VGA 640x480</label> <input type="radio" name="vqual" id="vqual_qvga_wide" value="qvga_wide"> <label for="vqual_qvga_wide">QVGA WIDE 320x180</label> <input type="radio" name="vqual" id="vqual_vga_wide" value="vga_wide"> <label for="vqual_vga_wide">VGA WIDE 640x360</label> <input type="radio" name="vqual" id="vqual_hd" value="hd"> <label for="vqual_hd">HD 1280x720</label> <input type="radio" name="vqual" id="vqual_hhd" value="hhd"> <label for="vqual_hhd">HHD 1920x1080</label> </fieldset> </div><br clear="all"><br> <div > <fieldset data-role="controlgroup" data-type="horizontal"> <legend><b>Max Outgoing Bandwidth</b>:</legend> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_250kb" value="250"> <label for="outgoingBandwidth_250kb">250kb</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_500kb" value="500"> <label for="outgoingBandwidth_500kb">500kb</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_1024kb" value="1024"> <label for="outgoingBandwidth_1024kb">1mb</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_1536kb" value="1536"> <label for="outgoingBandwidth_1536kb">1.5mb</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_2048kb" value="2048"> <label for="outgoingBandwidth_2048kb">2mb</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_5120kb" value="5120"> <label for="outgoingBandwidth_5120kb">5mb</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_0kb" value="0"> <label for="outgoingBandwidth_0kb">No Limit</label> <input type="radio" name="outgoingBandwidth" id="outgoingBandwidth_default" value="default"> <label for="outgoingBandwidth_default">Server Default</label> </fieldset> </div><br clear="all"><br> <div > <fieldset data-role="controlgroup" data-type="horizontal"> <legend><b>Max Incoming Bandwidth</b>:</legend> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_250kb" value="250"> <label for="incomingBandwidth_250kb">250kb</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_500kb" value="500"> <label for="incomingBandwidth_500kb">500kb</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_1024kb" value="1024"> <label for="incomingBandwidth_1024kb">1mb</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_1536kb" value="1536"> <label for="incomingBandwidth_1536kb">1.5mb</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_2048kb" value="2048"> <label for="incomingBandwidth_2048kb">2mb</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_5120kb" value="5120"> <label for="incomingBandwidth_5120kb">5mb</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_0kb" value="0"> <label for="incomingBandwidth_0kb">No Limit</label> <input type="radio" name="incomingBandwidth" id="incomingBandwidth_default" value="default"> <label for="incomingBandwidth_default">Server Default</label> </fieldset> </div><br clear="all"><br> <label><input id="use_dedenc" type="checkbox" value="foo" > Use Dedicated Remote Encoder</label> <label><input id="mirror_input" type="checkbox" value="foo" >Scale Remote Video To Match Camera</label> <br><br> <center><button data-inline="true" id="refreshbtn">Refresh Device List</button> <button data-inline="true" id="hidedevices" onclick="toggle_device()">Save Device Settings</button> </center> <Br clear="all"><br> </div> <br><br> <div id="demos" style="border-style:outset"> <h2>Video Streaming (USE STEREO HEADPHONES IF POSSIBLE)</h2> <div style="border-style:inset;border-width:1px;background-color:#eeeeee"> <button class="vidbtn" data-inline="true" onclick="playvid('vuc.mp4')">FreeSWITCH Team on VUC (Summer 2014)</button> <button class="vidbtn" data-inline="true" onclick="playvid('briancc.mp4')">Brian West ClueCon Spot (Summer 2010)</button> <button class="vidbtn" data-inline="true" onclick="playvid('bin1.mp4')">Binaural Audio Demo</button> <button class="vidbtn" data-inline="true" onclick="playvid('binrafting.mp4')">Binaural River Rafting</button> <button class="vidbtn" data-inline="true" onclick="playvid('splash.mp4')">Binaural Splash Mountian</button> <br> <button class="vidbtn" data-inline="true" onclick="playvid('3d_demo.mp4')">Binaural Spatial Demo</button> <button class="vidbtn" data-inline="true" onclick="playvid('gravity.mp4')">Gravity Movie Trailer(2k)</button> <button class="vidbtn" data-inline="true" onclick="playvid('awesome1.mp4')">Everything is Awesome</button> <button class="vidbtn" data-inline="true" onclick="playvid('awesome2.mp4')">Everything is Awesome 2</button> <button class="vidbtn" data-inline="true" onclick="playvid('sirius.mp4')">Sirius Live</button> <br> <button class="vidbtn" data-inline="true" onclick="playvid('swimp.mp4')">Imperial March Live</button> <button class="vidbtn" data-inline="true" onclick="playvid('imphd.mp4')">Imperial March on Floppy Drives</button> <button class="vidbtn" data-inline="true" onclick="playvid('notime.mp4')">Ain't Nobody Got Time</button> <button class="vidbtn" data-inline="true" onclick="playvid('hdtest.mp4')">Video HD Demo</button> </div> <br> <h2>Codec Test and Conference</h2> <div style="border-style:inset;border-width:1px;background-color:#eeeeee"> <button class="vidbtn" data-inline="true" onclick="dial('decode')">Video from your Webcam decoded then re-encoded w/ MOH</button> <button class="vidbtn" data-inline="true" onclick="dial('3500')">Video Transcoded Conference</button> </div> </div> <br><br><br><hr><br> <div class="ui-field-contain" style="text-align:right;"> <label for="name">Name</label> <input type="text" size="30" id="cidname"/> </div> <div class="ui-field-contain" style="text-align:right;"> <label for="name">CID Number</label> <input type="text" size="20" id="cid"/> </div> <div class="ui-field-contain" style="text-align:right;"> <label for="name">Email</label> <input type="text" size="20" id="email"/> </div> <div class="ui-field-contain" style="text-align:right;"> <label for="name">Avatar</label> <input type="text" size="20" id="avatar" /> </div> <div class="ui-field-contain" style="text-align:right;"> <label for="name">Extension</label> <input type="text" id="ext""/> </div> <img width="200" id="avatar_img"/><br> <!--Comment out to "EOC" comment to disable Googleb Login --> <button data-inline="true" id="signinButton">Import Google Credentials</button> <!--<button data-inline="true" id="signoutButton">Sign out with Google</button>--> <button data-inline="true" id="callbtn">Call Extension</button> <br> <hr> <br><br> <div style="color:blue" id="main_info"> </div><br><br> </div> <br> <br> <!-- <b>TEXT</b><br>To: <input type="text" size="20" id="textto"/> MSG: <input type="text" size="40" id="textmsg"/> <button id="vtxtbtn">Send</button> --> </div> <table id="directory" width=500 style="font-size:11pt;font-face:arial"> <tr><td align=center colspan=2><b>FreeSWITCH VERTO™ WebRTC Demo Directory<Br><br></td></tr> <tr><td width=100><b>Dial</b></td><td><b>Desc</b></td></tr> <tr><td align=left colspan=2><hr></td></tr> <tr><td>3d1</td><td> 3D sound demo #1</td></tr> <tr><td>3d2</td><td> 3D sound demo #2</td></tr> <tr><td>stereo1</td><td> Stereo sound demo #1</td></tr> <tr><td>stereo2</td><td> Stereo sound demo #2</td></tr> <tr><td>stereo3</td><td> Stereo sound demo #3</td></tr> <tr><td>3500</td><td>Local 48k Stereo Conference</td></tr> <tr><td> </td></tr> <tr><td>cluecon</td><td> ClueCon Hotline</td></tr> <tr><td><number></td><td>Call a US/Canda Number</td></tr> <tr><td>vuc</td><td>VoIP Users Conference</td></tr> <tr><td>888</td><td>FreeSWITCH Community Conference</td></tr> <tr><td>3300</td><td>Local 48k Conference</td></tr> <tr><td>5000</td><td>Try the Demo IVR</td></tr> <tr><td>9664</td><td>Listen to Hold Music</td></tr> <tr><td>9386</td><td>Funny Prompts</td></tr> <tr><td>9198</td><td>Tetris (tone generator)</td></tr> <tr><td colspan=2><Br> <center> <br><br><br> </td></tr> </td></tr> </table> </div><!-- /page --> <div data-role="page" id="dialog-logout" data-close-btn="none"> <div data-role="header"> <h2>Logged Out</h2> </div> <div data-role="content"> <p>You have been logged out or disconnected from the server.</p> <button onclick="$('#dialog-logout').dialog('close')">OK</button> </div> </div> <div data-role="page" id="dialog-login-error" data-close-btn="none"> <div data-role="header"> <h2>Login Error</h2> </div> <div data-role="content"> <p>Error logging in</p> <button onclick="$('#dialog-login-error').dialog('close')">OK</button> </div> </div> <div data-role="page" id="dialog-hold" data-close-btn="none"> <div data-role="header"> <h2>Call On hold</h2> </div> <div data-role="content"> <p>The call is on hold</p> <button onclick="$('#dialog-hold').dialog('close');cur_call.toggleHold();">Resume Call</button> </div> </div> <div data-role="page" id="dialog-incoming-call" data-close-btn="none"> <div data-role="header"> <h2>Incoming Call</h2> </div> <div data-role="content"> <div id="dialog-incoming-call-txt"><p>Incoming Call</p></div> <button id="ansbtn">Answer</button> <div id="vansdiv"><button id="vansbtn">Answer Video</button></div> <button id="declinebtn">Decline</button> </div> </div> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile.min.js"></script> <script type="text/javascript" src="js/jquery.json-2.4.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="js/verto-min.js"></script> <script type="text/javascript" src="js/getScreenId.js"></script> <script type="text/javascript" src="js/md5.min.js"></script> <script type="text/javascript" src="js/jquery.hipchat.js"></script> <script type="text/javascript" src="verto.js"></script> <script src="https://apis.google.com/js/client:platform.js?onload=render" async defer></script> <div id="preload" hidden=true> <img src="images/search.gif"/> </div> </body> </html>