Skip to content

O
Openfire
Commit 044846f3 authored by Dele Olajide's avatar Dele Olajide Committed by dele
Browse files
Options

Jitsi Videobridge - Updated web client to latest version 

git-svn-id: http://svn.igniterealtime.org/svn/repos/openfire/trunk@13832 b35dd754-fafc-0310-a699-88a17e54d16e
parent 6a0f4df2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 5088 additions and 237 deletions
src/plugins/jitsivideobridge/src/colibri.js
View file @ 044846f3
This diff is collapsed.
src/plugins/jitsivideobridge/src/font-awesome.css 0 → 100644
View file @ 044846f3
This diff is collapsed.
src/plugins/jitsivideobridge/src/index.html
View file @ 044846f3
<html> <html>
<head> <head>
<title>Jitsi Videobridge</title> <title>Jitsi Videobridge</title>
<script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path --> <script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="jquery.min.js"></script>
<script src="strophejingle.bundle.js"></script> <script src="strophe.js"></script>
<script src="strophe-jingle.js"></script>
<script src="colibri.js"></script> <script src="colibri.js"></script>
<script src="muc.js"></script> <script src="muc.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<style type='text/css'> <!--style type='text/css'>
html,body{margin:0px;} html,body{margin:0px;}
#largeVideo {width:1280px;height:720px;margin-left:auto;margin-right:auto;display:block} #largeVideo {width:1280px;height:720px;margin-left:auto;margin-right:auto;display:block}
#localVideo {-webkit-transform: scale(-1,1);} #localVideo {-webkit-transform: scale(-1,1);}
#remoteVideos {text-align:center;height:180px;} #remoteVideos {text-align:center;height:180px;}
#remoteVideos video {width:320;height:180;} #remoteVideos video {width:320;height:180;}
#spacer {height:40px;} #chatspace {height:46px;line-height:20px;font-size:20px;visibility:hidden;padding:10px;margin-left:auto;margin-right:auto;}
#chatspace .nick {font-weight:bold;}
#chatspace>:first-child{visibility:hidden}
#settings {display:none;} #settings {display:none;}
#header {text-align:center;visibility:hidden;} #header {text-align:center;visibility:hidden;}
#nowebrtc {display:none;} </style-->
</style>
</head> </head>
<body> <body>
<div id="header" onclick='window.prompt("Share this link with anyone you want to invite to join you:", window.location.href);return;'> <div id="header">
<i class='fa fa-external-link'>&nbsp;</i>Others can join you by just going to <span id='roomurl'></span> <div id="leftlogo"></div>
<div id="rightlogo"></div>
<div id="link" onclick='window.prompt("Share this link with anyone you want to invite to join you:", window.location.href);return;'>
<i class='fa fa-external-link'>&nbsp;</i>Others can join you by just going to <span id='roomurl'></span>
</div>
</div> </div>
<div id="settings"> <div id="settings">
<h1>Connection Settings</h1> <h1>Connection Settings</h1>
<form id="loginInfo"> <form id="loginInfo">
<label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label> <label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
<label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label> <label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
<label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind/"/></label> <label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
<input id="connect" type="submit" value="Connect" /> <input id="connect" type="submit" value="Connect" />
</form> </form>
</div> </div>
<div class="fade_line"></div>
<video id="largeVideo" autoplay oncontextmenu="return false;"></video> <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
<div id="spacer"></div> <div class="fade_line"></div>
<!--div id="chatspace">
<div><i class="fa fa-comments">&nbsp;</i><span class='nick'></span>:&nbsp;<span class='chattext'></span></div>
<div>
<form>
<label><i class="fa fa-comment">&nbsp;</i></label><input type='text' id="chatinput" placeholder='Choose a nickname' maxlength='10'/>
</form>
</div>
</div-->
<div id="remoteVideos"> <div id="remoteVideos">
<video id="localVideo" autoplay oncontextmenu="return false;" muted/> <video id="localVideo" autoplay oncontextmenu="return false;" muted/>
</div> </div>
<script> <script>
var connection = null; var connection = null;
var master = null; var master = null;
var RTC; var RTC;
var RTCPeerConnection = null; var RTCPeerConnection = null;
var nickname = null;
function init() { function init() {
RTC = setupRTC(); RTC = setupRTC();
...@@ -56,7 +74,7 @@ html,body{margin:0px;} ...@@ -56,7 +74,7 @@ html,body{margin:0px;}
} }
RTCPeerconnection = RTC.peerconnection; RTCPeerconnection = RTC.peerconnection;
if (config.type == "bosh") // BAO if (config.type == "bosh") // BAO
connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind/'); connection = new Strophe.Connection(document.getElementById('boshURL').value || config.bosh || '/http-bind/');
else else
connection = new Openfire.Connection(config.bosh); connection = new Openfire.Connection(config.bosh);
...@@ -75,7 +93,7 @@ html,body{margin:0px;} ...@@ -75,7 +93,7 @@ html,body{margin:0px;}
connection.connect(jid, document.getElementById('password').value, function(status) { connection.connect(jid, document.getElementById('password').value, function(status) {
if (status == Strophe.Status.CONNECTED) { if (status == Strophe.Status.CONNECTED) {
console.log('connected'); console.log('connected');
connection.send($pres()); // BAO connection.send($pres());
getUserMediaWithConstraints(['audio','video'], '360'); getUserMediaWithConstraints(['audio','video'], '360');
document.getElementById('connect').disabled = true; document.getElementById('connect').disabled = true;
} else { } else {
...@@ -139,17 +157,17 @@ html,body{margin:0px;} ...@@ -139,17 +157,17 @@ html,body{margin:0px;}
} }
// FIXME: hover is bad, this causes flicker. How about moving this? // FIXME: hover is bad, this causes flicker. How about moving this?
// remember that moving this in the DOM requires to play() again // remember that moving this in the DOM requires to play() again
sel.hover( sel.click(
function() { function() {
console.log('hover in', $(this).attr('src')); console.log('hover in', $(this).attr('src'));
if ($('#largeVideo').attr('src') != $(this).attr('src')) { var newSrc = $(this).attr('src');
if ($('#largeVideo').attr('src') != newSrc) {
document.getElementById('largeVideo').volume = 1; document.getElementById('largeVideo').volume = 1;
$('#largeVideo').attr('src', $(this).attr('src')); $('#largeVideo').fadeOut(300, function(){
$(this).attr('src', newSrc);
$(this).fadeIn(300);
});
} }
},
function() {
//console.log('hover out', $(this).attr('src'));
//$('#largeVideo').attr('src', null);
} }
); );
}); });
...@@ -172,10 +190,43 @@ html,body{margin:0px;} ...@@ -172,10 +190,43 @@ html,body{margin:0px;}
$(document).bind('callterminated.jingle', function(event, sid, reason) { $(document).bind('callterminated.jingle', function(event, sid, reason) {
// FIXME // FIXME
}); });
function toggleVideo(enable) {
if (!(connection && connection.jingle.localStream)) return;
for (var idx = 0; idx < connection.jingle.localStream.getVideoTracks().length; idx++) {
connection.jingle.localStream.getVideoTracks()[idx].enabled = enable;
}
}
function toggleAudio(enable) {
if (!(connection && connection.jingle.localStream)) return;
for (var idx = 0; idx < connection.jingle.localStream.getAudioTracks().length; idx++) {
connection.jingle.localStream.getAudioTracks()[idx].enabled = enable;
}
}
$('#chatinput').keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
var val = this.value;
this.value = '';
if (!nickname) {
nickname = val;
this.placeholder = 'Enter text...';
this.maxLength = 255;
$(this).width('90%');
return;
}
connection.emuc.sendMessage(val, nickname);
}
});
function resizeLarge() { function resizeLarge() {
var availableHeight = window.innerHeight; var availableHeight = window.innerHeight;
availableHeight -= $('#remoteVideos').height(); var numvids = $('#remoteVideos>video:visible').length;
availableHeight -= 100; // padding + link ontop if (numvids < 5)
availableHeight -= 100; // min thumbnail height for up to 4 videos
else
availableHeight -= 50; // min thumbnail height for more than 5 videos
availableHeight -= 79; // padding + link ontop
var availableWidth = window.innerWidth; var availableWidth = window.innerWidth;
var aspectRatio = 16.0 / 9.0; var aspectRatio = 16.0 / 9.0;
if (availableHeight < availableWidth / aspectRatio) { if (availableHeight < availableWidth / aspectRatio) {
...@@ -184,12 +235,28 @@ html,body{margin:0px;} ...@@ -184,12 +235,28 @@ html,body{margin:0px;}
if (availableWidth < 0 || availableHeight < 0) return; if (availableWidth < 0 || availableHeight < 0) return;
$('#largeVideo').width(availableWidth); $('#largeVideo').width(availableWidth);
$('#largeVideo').height(availableWidth/aspectRatio); $('#largeVideo').height(availableWidth/aspectRatio);
$('#chatspace').width(availableWidth);
resizeThumbnails() ;
} }
function resizeThumbnails() { function resizeThumbnails() {
var availableWidth = $('#remoteVideos').width(); // Calculate the available height, which is the inner window height minus 39px for the header
// minus 4px for the delimiter lines on the top and bottom of the large video,
// minus the 36px space inside the remoteVideos container used for highlighting shadow.
var availableHeight = window.innerHeight - $('#largeVideo').height() - 79;
var numvids = $('#remoteVideos>video:visible').length; var numvids = $('#remoteVideos>video:visible').length;
// Remove the 1px borders arround videos.
var availableWinWidth = $('#remoteVideos').width() - numvids*2;
var availableWidth = availableWinWidth / numvids;
var aspectRatio = 16.0 / 9.0;
var maxHeight = Math.min(160, availableHeight);
var availableHeight = Math.min(maxHeight, availableWidth / aspectRatio);
if (availableHeight < availableWidth / aspectRatio) {
availableWidth = Math.floor(availableHeight * aspectRatio);
}
// size videos so that while keeping AR and max height, we have a nice fit // size videos so that while keeping AR and max height, we have a nice fit
console.log('fit', numvids, 'videos into', availableWidth); $('#remoteVideos').height(availableHeight + 36); // add the 2*18px border used for highlighting shadow.
$('#remoteVideos>video:visible').width(availableWidth);
$('#remoteVideos>video:visible').height(availableHeight);
} }
$(document).ready(function() { $(document).ready(function() {
resizeLarge(); resizeLarge();
......
src/plugins/jitsivideobridge/src/jquery.min.js 0 → 100644
View file @ 044846f3
This diff is collapsed.
src/plugins/jitsivideobridge/src/main.css 0 → 100644
View file @ 044846f3
body{
margin:0px;
}
#largeVideo {
display:block;
position:relative;
width:1280px;
height:720px;
margin-left:auto;
margin-right:auto;
/* top:-20px;*/
z-index: 0;
}
#remoteVideos {
display:block;
position:relative;
/* top:-30px;*/
text-align:center;
height:196px;
width:auto;
overflow: hidden;
border:1px solid transparent;
font-size:0;
z-index: 2;
}
#remoteVideos video {
position:relative;
top:18px;
height:160px;
width:auto;
z-index:0;
border:1px solid transparent;
}
/*#localVideo {
-webkit-transform: scale(-1,1);
}*/
#remoteVideos video:hover {
cursor: pointer;
cursor: hand;
transform:scale(1.08, 1.08);
-webkit-transform:scale(1.08, 1.08);
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
background-color: #FFFFFF;
-webkit-animation-name: greyPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #515151;
border:1px solid #FFFFFF;
z-index: 10;
}
#chatspace {
height:46px;
line-height:20px;
font-size:20px;
visibility:hidden;
padding:10px;
margin-left:auto;
margin-right:auto;
}
#chatspace .nick {
font-weight:bold;
}
#chatspace>:first-child{
visibility:hidden;
}
div#spacer {
height:5px;
}
#settings {
display:none;
}
#nowebrtc {
display:none;
}
div#header{
display:block;
position:relative;
width:100%;
height:39px;
z-index: 1;
}
div#left {
display:block;
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 39px;
background-repeat:no-repeat;
margin: 0;
padding: 0;
}
div#leftlogo {
position:absolute;
top: 5px;
left: 15px;
background-image:url(jitsilogo.png);
background-repeat:no-repeat;
height: 31px;
width: 68px;
}
div#link {
margin-left: 100px;
margin-right:100px;
height:39px;
line-height:39px;
overflow: hidden;
text-align: center;
vertical-align:middle;
font-size: 14px;
color: #313131;
visibility:hidden;
}
.fade_line {
height: 2px;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}
div#right {
display:block;
position:absolute;
right: 0px;
top: 0px;
background-repeat:no-repeat;
margin:0;
padding:0;
width:100px;
height:39px;
}
div#rightlogo {
position:absolute;
top: 8px;
right: 15px;
background-image:url(estoslogo.png);
background-repeat:no-repeat;
height: 20px;
width: 62px;
}
\ No newline at end of file
src/plugins/jitsivideobridge/src/muc.js
View file @ 044846f3
...@@ -19,7 +19,7 @@ Strophe.addConnectionPlugin('emuc', { ...@@ -19,7 +19,7 @@ Strophe.addConnectionPlugin('emuc', {
roomnode = Math.random().toString(36).substr(2, 20); roomnode = Math.random().toString(36).substr(2, 20);
window.history.pushState('VideoChat', 'Room: ' + roomnode, window.location.pathname + "?r=" + roomnode); window.history.pushState('VideoChat', 'Room: ' + roomnode, window.location.pathname + "?r=" + roomnode);
} }
if (this.roomjid == null) { if (this.roomjid == null) {
this.roomjid = roomnode + '@' + this.mucDomain; this.roomjid = roomnode + '@' + this.mucDomain;
} }
...@@ -124,23 +124,32 @@ Strophe.addConnectionPlugin('emuc', { ...@@ -124,23 +124,32 @@ Strophe.addConnectionPlugin('emuc', {
onJoinComplete: function() { onJoinComplete: function() {
console.log('onJoinComplete'); console.log('onJoinComplete');
$('#roomurl').text(window.location.href); $('#roomurl').text(window.location.href);
$('#header').css('visibility', 'visible'); $('#link').css('visibility', 'visible');
$('#chatspace').css('visibility', 'visible');
if (this.list_members.length < 1) { if (this.list_members.length < 1) {
// FIXME: belongs into an event so we can separate emuc and colibri // FIXME: belongs into an event so we can separate emuc and colibri
master = new Colibri(connection, config.hosts.bridge); master = new Colibri(connection, config.hosts.bridge);
return; return;
} }
}, },
sendMessage: function(body) { sendMessage: function(body, nickname) {
msg = $msg({to: this.roomjid, type: 'groupchat'}); msg = $msg({to: this.roomjid, type: 'groupchat'});
msg.c('body', body); msg.c('body', body).up();
if (nickname) {
msg.c('nick', {xmlns: 'http://jabber.org/protocol/nick'}).t(nickname).up().up();
}
this.connection.send(msg); this.connection.send(msg);
}, },
onMessage: function (msg) { onMessage: function (msg) {
var txt = $(msg).find('>body').text(); var txt = $(msg).find('>body').text();
// TODO: <subject/> // TODO: <subject/>
// FIXME: this is a hack. but jingle on muc makes nickchanges hard
var nick = $(msg).find('>nick[xmlns="http://jabber.org/protocol/nick"]').text() || Strophe.getResourceFromJid($(msg).attr('from'));
if (txt) { if (txt) {
//console.log('chat', Strophe.getResourceFromJid($(msg).attr('from')), txt); console.log('chat', nick, txt);
$('#chatspace>div:first').css('visibility', 'visible');
$('#chatspace>div:first>span[class="nick"]').text(nick);
$('#chatspace>div:first>span[class="chattext"]').text(txt);
} }
return true; return true;
}, },
......
src/plugins/jitsivideobridge/src/strophe.js 0 → 100644
View file @ 044846f3
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023