Receives all data-channel events/messages from Videobridge as JSON-formatted text. Renames active speaker to dominant speaker.
This commit is contained in:
parent
69508d7734
commit
7ce446bcda
2
app.js
2
app.js
|
@ -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
|
// Update the large video to the last added video only if there's no
|
||||||
// current active or focused speaker.
|
// current active or focused speaker.
|
||||||
if (!focusedVideoSrc && !VideoLayout.getActiveSpeakerResourceJid())
|
if (!focusedVideoSrc && !VideoLayout.getDominantSpeakerResourceJid())
|
||||||
VideoLayout.updateLargeVideo(videoelem.attr('src'), 1);
|
VideoLayout.updateLargeVideo(videoelem.attr('src'), 1);
|
||||||
|
|
||||||
VideoLayout.showFocusIndicator();
|
VideoLayout.showFocusIndicator();
|
||||||
|
|
|
@ -94,7 +94,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activespeaker {
|
.dominantspeaker {
|
||||||
background: #000 !important;
|
background: #000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -27,38 +27,53 @@ function onDataChannel(event)
|
||||||
dataChannel.onmessage = function (event)
|
dataChannel.onmessage = function (event)
|
||||||
{
|
{
|
||||||
var data = event.data;
|
var data = event.data;
|
||||||
|
// JSON
|
||||||
|
var obj;
|
||||||
|
|
||||||
console.info("Got Data Channel Message:", data, dataChannel);
|
try
|
||||||
|
|
||||||
// Active speaker event
|
|
||||||
if (data.indexOf('activeSpeaker') === 0)
|
|
||||||
{
|
{
|
||||||
// Endpoint ID from the Videobridge.
|
obj = JSON.parse(data);
|
||||||
var resourceJid = data.split(":")[1];
|
|
||||||
|
|
||||||
console.info(
|
|
||||||
"Data channel new active speaker event: " + resourceJid);
|
|
||||||
$(document).trigger('activespeakerchanged', [resourceJid]);
|
|
||||||
}
|
}
|
||||||
else
|
catch (e)
|
||||||
{
|
{
|
||||||
// JSON
|
console.error(
|
||||||
var obj;
|
"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(
|
// The new/latest list of last-n endpoint IDs.
|
||||||
"Failed to parse data channel message as JSON: ",
|
var lastNEndpoints = obj.lastNEndpoints;
|
||||||
data,
|
/*
|
||||||
dataChannel);
|
* 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);
|
console.debug("Data channel JSON-formatted message: ", obj);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
var VideoLayout = (function (my) {
|
var VideoLayout = (function (my) {
|
||||||
var preMuted = false;
|
var preMuted = false;
|
||||||
var currentActiveSpeaker = null;
|
var currentDominantSpeaker = null;
|
||||||
|
|
||||||
my.changeLocalAudio = function(stream) {
|
my.changeLocalAudio = function(stream) {
|
||||||
connection.jingle.localAudio = stream;
|
connection.jingle.localAudio = stream;
|
||||||
|
@ -139,19 +139,19 @@ var VideoLayout = (function (my) {
|
||||||
|
|
||||||
if (isVisible) {
|
if (isVisible) {
|
||||||
// Only if the large video is currently visible.
|
// Only if the large video is currently visible.
|
||||||
// Disable previous active speaker video.
|
// Disable previous dominant speaker video.
|
||||||
var oldJid = getJidFromVideoSrc(oldSrc);
|
var oldJid = getJidFromVideoSrc(oldSrc);
|
||||||
if (oldJid) {
|
if (oldJid) {
|
||||||
var oldResourceJid = Strophe.getResourceFromJid(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);
|
var userJid = getJidFromVideoSrc(newSrc);
|
||||||
if (userJid)
|
if (userJid)
|
||||||
{
|
{
|
||||||
var resourceJid = Strophe.getResourceFromJid(userJid);
|
var resourceJid = Strophe.getResourceFromJid(userJid);
|
||||||
VideoLayout.enableActiveSpeaker(resourceJid, true);
|
VideoLayout.enableDominantSpeaker(resourceJid, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
$(this).fadeIn(300);
|
$(this).fadeIn(300);
|
||||||
|
@ -173,15 +173,15 @@ var VideoLayout = (function (my) {
|
||||||
if (focusedVideoSrc === videoSrc)
|
if (focusedVideoSrc === videoSrc)
|
||||||
{
|
{
|
||||||
focusedVideoSrc = null;
|
focusedVideoSrc = null;
|
||||||
var activeSpeakerVideo = null;
|
var dominantSpeakerVideo = null;
|
||||||
// Enable the currently set active speaker.
|
// Enable the currently set dominant speaker.
|
||||||
if (currentActiveSpeaker) {
|
if (currentDominantSpeaker) {
|
||||||
activeSpeakerVideo
|
dominantSpeakerVideo
|
||||||
= $('#participant_' + currentActiveSpeaker + '>video')
|
= $('#participant_' + currentDominantSpeaker + '>video')
|
||||||
.get(0);
|
.get(0);
|
||||||
|
|
||||||
if (activeSpeakerVideo)
|
if (dominantSpeakerVideo)
|
||||||
VideoLayout.updateLargeVideo(activeSpeakerVideo.src, 1);
|
VideoLayout.updateLargeVideo(dominantSpeakerVideo.src, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
return;
|
return;
|
||||||
|
@ -254,12 +254,12 @@ var VideoLayout = (function (my) {
|
||||||
if (isVisible) {
|
if (isVisible) {
|
||||||
$('#largeVideo').css({visibility: 'visible'});
|
$('#largeVideo').css({visibility: 'visible'});
|
||||||
$('.watermark').css({visibility: 'visible'});
|
$('.watermark').css({visibility: 'visible'});
|
||||||
VideoLayout.enableActiveSpeaker(resourceJid, true);
|
VideoLayout.enableDominantSpeaker(resourceJid, true);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
$('#largeVideo').css({visibility: 'hidden'});
|
$('#largeVideo').css({visibility: 'hidden'});
|
||||||
$('.watermark').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
|
* @param resourceJid the jid indicating the video element to
|
||||||
* activate/deactivate
|
* 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
|
* disabled
|
||||||
*/
|
*/
|
||||||
my.enableActiveSpeaker = function(resourceJid, isEnable) {
|
my.enableDominantSpeaker = function(resourceJid, isEnable) {
|
||||||
var displayName = resourceJid;
|
var displayName = resourceJid;
|
||||||
var nameSpan = $('#participant_' + resourceJid + '>span.displayname');
|
var nameSpan = $('#participant_' + resourceJid + '>span.displayname');
|
||||||
if (nameSpan.length > 0)
|
if (nameSpan.length > 0)
|
||||||
displayName = nameSpan.text();
|
displayName = nameSpan.text();
|
||||||
|
|
||||||
console.log("UI enable active speaker",
|
console.log("UI enable dominant speaker",
|
||||||
displayName,
|
displayName,
|
||||||
resourceJid,
|
resourceJid,
|
||||||
isEnable);
|
isEnable);
|
||||||
|
@ -625,16 +625,16 @@ var VideoLayout = (function (my) {
|
||||||
if (isEnable) {
|
if (isEnable) {
|
||||||
VideoLayout.showDisplayName(videoContainerId, true);
|
VideoLayout.showDisplayName(videoContainerId, true);
|
||||||
|
|
||||||
if (!videoSpan.classList.contains("activespeaker"))
|
if (!videoSpan.classList.contains("dominantspeaker"))
|
||||||
videoSpan.classList.add("activespeaker");
|
videoSpan.classList.add("dominantspeaker");
|
||||||
|
|
||||||
video.css({visibility: 'hidden'});
|
video.css({visibility: 'hidden'});
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
VideoLayout.showDisplayName(videoContainerId, false);
|
VideoLayout.showDisplayName(videoContainerId, false);
|
||||||
|
|
||||||
if (videoSpan.classList.contains("activespeaker"))
|
if (videoSpan.classList.contains("dominantspeaker"))
|
||||||
videoSpan.classList.remove("activespeaker");
|
videoSpan.classList.remove("dominantspeaker");
|
||||||
|
|
||||||
video.css({visibility: 'visible'});
|
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 () {
|
my.getDominantSpeakerResourceJid = function () {
|
||||||
return currentActiveSpeaker;
|
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.
|
// We ignore local user events.
|
||||||
if (resourceJid
|
if (resourceJid
|
||||||
=== Strophe.getResourceFromJid(connection.emuc.myroomjid))
|
=== Strophe.getResourceFromJid(connection.emuc.myroomjid))
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// Obtain container for new active speaker.
|
// Obtain container for new dominant speaker.
|
||||||
var container = document.getElementById(
|
var container = document.getElementById(
|
||||||
'participant_' + resourceJid);
|
'participant_' + resourceJid);
|
||||||
|
|
||||||
// Update the current active speaker.
|
// Update the current dominant speaker.
|
||||||
if (resourceJid !== currentActiveSpeaker)
|
if (resourceJid !== currentDominantSpeaker)
|
||||||
currentActiveSpeaker = resourceJid;
|
currentDominantSpeaker = resourceJid;
|
||||||
else
|
else
|
||||||
return;
|
return;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue