kenmirrors
/
freeswitch
mirror of https://github.com/signalwire/freeswitch.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

FS-7509: mess with html5

This commit is contained in:
Anthony Minessale 2015-03-04 18:15:26 -06:00 committed by Michael Jerris
parent 3e7c0f6558
commit 1857da8a54
2 changed files with 113 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
html5/verto/video_demo/index.html
View File

@ -85,17 +85,21 @@
</div>
<div data-role="page" id="page-incall" align="center">
<div data-role="header" id="calltitle" class="pageheader">
Verto&trade; IN CALL
</div>
<div id="conf">
<div style="color:black;font-family: verdana" align="center" id="conf_count"></div>
<table width="1000" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
</table>
</div>
<br clear=all>
<div id="fs" style="width:100%;height:100%">
<div id="rows" style="background-color:#f9f9f9">
<span id=usrinner style="margin:25px">
<span id=usrctl>User Controls</span>
<div id=usr2>
<button data-inline="true" id="hold">HOLD</button>
<button data-inline="true" id="hupbtn">End Call</button>
@ -106,19 +110,25 @@
<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">Full Screen</button>
<button data-inline="true" id="nofullbtn">Exit Full Screen</button>
<button data-inline="true" id="vmutebtn">Toggle Video Mute</button>
</span>
<div id="media">
<video id="webcam" autoplay="autoplay"></video>
</div>
</span>
<br><br>
<div id="conf" style="width:100%;height:100%">
<div style="color:black;font-family: verdana" align="center" id="conf_count"></div><br>
<table width="1000" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
</table>
</div><!---conf-->
<div id="message" hidden="true">
<hr class="l1" width="500"/>
@ -135,8 +145,8 @@
</div>
<div id="conf_mod"></div>
<div style="color:blue" id="conf_display"></div>
<img src="img/verto_black_web.gif" width="300"><br><br>
@ -160,6 +170,29 @@
<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%"></video>
</div><!-- rows -->
<br><br>
</div>

68
html5/verto/video_demo/verto.js
View File

@ -12,7 +12,7 @@ var vid_height = 180;
var local_vid_width = 320;
var local_vid_height = 180;
var is_full_screen = false;
var outgoingBandwidth;
var incomingBandwidth;
var vqual;
@ -517,8 +517,52 @@ $("#vmutebtn").click(function() {
cur_call.dtmf("*0");
});
var is_full = false;
var usrto;
function noop() { return; }
$("#nofullbtn").click(function() {
if (document.webkitFullscreenEnabled) {
document.webkitExitFullscreen();
} else if (document.mozFullScreenEnabled) {
document.mozExitFullScreen();
}
});
function on_full(which)
{
is_full = which;
if (is_full) {
$("#rows").css("position", "absolute").css("z-index", "2");
} else {
$("#rows").css("position", "static").css("z-index", "2");
clearTimeout(usrto);
}
}
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange',
function(e) {
if (!is_full) {
on_full(true);
} else {
on_full(false);
}
});
$("#fullbtn").click(function() {
full_screen("webcam");
full_screen("fs");
// $("#mod1").css("position", "absolute").css("z-index", "2");
});
$("#biggerbtn").click(function() {
@ -1137,6 +1181,26 @@ $(document).ready(function() {
$('#devices').hide();
$('#showdemo').show();
// $("#rows").css("position", "absolute").css("z-index", "2");
$("#usrctl").show();
$("#usr2").hide();
$("#usrctl").mouseover(function() {
$("#mod2").hide();
$("#usr2").show();
});
$("#usr2").mouseover(function() {
$("#mod2").hide();
clearTimeout(usrto);
});
$("#usr2").mouseleave(function() {
usrto = setTimeout(function() { $("#usr2").hide(); }, 2000);
});
init();