haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Receives all data-channel events/messages from Videobridge as JSON-formatted text. Renames active speaker to dominant speaker.

This commit is contained in:
Lyubomir Marinov 2014-07-16 17:35:54 +03:00
parent 69508d7734
commit 7ce446bcda
4 changed files with 70 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -562,7 +562,7 @@ $(document).bind('callactive.jingle', function (event, videoelem, sid) {
// Update the large video to the last added video only if there's no
// current active or focused speaker.
if (!focusedVideoSrc && !VideoLayout.getActiveSpeakerResourceJid())
if (!focusedVideoSrc && !VideoLayout.getDominantSpeakerResourceJid())
VideoLayout.updateLargeVideo(videoelem.attr('src'), 1);
VideoLayout.showFocusIndicator();

2
css/videolayout_default.css
View File

@ -94,7 +94,7 @@
height: 100%;
}
.activespeaker {
.dominantspeaker {
background: #000 !important;
}

59
data_channels.js
View File

@ -27,38 +27,53 @@ function onDataChannel(event)
dataChannel.onmessage = function (event)
{
var data = event.data;
// JSON
var obj;
console.info("Got Data Channel Message:", data, dataChannel);
// Active speaker event
if (data.indexOf('activeSpeaker') === 0)
try
{
// Endpoint ID from the Videobridge.
var resourceJid = data.split(":")[1];
console.info(
"Data channel new active speaker event: " + resourceJid);
$(document).trigger('activespeakerchanged', [resourceJid]);
obj = JSON.parse(data);
}
else
catch (e)
{
// JSON
var obj;
console.error(
"Failed to parse data channel message as JSON: ",
data,
dataChannel);
}
if (('undefined' !== typeof(obj)) && (null !== obj))
{
var colibriClass = obj.colibriClass;
try
if ("DominantSpeakerEndpointChangeEvent" === colibriClass)
{
obj = JSON.parse(data);
// Endpoint ID from the Videobridge.
var dominantSpeakerEndpoint = obj.dominantSpeakerEndpoint;
console.info(
"Data channel new dominant speaker event: ",
dominantSpeakerEndpoint);
$(document).trigger(
'dominantspeakerchanged',
[dominantSpeakerEndpoint]);
}
catch (e)
else if ("LastNEndpointsChangeEvent" === colibriClass)
{
console.error(
"Failed to parse data channel message as JSON: ",
data,
dataChannel);
// The new/latest list of last-n endpoint IDs.
var lastNEndpoints = obj.lastNEndpoints;
/*
* The list of endpoint IDs which are entering the list of
* last-n at this time i.e. were not in the old list of last-n
* endpoint IDs.
*/
var endpointsEnteringLastN = obj.endpointsEnteringLastN;
console.debug(
"Data channel new last-n event: ",
lastNEndpoints);
}
if (('undefined' !== typeof(obj)) && (null !== obj))
else
{
// TODO Consume the JSON-formatted data channel message.
console.debug("Data channel JSON-formatted message: ", obj);
}
}

62
videolayout.js
View File

@ -1,6 +1,6 @@
var VideoLayout = (function (my) {
var preMuted = false;
var currentActiveSpeaker = null;
var currentDominantSpeaker = null;
my.changeLocalAudio = function(stream) {
connection.jingle.localAudio = stream;
@ -139,19 +139,19 @@ var VideoLayout = (function (my) {
if (isVisible) {
// Only if the large video is currently visible.
// Disable previous active speaker video.
// Disable previous dominant speaker video.
var oldJid = getJidFromVideoSrc(oldSrc);
if (oldJid) {
var oldResourceJid = Strophe.getResourceFromJid(oldJid);
VideoLayout.enableActiveSpeaker(oldResourceJid, false);
VideoLayout.enableDominantSpeaker(oldResourceJid, false);
}
// Enable new active speaker in the remote videos section.
// Enable new dominant speaker in the remote videos section.
var userJid = getJidFromVideoSrc(newSrc);
if (userJid)
{
var resourceJid = Strophe.getResourceFromJid(userJid);
VideoLayout.enableActiveSpeaker(resourceJid, true);
VideoLayout.enableDominantSpeaker(resourceJid, true);
}
$(this).fadeIn(300);
@ -173,15 +173,15 @@ var VideoLayout = (function (my) {
if (focusedVideoSrc === videoSrc)
{
focusedVideoSrc = null;
var activeSpeakerVideo = null;
// Enable the currently set active speaker.
if (currentActiveSpeaker) {
activeSpeakerVideo
= $('#participant_' + currentActiveSpeaker + '>video')
var dominantSpeakerVideo = null;
// Enable the currently set dominant speaker.
if (currentDominantSpeaker) {
dominantSpeakerVideo
= $('#participant_' + currentDominantSpeaker + '>video')
.get(0);
if (activeSpeakerVideo)
VideoLayout.updateLargeVideo(activeSpeakerVideo.src, 1);
if (dominantSpeakerVideo)
VideoLayout.updateLargeVideo(dominantSpeakerVideo.src, 1);
}
return;
@ -254,12 +254,12 @@ var VideoLayout = (function (my) {
if (isVisible) {
$('#largeVideo').css({visibility: 'visible'});
$('.watermark').css({visibility: 'visible'});
VideoLayout.enableActiveSpeaker(resourceJid, true);
VideoLayout.enableDominantSpeaker(resourceJid, true);
}
else {
$('#largeVideo').css({visibility: 'hidden'});
$('.watermark').css({visibility: 'hidden'});
VideoLayout.enableActiveSpeaker(resourceJid, false);
VideoLayout.enableDominantSpeaker(resourceJid, false);
}
};
@ -582,20 +582,20 @@ var VideoLayout = (function (my) {
};
/**
* Enables the active speaker UI.
* Enables the dominant speaker UI.
*
* @param resourceJid the jid indicating the video element to
* activate/deactivate
* @param isEnable indicates if the active speaker should be enabled or
* @param isEnable indicates if the dominant speaker should be enabled or
* disabled
*/
my.enableActiveSpeaker = function(resourceJid, isEnable) {
my.enableDominantSpeaker = function(resourceJid, isEnable) {
var displayName = resourceJid;
var nameSpan = $('#participant_' + resourceJid + '>span.displayname');
if (nameSpan.length > 0)
displayName = nameSpan.text();
console.log("UI enable active speaker",
console.log("UI enable dominant speaker",
displayName,
resourceJid,
isEnable);
@ -625,16 +625,16 @@ var VideoLayout = (function (my) {
if (isEnable) {
VideoLayout.showDisplayName(videoContainerId, true);
if (!videoSpan.classList.contains("activespeaker"))
videoSpan.classList.add("activespeaker");
if (!videoSpan.classList.contains("dominantspeaker"))
videoSpan.classList.add("dominantspeaker");
video.css({visibility: 'hidden'});
}
else {
VideoLayout.showDisplayName(videoContainerId, false);
if (videoSpan.classList.contains("activespeaker"))
videoSpan.classList.remove("activespeaker");
if (videoSpan.classList.contains("dominantspeaker"))
videoSpan.classList.remove("dominantspeaker");
video.css({visibility: 'visible'});
}
@ -805,10 +805,10 @@ var VideoLayout = (function (my) {
};
/**
* Returns the current active speaker resource jid.
* Returns the current dominant speaker resource jid.
*/
my.getActiveSpeakerResourceJid = function () {
return currentActiveSpeaker;
my.getDominantSpeakerResourceJid = function () {
return currentDominantSpeaker;
};
/**
@ -926,21 +926,21 @@ var VideoLayout = (function (my) {
});
/**
* On active speaker changed event.
* On dominant speaker changed event.
*/
$(document).bind('activespeakerchanged', function (event, resourceJid) {
$(document).bind('dominantspeakerchanged', function (event, resourceJid) {
// We ignore local user events.
if (resourceJid
=== Strophe.getResourceFromJid(connection.emuc.myroomjid))
return;
// Obtain container for new active speaker.
// Obtain container for new dominant speaker.
var container = document.getElementById(
'participant_' + resourceJid);
// Update the current active speaker.
if (resourceJid !== currentActiveSpeaker)
currentActiveSpeaker = resourceJid;
// Update the current dominant speaker.
if (resourceJid !== currentDominantSpeaker)
currentDominantSpeaker = resourceJid;
else
return;