kenmirrors/freeswitch
1
0
Fork 0
mirror of https://github.com/signalwire/freeswitch.git synced 2025-04-17 01:02:12 +00:00
Code Issues Projects Releases Wiki Activity

FS-7509: update ui

Browse Source
This commit is contained in:
Anthony Minessale 2015-02-20 17:19:09 -06:00 committed by Michael Jerris
parent 1c6a15fde4
commit e93a850e25
3 changed files with 102 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,17 +22,17 @@
font-face: arial; font-face: arial;
height:18px; height:18px;
font-size:7pt; font-size:7pt;
} }
.vidbtn {
font-face: arial;
font-size:7pt;
};
.ctlbtn:hover { .ctlbtn:hover {
color: #ffffae; color: #ffffae;
cursor: pointer; cursor: pointer;
} }
.vidbtn {
font-face: arial;
font-size:7pt;
}
#chatwin #chatwin
{ {
@ -92,7 +92,7 @@
<div id="conf"> <div id="conf">
<div style="color:black;font-family: verdana" align="center" id="conf_count"></div> <div style="color:black;font-family: verdana" align="center" id="conf_count"></div>
<table width="800" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable"> <table width="1000" cellspacing="0" cellpadding="0" border="0" align="center" id="conf_list" class="jsDataTable">
</table> </table>
</div> </div>
@ -115,25 +115,30 @@
<div id="conf_mod"></div> <div id="conf_mod"></div>
<div style="color:blue" id="conf_display"></div> <div style="color:blue" id="conf_display"></div>
<!-- <button data-inline="true" id="hold">HOLD</button>--> <button data-inline="true" id="hold">HOLD</button>
<button data-inline="true" id="hupbtn">End Call</button> <button data-inline="true" id="hupbtn">End Call</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="sharebtn">Share</button>
<button data-inline="true" id="nosharebtn">End Share</button> <button data-inline="true" id="nosharebtn">End Share</button>
<!-- <button data-inline="true" class="startxferbtn">Transfer</button>--> </span>
<br><br>
<br><br><br>
<img src="img/verto_black_web.gif" width="300"><br><br> <img src="img/verto_black_web.gif" width="300"><br><br>
<div id="media"> <div id="media">
<div class="sharediv">
<button data-inline="true" id="smallerbtn">Smaller - </button> <button data-inline="true" id="smallerbtn">Smaller - </button>
<button data-inline="true" id="biggerbtn">Bigger +</button> <button data-inline="true" id="biggerbtn">Bigger +</button>
<button data-inline="true" id="fullbtn">Full Screen</button> <button data-inline="true" id="fullbtn">Full Screen</button>
<table border=1 cellspacing=0 cellpadding=0 width=95%><tr> </div>
<table border=0 cellspacing=0 cellpadding=0 width=95%><tr>
<td valign=top align=center><video id="webcam" autoplay="autoplay"></video></td> <td valign=top align=center><video id="webcam" autoplay="autoplay"></video></td>
</tr><tr> </tr><tr>
<td valign=top align=left><video id="local_webcam" autoplay="autoplay" style="transform: scale(-1, 1);webkit-transform: scale(-1, 1);"></video></td>
<!-- <td valign=top align=left>
<br><br><video id="local_webcam" autoplay="autoplay" style="transform: scale(-1, 1);webkit-transform: scale(-1, 1);"></video></td>-->
</tr></table> </tr></table>
</div> </div>
@ -232,27 +237,19 @@ function dial(ext)
<div id="online" align="center" style="width:75%"> <div id="online" align="center" style="width:75%">
<div class="ui-field-contain"> <div class="ui-field-contain">
<div style="font-face:arial;font-size:12pt;text-align:left;width:750px"> <div id="devices">
Demo of the Work-In-Progress Video work in FreeSWITCH. Press one of the buttons below.<br>
This is still under heavy development but this is a little taste what is coming.<br>
Chrome 38.0.2125.122 currently has better results than FireFox 33.1.1 <br> <div id="camdiv">
So if you have Chrome handy, try it with that too. <legend><b>Camera</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usecamera"></select>
</div> <br><br></div>
<br><br> <legend><b>Microphone</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usemic"></select>
<legend><b>Camera</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usecamera">
</select>
<br><br>
<legend><b>Microphone</b>:</legend><select data-theme="a" data-overlay-theme="a" data-native-menu="false" id="usemic">
</select>
<Br clear="all"><Br> <Br clear="all"><Br>
<center><button data-inline="true" id="refreshbtn">Refresh Device List</button></center> <center><button data-inline="true" id="refreshbtn">Refresh Device List</button>
<Br clear="all"><Br><br> <button data-inline="true" id="hidedevices" onclick="$('#devices').hide();$('#showdevices').show()">Save Device Settings</button>
</center>
<Br clear="all"><hr><br>
<div > <div >
<fieldset data-role="controlgroup" data-type="horizontal"> <fieldset data-role="controlgroup" data-type="horizontal">
@ -276,14 +273,18 @@ So if you have Chrome handy, try it with that too.
<label for="vqual_hhd">HHD 1920x1080</label> <label for="vqual_hhd">HHD 1920x1080</label>
</fieldset> </fieldset>
</div> </div><Br>
<br clear="all"> <br clear="all">
<Br><br>
<h2>Video Streaming (USE STEREO HEADPHONES IF POSSIBLE)</h2>
<div style="text-align:left">
This may look similar to playing video like you would on YouTube, however, these are mp4 files decoded by mod_vlc then re-encoded to the negotiated video codec and streamed over RTP in real-time to test transcoding.<br><br>
</div> </div>
<div style="border-style:outset;border-width:1px;background-color:#eeeeee"> <button data-inline="true" id="showdemo" onclick="$('#demos').show();$('#showdemo').hide()">View Demo Extensions</button>
<button data-inline="true" id="showdevices" onclick="$('#devices').show();$('#showdevices').hide()">View Device Settings</button>
<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('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('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('bin1.mp4')">Binaural Audio Demo</button>
@ -303,22 +304,20 @@ This may look similar to playing video like you would on YouTube, however, these
</div> </div>
<br> <br>
<h2>Codec Test and Conference</h2> <h2>Codec Test and Conference</h2>
<div style="text-align:left">
Conference is similar to previous behavior but now it can support differing video codecs. <div style="border-style:inset;border-width:1px;background-color:#eeeeee">
There is still a considerable amount of work to do with the codecs and video RTP reliability. Again, Chrome is way ahead of FireFox so far in this area.
<br><br>
FireFox is pretty much stuck on 640x480 for now. Chrome even when put into the hd mode and above takes some time to kick into gear as it does some kind of step up to full speed and we still are missing the RTCP code to communicate with them.<br><br>
</div>
<div style="border-style:outset;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('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> <button class="vidbtn" data-inline="true" onclick="dial('3500')">Video Transcoded Conference</button>
<button class="vidbtn" id="hidedemo" data-inline="true" onclick="$('#demos').hide();$('#showdemo').show();">Hide Demos</button>
</div> </div>
</div>
<br><br>
<input type="text" id="ext" style="width:200px"/> <br><br><br>
<button data-inline="true" id="callbtn">Call</button> <input type="text" id="ext""/>
<button data-inline="true" id="callbtn">Call Extension</button>
<br><br> <br><br>
<div style="color:blue" id="main_info">&nbsp;</div><br><br> <div style="color:blue" id="main_info">&nbsp;</div><br><br>
<img src="img/verto_black_web.gif" width="300"><br><br> <img src="img/verto_black_web.gif" width="300"><br><br>
@ -330,7 +329,7 @@ FireFox is pretty much stuck on 640x480 for now. Chrome even when put into the
<label><input id="use_vid" type="checkbox" value="foo" > Use Video</label> <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_stereo" type="checkbox" value="foo" > Stereo Audio</label>
<label><input id="use_stun" type="checkbox" value="foo" > Use STUN</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> <!-- <label><input id="local_video" type="checkbox" value="foo" > Local Video</label>-->
</div> </div>
<br> <br>

35
html5/verto/video_demo/js/verto-min.js vendored
View File

@ -7,7 +7,9 @@ function setDefaultCodec(mLine,payload){var elements=mLine.split(' ');var newLin
if(elements[i]!==payload)newLine[index++]=elements[i];} if(elements[i]!==payload)newLine[index++]=elements[i];}
return newLine.join(' ');} return newLine.join(' ');}
$.FSRTC=function(options){this.options=$.extend({useVideo:null,useStereo:false,userData:null,localVideo:null,screenShare:false,useCamera:"any",iceServers:false,videoParams:{},audioParams:{},callbacks:{onICEComplete:function(){},onICE:function(){},onOfferSDP:function(){}}},options);this.mediaData={SDP:null,profile:{},candidateList:[]};if(moz){this.constraints={offerToReceiveAudio:true,offerToReceiveVideo:this.options.useVideo?true:false,};}else{this.constraints={optional:[{'DtlsSrtpKeyAgreement':'true'}],mandatory:{OfferToReceiveAudio:true,OfferToReceiveVideo:this.options.useVideo?true:false,}};} $.FSRTC=function(options){this.options=$.extend({useVideo:null,useStereo:false,userData:null,localVideo:null,screenShare:false,useCamera:"any",iceServers:false,videoParams:{},audioParams:{},callbacks:{onICEComplete:function(){},onICE:function(){},onOfferSDP:function(){}}},options);this.mediaData={SDP:null,profile:{},candidateList:[]};if(moz){this.constraints={offerToReceiveAudio:true,offerToReceiveVideo:this.options.useVideo?true:false,};}else{this.constraints={optional:[{'DtlsSrtpKeyAgreement':'true'}],mandatory:{OfferToReceiveAudio:true,OfferToReceiveVideo:this.options.useVideo?true:false,}};}
setCompat();checkCompat();};$.FSRTC.prototype.useVideo=function(obj,local){var self=this;if(obj){self.options.useVideo=obj;self.options.localVideo=local;if(moz){self.constraints.offerToReceiveVideo=true;}else{self.constraints.mandatory.OfferToReceiveVideo=true;}}else{self.options.useVideo=null;self.options.localVideo=null;if(moz){self.constraints.offerToReceiveVideo=false;}else{self.constraints.mandatory.OfferToReceiveVideo=false;}}};$.FSRTC.prototype.useStereo=function(on){var self=this;self.options.useStereo=on;};$.FSRTC.prototype.stereoHack=function(sdp){var self=this;if(!self.options.useStereo){return sdp;} if(self.options.useVideo){self.options.useVideo.style.display='none';}
setCompat();checkCompat();};$.FSRTC.prototype.useVideo=function(obj,local){var self=this;if(obj){self.options.useVideo=obj;self.options.localVideo=local;if(moz){self.constraints.offerToReceiveVideo=true;}else{self.constraints.mandatory.OfferToReceiveVideo=true;}}else{self.options.useVideo=null;self.options.localVideo=null;if(moz){self.constraints.offerToReceiveVideo=false;}else{self.constraints.mandatory.OfferToReceiveVideo=false;}}
if(self.options.useVideo){self.options.useVideo.style.display='none';}};$.FSRTC.prototype.useStereo=function(on){var self=this;self.options.useStereo=on;};$.FSRTC.prototype.stereoHack=function(sdp){var self=this;if(!self.options.useStereo){return sdp;}
var sdpLines=sdp.split('\r\n');var opusIndex=findLine(sdpLines,'a=rtpmap','opus/48000'),opusPayload;if(opusIndex){opusPayload=getCodecPayloadType(sdpLines[opusIndex]);} var sdpLines=sdp.split('\r\n');var opusIndex=findLine(sdpLines,'a=rtpmap','opus/48000'),opusPayload;if(opusIndex){opusPayload=getCodecPayloadType(sdpLines[opusIndex]);}
var fmtpLineIndex=findLine(sdpLines,'a=fmtp:'+opusPayload.toString());if(fmtpLineIndex===null)return sdp;sdpLines[fmtpLineIndex]=sdpLines[fmtpLineIndex].concat('; stereo=1');sdp=sdpLines.join('\r\n');return sdp;};function setCompat(){$.FSRTC.moz=!!navigator.mozGetUserMedia;if(!navigator.getUserMedia){navigator.getUserMedia=navigator.mozGetUserMedia||navigator.webkitGetUserMedia||navigator.msGetUserMedia;}} var fmtpLineIndex=findLine(sdpLines,'a=fmtp:'+opusPayload.toString());if(fmtpLineIndex===null)return sdp;sdpLines[fmtpLineIndex]=sdpLines[fmtpLineIndex].concat('; stereo=1');sdp=sdpLines.join('\r\n');return sdp;};function setCompat(){$.FSRTC.moz=!!navigator.mozGetUserMedia;if(!navigator.getUserMedia){navigator.getUserMedia=navigator.mozGetUserMedia||navigator.webkitGetUserMedia||navigator.msGetUserMedia;}}
function checkCompat(){if(!navigator.getUserMedia){alert('This application cannot function in this browser.');return false;} function checkCompat(){if(!navigator.getUserMedia){alert('This application cannot function in this browser.');return false;}
@ -21,12 +23,13 @@ function onChannelError(self,e){console.error("Channel Error",e);doCallback(self
function onICESDP(self,sdp){self.mediaData.SDP=self.stereoHack(sdp.sdp);console.log("ICE SDP");doCallback(self,"onICESDP");} function onICESDP(self,sdp){self.mediaData.SDP=self.stereoHack(sdp.sdp);console.log("ICE SDP");doCallback(self,"onICESDP");}
function onAnswerSDP(self,sdp){self.answer.SDP=self.stereoHack(sdp.sdp);console.log("ICE ANSWER SDP");doCallback(self,"onAnswerSDP",self.answer.SDP);} function onAnswerSDP(self,sdp){self.answer.SDP=self.stereoHack(sdp.sdp);console.log("ICE ANSWER SDP");doCallback(self,"onAnswerSDP",self.answer.SDP);}
function onMessage(self,msg){console.log("Message");doCallback(self,"onICESDP",msg);} function onMessage(self,msg){console.log("Message");doCallback(self,"onICESDP",msg);}
function onRemoteStream(self,stream){var element=self.options.useAudio;console.log("REMOTE STREAM",stream,element);if(typeof element.srcObject!=='undefined'){element.srcObject=stream;}else if(typeof element.mozSrcObject!=='undefined'){element.mozSrcObject=stream;}else if(typeof element.src!=='undefined'){element.src=URL.createObjectURL(stream);}else{console.error('Error attaching stream to element.');} function onRemoteStream(self,stream){if(self.options.useVideo){self.options.useVideo.style.display='block';}
var element=self.options.useAudio;console.log("REMOTE STREAM",stream,element);if(typeof element.srcObject!=='undefined'){element.srcObject=stream;}else if(typeof element.mozSrcObject!=='undefined'){element.mozSrcObject=stream;}else if(typeof element.src!=='undefined'){element.src=URL.createObjectURL(stream);}else{console.error('Error attaching stream to element.');}
self.options.useAudio.play();self.remoteStream=stream;} self.options.useAudio.play();self.remoteStream=stream;}
function onOfferSDP(self,sdp){self.mediaData.SDP=self.stereoHack(sdp.sdp);console.log("Offer SDP");doCallback(self,"onOfferSDP");} function onOfferSDP(self,sdp){self.mediaData.SDP=self.stereoHack(sdp.sdp);console.log("Offer SDP");doCallback(self,"onOfferSDP");}
$.FSRTC.prototype.answer=function(sdp,onSuccess,onError){this.peer.addAnswerSDP({type:"answer",sdp:sdp},onSuccess,onError);};$.FSRTC.prototype.stop=function(){var self=this;if(self.options.useVideo){self.options.useVideo[moz?'mozSrcObject':'src']="";} $.FSRTC.prototype.answer=function(sdp,onSuccess,onError){this.peer.addAnswerSDP({type:"answer",sdp:sdp},onSuccess,onError);};$.FSRTC.prototype.stop=function(){var self=this;if(self.options.useVideo){self.options.useVideo.style.display='none';self.options.useVideo[moz?'mozSrcObject':'src']="";}
if(self.localStream){self.localStream.stop();self.localStream=null;} if(self.localStream){self.localStream.stop();self.localStream=null;}
if(self.options.localVideo){self.options.localVideo[moz?'mozSrcObject':'src']="";} if(self.options.localVideo){self.options.localVideo.style.display='none';self.options.localVideo[moz?'mozSrcObject':'src']="";}
if(self.options.localVideoStream){self.options.localVideoStream.stop();} if(self.options.localVideoStream){self.options.localVideoStream.stop();}
if(self.peer){console.log("stopping peer");self.peer.stop();}};$.FSRTC.prototype.createAnswer=function(params){var self=this;self.type="answer";self.remoteSDP=params.sdp;console.debug("inbound sdp: ",params.sdp);self.options.useCamera=params.useCamera||"any";self.options.useMic=params.useMic||"any";function onSuccess(stream){self.localStream=stream;self.peer=RTCPeerConnection({type:self.type,attachStream:self.localStream,onICE:function(candidate){return onICE(self,candidate);},onICEComplete:function(){return onICEComplete(self);},onRemoteStream:function(stream){return onRemoteStream(self,stream);},onICESDP:function(sdp){return onICESDP(self,sdp);},onChannelError:function(e){return onChannelError(self,e);},constraints:self.constraints,iceServers:self.options.iceServers,offerSDP:{type:"offer",sdp:self.remoteSDP}});onStreamSuccess(self);} if(self.peer){console.log("stopping peer");self.peer.stop();}};$.FSRTC.prototype.createAnswer=function(params){var self=this;self.type="answer";self.remoteSDP=params.sdp;console.debug("inbound sdp: ",params.sdp);self.options.useCamera=params.useCamera||"any";self.options.useMic=params.useMic||"any";function onSuccess(stream){self.localStream=stream;self.peer=RTCPeerConnection({type:self.type,attachStream:self.localStream,onICE:function(candidate){return onICE(self,candidate);},onICEComplete:function(){return onICEComplete(self);},onRemoteStream:function(stream){return onRemoteStream(self,stream);},onICESDP:function(sdp){return onICESDP(self,sdp);},onChannelError:function(e){return onChannelError(self,e);},constraints:self.constraints,iceServers:self.options.iceServers,offerSDP:{type:"offer",sdp:self.remoteSDP}});onStreamSuccess(self);}
function onError(e){onStreamError(self,e);} function onError(e){onStreamError(self,e);}
@ -34,7 +37,7 @@ var mediaParams=getMediaParams(self);console.log("Audio constraints",mediaParams
getUserMedia({constraints:{audio:mediaParams.audio,video:mediaParams.video},video:mediaParams.useVideo,onsuccess:onSuccess,onerror:onError});};function getMediaParams(obj){var audio;if(obj.options.videoParams&&obj.options.videoParams.chromeMediaSource=='desktop'){console.error("SCREEN SHARE");audio=false;}else{audio={mandatory:obj.options.audioParams,optional:[]};if(obj.options.useMic!=="any"){audio.optional=[{sourceId:obj.options.useMic}]}} getUserMedia({constraints:{audio:mediaParams.audio,video:mediaParams.video},video:mediaParams.useVideo,onsuccess:onSuccess,onerror:onError});};function getMediaParams(obj){var audio;if(obj.options.videoParams&&obj.options.videoParams.chromeMediaSource=='desktop'){console.error("SCREEN SHARE");audio=false;}else{audio={mandatory:obj.options.audioParams,optional:[]};if(obj.options.useMic!=="any"){audio.optional=[{sourceId:obj.options.useMic}]}}
if(obj.options.useVideo&&obj.options.localVideo){getUserMedia({constraints:{audio:false,video:{mandatory:obj.options.videoParams,optional:[]},},localVideo:obj.options.localVideo,onsuccess:function(e){self.options.localVideoStream=e;console.log("local video ready");},onerror:function(e){console.error("local video error!");}});} if(obj.options.useVideo&&obj.options.localVideo){getUserMedia({constraints:{audio:false,video:{mandatory:obj.options.videoParams,optional:[]},},localVideo:obj.options.localVideo,onsuccess:function(e){self.options.localVideoStream=e;console.log("local video ready");},onerror:function(e){console.error("local video error!");}});}
var video={mandatory:obj.options.videoParams,optional:[]} var video={mandatory:obj.options.videoParams,optional:[]}
var useVideo=obj.options.useVideo;if(obj.options.useCamera&&obj.options.useCamera!=="none"){if(obj.options.useCamera!=="any"){video.optional=[{sourceId:obj.options.useCamera}]}}else{video=null;useVideo=null;} var useVideo=obj.options.useVideo;if(useVideo&&obj.options.useCamera&&obj.options.useCamera!=="none"){if(obj.options.useCamera!=="any"){video.optional=[{sourceId:obj.options.useCamera}]}}else{video=null;useVideo=null;}
return{audio:audio,video:video,useVideo:useVideo};} return{audio:audio,video:video,useVideo:useVideo};}
$.FSRTC.prototype.call=function(profile){checkCompat();var self=this;var screen=false;self.type="offer";if(self.options.videoParams&&self.options.videoParams.chromeMediaSource=='desktop'){screen=true;} $.FSRTC.prototype.call=function(profile){checkCompat();var self=this;var screen=false;self.type="offer";if(self.options.videoParams&&self.options.videoParams.chromeMediaSource=='desktop'){screen=true;}
function onSuccess(stream){self.localStream=stream;self.peer=RTCPeerConnection({type:self.type,attachStream:self.localStream,onICE:function(candidate){return onICE(self,candidate);},onICEComplete:function(){return onICEComplete(self);},onRemoteStream:screen?function(stream){console.error("SKIP");}:function(stream){return onRemoteStream(self,stream);},onOfferSDP:function(sdp){return onOfferSDP(self,sdp);},onICESDP:function(sdp){return onICESDP(self,sdp);},onChannelError:function(e){return onChannelError(self,e);},constraints:self.constraints,iceServers:self.options.iceServers,});onStreamSuccess(self,stream);} function onSuccess(stream){self.localStream=stream;self.peer=RTCPeerConnection({type:self.type,attachStream:self.localStream,onICE:function(candidate){return onICE(self,candidate);},onICEComplete:function(){return onICEComplete(self);},onRemoteStream:screen?function(stream){console.error("SKIP");}:function(stream){return onRemoteStream(self,stream);},onOfferSDP:function(sdp){return onOfferSDP(self,sdp);},onICESDP:function(sdp){return onICESDP(self,sdp);},onChannelError:function(e){return onChannelError(self,e);},constraints:self.constraints,iceServers:self.options.iceServers,});onStreamSuccess(self,stream);}
@ -61,7 +64,7 @@ function onSdpSuccess(){}
function onSdpError(e){if(options.onChannelError){options.onChannelError(e);} function onSdpError(e){if(options.onChannelError){options.onChannelError(e);}
console.error('sdp error:',e);} console.error('sdp error:',e);}
return{addAnswerSDP:function(sdp,cbSuccess,cbError){peer.setRemoteDescription(new SessionDescription(sdp),cbSuccess?cbSuccess:onSdpSuccess,cbError?cbError:onSdpError);},addICE:function(candidate){peer.addIceCandidate(new IceCandidate({sdpMLineIndex:candidate.sdpMLineIndex,candidate:candidate.candidate}));},peer:peer,channel:channel,sendData:function(message){if(channel){channel.send(message);}},stop:function(){peer.close();if(options.attachStream){options.attachStream.stop();}}};} return{addAnswerSDP:function(sdp,cbSuccess,cbError){peer.setRemoteDescription(new SessionDescription(sdp),cbSuccess?cbSuccess:onSdpSuccess,cbError?cbError:onSdpError);},addICE:function(candidate){peer.addIceCandidate(new IceCandidate({sdpMLineIndex:candidate.sdpMLineIndex,candidate:candidate.candidate}));},peer:peer,channel:channel,sendData:function(message){if(channel){channel.send(message);}},stop:function(){peer.close();if(options.attachStream){options.attachStream.stop();}}};}
var video_constraints={mandatory:{},optional:[]};function getUserMedia(options){var n=navigator,media;n.getMedia=n.webkitGetUserMedia||n.mozGetUserMedia;n.getMedia(options.constraints||{audio:true,video:video_constraints},streaming,options.onerror||function(e){console.error(e);});function streaming(stream){if(options.localVideo){options.localVideo[moz?'mozSrcObject':'src']=moz?stream:window.webkitURL.createObjectURL(stream);} var video_constraints={mandatory:{},optional:[]};function getUserMedia(options){var n=navigator,media;n.getMedia=n.webkitGetUserMedia||n.mozGetUserMedia;n.getMedia(options.constraints||{audio:true,video:video_constraints},streaming,options.onerror||function(e){console.error(e);});function streaming(stream){if(options.localVideo){options.localVideo[moz?'mozSrcObject':'src']=moz?stream:window.webkitURL.createObjectURL(stream);options.localVideo.style.display='block';}
if(options.onsuccess){options.onsuccess(stream);} if(options.onsuccess){options.onsuccess(stream);}
media=stream;} media=stream;}
return media;}})(jQuery);(function($){$.JsonRpcClient=function(options){var self=this;this.options=$.extend({ajaxUrl:null,socketUrl:null,onmessage:null,login:null,passwd:null,sessid:null,getSocket:function(onmessage_cb){return self._getSocket(onmessage_cb);}},options);self.ws_cnt=0;this.wsOnMessage=function(event){self._wsOnMessage(event);};};$.JsonRpcClient.prototype._ws_socket=null;$.JsonRpcClient.prototype._ws_callbacks={};$.JsonRpcClient.prototype._current_id=1;$.JsonRpcClient.prototype.call=function(method,params,success_cb,error_cb){if(!params){params={};} return media;}})(jQuery);(function($){$.JsonRpcClient=function(options){var self=this;this.options=$.extend({ajaxUrl:null,socketUrl:null,onmessage:null,login:null,passwd:null,sessid:null,getSocket:function(onmessage_cb){return self._getSocket(onmessage_cb);}},options);self.ws_cnt=0;this.wsOnMessage=function(event){self._wsOnMessage(event);};};$.JsonRpcClient.prototype._ws_socket=null;$.JsonRpcClient.prototype._ws_callbacks={};$.JsonRpcClient.prototype._current_id=1;$.JsonRpcClient.prototype.call=function(method,params,success_cb,error_cb){if(!params){params={};}
@ -167,15 +170,21 @@ dt.fnClearTable();dt.fnAddData(obj.asArray());dt.fnAdjustColumnSizing();break;ca
if(args.redraw>-1){dt.fnClearTable();dt.fnAddData(obj.asArray());}else{dt.fnAddData(args.data);} if(args.redraw>-1){dt.fnClearTable();dt.fnAddData(obj.asArray());}else{dt.fnAddData(args.data);}
dt.fnAdjustColumnSizing();break;case"modify":if(!args.data){return;} dt.fnAdjustColumnSizing();break;case"modify":if(!args.data){return;}
dt.fnUpdate(args.data,index);dt.fnAdjustColumnSizing();break;case"del":dt.fnDeleteRow(index);dt.fnAdjustColumnSizing();break;case"clear":dt.fnClearTable();break;case"reorder":dt.fnClearTable();dt.fnAddData(obj.asArray());break;case"hide":jq.hide();break;case"show":jq.show();break;}}catch(err){console.error("ERROR: "+err);iserr++;} dt.fnUpdate(args.data,index);dt.fnAdjustColumnSizing();break;case"del":dt.fnDeleteRow(index);dt.fnAdjustColumnSizing();break;case"clear":dt.fnClearTable();break;case"reorder":dt.fnClearTable();dt.fnAddData(obj.asArray());break;case"hide":jq.hide();break;case"show":jq.show();break;}}catch(err){console.error("ERROR: "+err);iserr++;}
if(iserr){obj.errs++;if(obj.errs<3){obj.bootstrap(obj.user_obj);}}else{obj.errs=0;}};la.onChange(la,{action:"init"});};var CONFMAN_SERNO=1;$.verto.confMan=function(verto,params){var confMan=this;confMan.params=$.extend({tableID:null,statusID:null,mainModID:null,dialog:null,hasVid:false,laData:null,onBroadcast:null,onLaChange:null,onLaRow:null},params);confMan.verto=verto;confMan.serno=CONFMAN_SERNO++;function genMainMod(jq){var play_id="play_"+confMan.serno;var stop_id="stop_"+confMan.serno;var recording_id="recording_"+confMan.serno;var rec_stop_id="recording_stop"+confMan.serno;var div_id="confman_"+confMan.serno;var html="<div id='"+div_id+"'><br>"+"<button class='ctlbtn' id='"+play_id+"'>Play</button>"+"<button class='ctlbtn' id='"+stop_id+"'>Stop</button>"+"<button class='ctlbtn' id='"+recording_id+"'>Record</button>"+"<button class='ctlbtn' id='"+rec_stop_id+"'>Record Stop</button>"+"<br><br></div>";jq.html(html);$("#"+play_id).click(function(){var file=prompt("Please enter file name","");confMan.modCommand("play",null,file);});$("#"+stop_id).click(function(){confMan.modCommand("stop",null,"all");});$("#"+recording_id).click(function(){var file=prompt("Please enter file name","");confMan.modCommand("recording",null,["start",file]);});$("#"+rec_stop_id).click(function(){confMan.modCommand("recording",null,["stop","all"]);});} if(iserr){obj.errs++;if(obj.errs<3){obj.bootstrap(obj.user_obj);}}else{obj.errs=0;}};la.onChange(la,{action:"init"});};var CONFMAN_SERNO=1;$.verto.confMan=function(verto,params){var confMan=this;confMan.params=$.extend({tableID:null,statusID:null,mainModID:null,dialog:null,hasVid:false,laData:null,onBroadcast:null,onLaChange:null,onLaRow:null},params);confMan.verto=verto;confMan.serno=CONFMAN_SERNO++;function genMainMod(jq){var play_id="play_"+confMan.serno;var stop_id="stop_"+confMan.serno;var recording_id="recording_"+confMan.serno;var rec_stop_id="recording_stop"+confMan.serno;var div_id="confman_"+confMan.serno;var html="<div id='"+div_id+"'><br>"+"<button class='ctlbtn' id='"+play_id+"'>Play</button>"+"<button class='ctlbtn' id='"+stop_id+"'>Stop</button>"+"<button class='ctlbtn' id='"+recording_id+"'>Record</button>"+"<button class='ctlbtn' id='"+rec_stop_id+"'>Record Stop</button>"+"<br><br></div>";jq.html(html);if(confMan.params.hasVid){var vlayout_id="confman_vid_layout_"+confMan.serno;var vlselect_id="confman_vl_select_"+confMan.serno;var vlhtml="<div id='"+vlayout_id+"'><br>"+"<b>Video Layout</b> <select id='"+vlselect_id+"'></select> "+"<br><br></div>";jq.append(vlhtml);$("#"+vlselect_id).change(function(){var val=$("#"+vlselect_id).find(":selected").val();if(val!=="none"){confMan.modCommand("vid-layout",null,val);}});}
function genControls(jq,rowid){var x=parseInt(rowid);var kick_id="kick_"+x;var tmute_id="tmute_"+x;var box_id="box_"+x;var volup_id="volume_in_up"+x;var voldn_id="volume_in_dn"+x;var transfer_id="transfer"+x;var html="<div id='"+box_id+"'>"+"<button class='ctlbtn' id='"+kick_id+"'>Kick</button>"+"<button class='ctlbtn' id='"+tmute_id+"'>Mute</button>"+"<button class='ctlbtn' id='"+voldn_id+"'>Vol -</button>"+"<button class='ctlbtn' id='"+volup_id+"'>Vol +</button>"+"<button class='ctlbtn' id='"+transfer_id+"'>Transfer</button>"+"</div>";jq.html(html);if(!jq.data("mouse")){$("#"+box_id).hide();} $("#"+play_id).click(function(){var file=prompt("Please enter file name","");confMan.modCommand("play",null,file);});$("#"+stop_id).click(function(){confMan.modCommand("stop",null,"all");});$("#"+recording_id).click(function(){var file=prompt("Please enter file name","");confMan.modCommand("recording",null,["start",file]);});$("#"+rec_stop_id).click(function(){confMan.modCommand("recording",null,["stop","all"]);});}
jq.mouseover(function(e){jq.data({"mouse":true});$("#"+box_id).show();});jq.mouseout(function(e){jq.data({"mouse":false});$("#"+box_id).hide();});$("#"+transfer_id).click(function(){var xten=prompt("Enter Extension");confMan.modCommand("transfer",x,xten);});$("#"+kick_id).click(function(){confMan.modCommand("kick",x);});$("#"+tmute_id).click(function(){confMan.modCommand("tmute",x);});$("#"+volup_id).click(function(){confMan.modCommand("volume_in",x,"up");});$("#"+voldn_id).click(function(){confMan.modCommand("volume_in",x,"down");});return html;} function genControls(jq,rowid){var x=parseInt(rowid);var kick_id="kick_"+x;var tmute_id="tmute_"+x;var tvmute_id="tvmute_"+x;var vbanner_id="vbanner_"+x;var tvpresenter_id="tvpresenter_"+x;var box_id="box_"+x;var volup_id="volume_in_up"+x;var voldn_id="volume_in_dn"+x;var transfer_id="transfer"+x;var html="<div id='"+box_id+"'>"+"<button class='ctlbtn' id='"+kick_id+"'>Kick</button>"+"<button class='ctlbtn' id='"+tmute_id+"'>Mute</button>"+
var atitle="";var awidth=0;if(confMan.params.laData.role==="moderator"){atitle="Action";awidth=200;if(confMan.params.mainModID){genMainMod($(confMan.params.mainModID));$(confMan.params.displayID).html("Moderator Controls Ready<br><br>");}else{$(confMan.params.mainModID).html("");} (confMan.params.hasVid?"<button class='ctlbtn' id='"+tvmute_id+"'>VMute</button>":"")+
(confMan.params.hasVid?"<button class='ctlbtn' id='"+tvpresenter_id+"'>Presenter</button>":"")+
(confMan.params.hasVid?"<button class='ctlbtn' id='"+vbanner_id+"'>Banner</button>":"")+"<button class='ctlbtn' id='"+voldn_id+"'>Vol -</button>"+"<button class='ctlbtn' id='"+volup_id+"'>Vol +</button>"+"<button class='ctlbtn' id='"+transfer_id+"'>Transfer</button>"+"</div>";jq.html(html);if(!jq.data("mouse")){$("#"+box_id).hide();}
jq.mouseover(function(e){jq.data({"mouse":true});$("#"+box_id).show();});jq.mouseout(function(e){jq.data({"mouse":false});$("#"+box_id).hide();});$("#"+transfer_id).click(function(){var xten=prompt("Enter Extension");confMan.modCommand("transfer",x,xten);});$("#"+kick_id).click(function(){confMan.modCommand("kick",x);});$("#"+tmute_id).click(function(){confMan.modCommand("tmute",x);});if(confMan.params.hasVid){$("#"+tvmute_id).click(function(){confMan.modCommand("tvmute",x);});$("#"+tvpresenter_id).click(function(){confMan.modCommand("vid-res-id",x,"presenter");});$("#"+vbanner_id).click(function(){var text=prompt("Please enter text","");confMan.modCommand("vid-banner",x,escape(text));});}
$("#"+volup_id).click(function(){confMan.modCommand("volume_in",x,"up");});$("#"+voldn_id).click(function(){confMan.modCommand("volume_in",x,"down");});return html;}
var atitle="";var awidth=0;if(confMan.params.laData.role==="moderator"){atitle="Action";awidth=300;if(confMan.params.mainModID){genMainMod($(confMan.params.mainModID));$(confMan.params.displayID).html("Moderator Controls Ready<br><br>");}else{$(confMan.params.mainModID).html("");}
verto.subscribe(confMan.params.laData.modChannel,{handler:function(v,e){console.error("MODDATA:",e.data);if(confMan.params.onBroadcast){confMan.params.onBroadcast(verto,confMan,e.data);} verto.subscribe(confMan.params.laData.modChannel,{handler:function(v,e){console.error("MODDATA:",e.data);if(confMan.params.onBroadcast){confMan.params.onBroadcast(verto,confMan,e.data);}
if(!confMan.destroyed&&confMan.params.displayID){$(confMan.params.displayID).html(e.data.response+"<br><br>");if(confMan.lastTimeout){clearTimeout(confMan.lastTimeout);confMan.lastTimeout=0;} if(e.data["conf-command"]==="list-videoLayouts"){var vlselect_id="#confman_vl_select_"+confMan.serno;var vlayout_id="#confman_vid_layout_"+confMan.serno;var x=0;var options;$(vlselect_id).append(new Option("Choose a Layout","none"));if(e.data.responseData){options=e.data.responseData.sort();for(var i in options){$(vlselect_id).append(new Option(options[i],options[i]));x++;}}
confMan.lastTimeout=setTimeout(function(){$(confMan.params.displayID).html(confMan.destroyed?"":"Moderator Controls Ready<br><br>");},4000);}}});} if(x){$(vlselect_id).selectmenu('refresh',true);}else{$(vlayout_id).hide();}}else{if(!confMan.destroyed&&confMan.params.displayID){$(confMan.params.displayID).html(e.data.response+"<br><br>");if(confMan.lastTimeout){clearTimeout(confMan.lastTimeout);confMan.lastTimeout=0;}
confMan.lastTimeout=setTimeout(function(){$(confMan.params.displayID).html(confMan.destroyed?"":"Moderator Controls Ready<br><br>");},4000);}}}});if(confMan.params.hasVid){confMan.modCommand("list-videoLayouts",null,null);}}
var row_callback=null;if(confMan.params.laData.role==="moderator"){row_callback=function(nRow,aData,iDisplayIndex,iDisplayIndexFull){if(!aData[5]){var $row=$('td:eq(5)',nRow);genControls($row,aData);if(confMan.params.onLaRow){confMan.params.onLaRow(verto,confMan,$row,aData);}}};} var row_callback=null;if(confMan.params.laData.role==="moderator"){row_callback=function(nRow,aData,iDisplayIndex,iDisplayIndexFull){if(!aData[5]){var $row=$('td:eq(5)',nRow);genControls($row,aData);if(confMan.params.onLaRow){confMan.params.onLaRow(verto,confMan,$row,aData);}}};}
confMan.lt=new $.verto.liveTable(verto,confMan.params.laData.laChannel,confMan.params.laData.laName,$(confMan.params.tableID),{subParams:{callID:confMan.params.dialog?confMan.params.dialog.callID:null},"onChange":function(obj,args){$(confMan.params.statusID).text("Conference Members: "+" ("+obj.arrayLen()+" Total)");if(confMan.params.onLaChange){confMan.params.onLaChange(verto,confMan,$.verto.enum.confEvent.laChange,obj,args);}},"aaData":[],"aoColumns":[{"sTitle":"ID"},{"sTitle":"Number"},{"sTitle":"Name"},{"sTitle":"Codec"},{"sTitle":"Status","sWidth":confMan.params.hasVid?"300px":"150px"},{"sTitle":atitle,"sWidth":awidth,}],"bAutoWidth":true,"bDestroy":true,"bSort":false,"bInfo":false,"bFilter":false,"bLengthChange":false,"bPaginate":false,"iDisplayLength":1000,"oLanguage":{"sEmptyTable":"The Conference is Empty....."},"fnRowCallback":row_callback});};$.verto.confMan.prototype.modCommand=function(cmd,id,value){var confMan=this;confMan.verto.sendMethod("verto.broadcast",{"eventChannel":confMan.params.laData.modChannel,"data":{"application":"conf-control","command":cmd,"id":id,"value":value}});};$.verto.confMan.prototype.destroy=function(){var confMan=this;confMan.destroyed=true;if(confMan.lt){confMan.lt.destroy();} confMan.lt=new $.verto.liveTable(verto,confMan.params.laData.laChannel,confMan.params.laData.laName,$(confMan.params.tableID),{subParams:{callID:confMan.params.dialog?confMan.params.dialog.callID:null},"onChange":function(obj,args){$(confMan.params.statusID).text("Conference Members: "+" ("+obj.arrayLen()+" Total)");if(confMan.params.onLaChange){confMan.params.onLaChange(verto,confMan,$.verto.enum.confEvent.laChange,obj,args);}},"aaData":[],"aoColumns":[{"sTitle":"ID"},{"sTitle":"Number"},{"sTitle":"Name"},{"sTitle":"Codec"},{"sTitle":"Status","sWidth":confMan.params.hasVid?"200px":"150px"},{"sTitle":atitle,"sWidth":awidth,}],"bAutoWidth":true,"bDestroy":true,"bSort":false,"bInfo":false,"bFilter":false,"bLengthChange":false,"bPaginate":false,"iDisplayLength":1000,"oLanguage":{"sEmptyTable":"The Conference is Empty....."},"fnRowCallback":row_callback});};$.verto.confMan.prototype.modCommand=function(cmd,id,value){var confMan=this;confMan.verto.rpcClient.call("verto.broadcast",{"eventChannel":confMan.params.laData.modChannel,"data":{"application":"conf-control","command":cmd,"id":id,"value":value}});};$.verto.confMan.prototype.destroy=function(){var confMan=this;confMan.destroyed=true;if(confMan.lt){confMan.lt.destroy();}
if(confMan.params.laData.modChannel){confMan.verto.unsubscribe(confMan.params.laData.modChannel);} if(confMan.params.laData.modChannel){confMan.verto.unsubscribe(confMan.params.laData.modChannel);}
if(confMan.params.mainModID){$(confMan.params.mainModID).html("");}};$.verto.dialog=function(direction,verto,params){var dialog=this;dialog.params=$.extend({useVideo:verto.options.useVideo,useStereo:verto.options.useStereo,screenShare:false,useCamera:"any",useMic:"any",tag:verto.options.tag,localTag:verto.options.localTag,login:verto.options.login,videoParams:verto.options.videoParams},params);dialog.verto=verto;dialog.direction=direction;dialog.lastState=null;dialog.state=dialog.lastState=$.verto.enum.state.new;dialog.callbacks=verto.callbacks;dialog.answered=false;dialog.attach=params.attach||false;dialog.screenShare=params.screenShare||false;dialog.useCamera=params.useCamera;dialog.useMic=params.useMic;if(dialog.params.callID){dialog.callID=dialog.params.callID;}else{dialog.callID=dialog.params.callID=generateGUID();} if(confMan.params.mainModID){$(confMan.params.mainModID).html("");}};$.verto.dialog=function(direction,verto,params){var dialog=this;dialog.params=$.extend({useVideo:verto.options.useVideo,useStereo:verto.options.useStereo,screenShare:false,useCamera:"any",useMic:"any",tag:verto.options.tag,localTag:verto.options.localTag,login:verto.options.login,videoParams:verto.options.videoParams},params);dialog.verto=verto;dialog.direction=direction;dialog.lastState=null;dialog.state=dialog.lastState=$.verto.enum.state.new;dialog.callbacks=verto.callbacks;dialog.answered=false;dialog.attach=params.attach||false;dialog.screenShare=params.screenShare||false;dialog.useCamera=params.useCamera;dialog.useMic=params.useMic;if(dialog.params.callID){dialog.callID=dialog.params.callID;}else{dialog.callID=dialog.params.callID=generateGUID();}
if(dialog.params.tag){dialog.audioStream=document.getElementById(dialog.params.tag);if(dialog.params.useVideo){dialog.videoStream=dialog.audioStream;}} if(dialog.params.tag){dialog.audioStream=document.getElementById(dialog.params.tag);if(dialog.params.useVideo){dialog.videoStream=dialog.audioStream;}}

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

@ -165,8 +165,8 @@ function check_vid_res()
local_vid_height = 180; local_vid_height = 180;
} }
$("#local_webcam").width(local_vid_width); //$("#local_webcam").width(local_vid_width);
$("#local_webcam").height(local_vid_height); //$("#local_webcam").height(local_vid_height);
real_size(); real_size();
@ -562,6 +562,7 @@ function doshare(on) {
} }
console.log("Attempting Screen Capture...."); console.log("Attempting Screen Capture....");
getScreenId(function (error, sourceId, screen_constraints) { getScreenId(function (error, sourceId, screen_constraints) {
share_call = verto.newCall({ share_call = verto.newCall({
destination_number: $("#ext").val() + "-screen", destination_number: $("#ext").val() + "-screen",
caller_id_name: $("#name").val() + " (Screen)", caller_id_name: $("#name").val() + " (Screen)",
@ -676,9 +677,25 @@ function init() {
$.cookie("verto_demo_vid_checked", tmp, { $.cookie("verto_demo_vid_checked", tmp, {
expires: 365 expires: 365
}); });
console.error(tmp);
if (tmp !== "true") {
$("#camdiv").hide();
$(".sharediv").hide();
} else {
$(".sharediv").show();
$("#camdiv").show();
}
$("#use_vid").prop("checked", tmp === "true").change(function(e) { $("#use_vid").prop("checked", tmp === "true").change(function(e) {
tmp = $("#use_vid").is(':checked'); tmp = $("#use_vid").is(':checked');
if (!tmp) {
$("#camdiv").hide();
$(".sharediv").hide();
} else {
$("#camdiv").show();
$(".sharediv").show();
}
$.cookie("verto_demo_vid_checked", tmp ? "true" : "false", { $.cookie("verto_demo_vid_checked", tmp ? "true" : "false", {
expires: 365 expires: 365
}); });
@ -802,7 +819,7 @@ function init() {
passwd: $("#passwd").val(), passwd: $("#passwd").val(),
socketUrl: $("#wsURL").val(), socketUrl: $("#wsURL").val(),
tag: "webcam", tag: "webcam",
localTag: $("#local_video").is(':checked') ? "local_webcam" : null, //localTag: $("#local_video").is(':checked') ? "local_webcam" : null,
ringFile: "sounds/bell_ring2.wav", ringFile: "sounds/bell_ring2.wav",
videoParams: { videoParams: {
"minWidth": vid_width, "minWidth": vid_width,
@ -815,8 +832,8 @@ function init() {
}, },
audioParams: { audioParams: {
googAutoGainControl: false, googAutoGainControl: false,
googNoiseSuppression: false, googNoiseSuppression: true,
googHighpassFilter: false googHighpassFilter: true
}, },
iceServers: $("#use_stun").is(':checked') iceServers: $("#use_stun").is(':checked')
},callbacks); },callbacks);
@ -896,7 +913,17 @@ $(document).ready(function() {
if (hash && (a = hash.split("&"))) { if (hash && (a = hash.split("&"))) {
window.location.hash = a[0]; window.location.hash = a[0];
} }
$("#webcam").hide();
$("#camdiv").hide();
$('#demos').hide();
$('#devices').hide();
$('#showdemo').show();
init(); init();
}); });