Merge pull request #698 from jitsi/external_api

Changes the implementation of the iframe API to use postis
This commit is contained in:
bgrozev 2016-06-22 13:12:49 -05:00 committed by GitHub
commit 2e802c0f6d
10 changed files with 517 additions and 575 deletions

4
.gitignore vendored
View File

@ -4,8 +4,6 @@ node_modules
*.iml
.*.tmp
deploy-local.sh
libs/app.bundle.*
libs/lib-jitsi-meet*
libs/external_connect.js
libs/
all.css
.remote-sync.json

View File

@ -8,8 +8,9 @@ DEPLOY_DIR = libs
BROWSERIFY_FLAGS = -d
OUTPUT_DIR = .
LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
IFRAME_API_DIR = ./modules/API/external
all: update-deps compile uglify deploy clean
all: update-deps compile compile-iframe-api uglify uglify-iframe-api deploy clean
update-deps:
$(NPM) install
@ -17,8 +18,11 @@ update-deps:
compile:
$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
compile-iframe-api:
$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e $(IFRAME_API_DIR)/external_api.js -s JitsiMeetExternalAPI | $(EXORCIST) $(OUTPUT_DIR)/external_api.js.map > $(OUTPUT_DIR)/external_api.js
clean:
rm -f $(OUTPUT_DIR)/app.bundle.*
rm -f $(OUTPUT_DIR)/app.bundle.* $(OUTPUT_DIR)/external_api.*
deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local
@ -28,6 +32,8 @@ deploy-init:
deploy-appbundle:
cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map \
$(OUTPUT_DIR)/app.bundle.js $(OUTPUT_DIR)/app.bundle.js.map \
$(OUTPUT_DIR)/external_api.js.map $(OUTPUT_DIR)/external_api.js \
$(OUTPUT_DIR)/external_api.min.map $(OUTPUT_DIR)/external_api.min.js \
$(DEPLOY_DIR)
deploy-lib-jitsi-meet:
@ -46,6 +52,9 @@ deploy-local:
uglify:
$(UGLIFYJS) -p relative $(OUTPUT_DIR)/app.bundle.js -o $(OUTPUT_DIR)/app.bundle.min.js --source-map $(OUTPUT_DIR)/app.bundle.min.map --in-source-map $(OUTPUT_DIR)/app.bundle.js.map
uglify-iframe-api:
$(UGLIFYJS) -p relative $(OUTPUT_DIR)/external_api.js -o $(OUTPUT_DIR)/external_api.min.js --source-map $(OUTPUT_DIR)/external_api.min.map --in-source-map $(OUTPUT_DIR)/external_api.js.map
source-package:
mkdir -p source_package/jitsi-meet/css && \

5
app.js
View File

@ -116,10 +116,7 @@ function init() {
APP.keyboardshortcut.init();
}).catch(function (err) {
APP.UI.hideRingOverLay();
APP.API.sendPostisMessage({
method: 'video-conference-left',
params: {roomName: APP.conference.roomName}
});
APP.API.notifyConferenceLeft(APP.conference.roomName);
console.error(err);
});
}

View File

@ -155,10 +155,7 @@ function maybeRedirectToWelcomePage() {
function disconnectAndShowFeedback(requestFeedback) {
APP.UI.hideRingOverLay();
connection.disconnect();
APP.API.sendPostisMessage({
method: 'video-conference-left',
params: {roomName: APP.conference.roomName}
});
APP.API.notifyConferenceLeft(APP.conference.roomName);
if (requestFeedback) {
return APP.UI.requestFeedback();
} else {
@ -465,9 +462,6 @@ export default {
this._createRoom(tracks);
this.isDesktopSharingEnabled =
JitsiMeetJS.isDesktopSharingEnabled();
if(this.isDesktopSharingEnabled)
APP.API.addPostisMessageListener('toggle-share-screen',
() => this.toggleScreenSharing());
// if user didn't give access to mic or camera or doesn't have
// them at all, we disable corresponding toolbar buttons
@ -908,10 +902,7 @@ export default {
// add local streams when joined to the conference
room.on(ConferenceEvents.CONFERENCE_JOINED, () => {
APP.UI.mucJoined();
APP.API.sendPostisMessage({
method: 'video-conference-joined',
params: {roomName: APP.conference.roomName}
});
APP.API.notifyConferenceJoined(APP.conference.roomName);
});
room.on(

View File

@ -77,6 +77,11 @@ api.executeCommand('toggleChat', [])
api.executeCommand('toggleContactList', [])
```
* **toggleShareScreen** - starts / stops the screen sharing. No arguments are required.
```
api.executeCommand('toggleShareScreen', [])
```
You can also execute multiple commands using the method ```executeCommands```.
```
api.executeCommands(commands)
@ -136,6 +141,20 @@ The listener will receive object with the following structure:
jid: jid //the jid of the participant
}
```
* **video-conference-joined** - event notifications fired when the local user has joined the video conference.
The listener will receive object with the following structure:
```
{
roomName: room //the room name of the conference
}
```
* **video-conference-left** - event notifications fired when the local user has left the video conference.
The listener will receive object with the following structure:
```
{
roomName: room //the room name of the conference
}
```
You can also add multiple event listeners by using ```addEventListeners```.
This method requires one argument of type Object. The object argument must

View File

@ -33,6 +33,11 @@ server {
ssi on;
}
# Backward compatibility
location ~ /external_api.* {
root /usr/share/jitsi-meet/libs;
}
# BOSH
location /http-bind {
proxy_pass http://localhost:5280/http-bind;

View File

@ -1,378 +0,0 @@
/**
* Implements API class that embeds Jitsi Meet in external applications.
*/
var JitsiMeetExternalAPI = (function()
{
/**
* The minimum width for the Jitsi Meet frame
* @type {number}
*/
var MIN_WIDTH = 790;
/**
* The minimum height for the Jitsi Meet frame
* @type {number}
*/
var MIN_HEIGHT = 300;
/**
* Constructs new API instance. Creates iframe element that loads
* Jitsi Meet.
* @param domain the domain name of the server that hosts the conference
* @param room_name the name of the room to join
* @param width width of the iframe
* @param height height of the iframe
* @param parent_node the node that will contain the iframe
* @param filmStripOnly if the value is true only the small videos will be
* visible.
* @param noSsl if the value is true https won't be used
* @constructor
*/
function JitsiMeetExternalAPI(domain, room_name, width, height, parentNode,
configOverwrite, interfaceConfigOverwrite, noSsl) {
if (!width || width < MIN_WIDTH)
width = MIN_WIDTH;
if (!height || height < MIN_HEIGHT)
height = MIN_HEIGHT;
this.parentNode = null;
if (parentNode) {
this.parentNode = parentNode;
} else {
var scriptTag = document.scripts[document.scripts.length - 1];
this.parentNode = scriptTag.parentNode;
}
this.iframeHolder =
this.parentNode.appendChild(document.createElement("div"));
this.iframeHolder.id = "jitsiConference" + JitsiMeetExternalAPI.id;
if(width)
this.iframeHolder.style.width = width + "px";
if(height)
this.iframeHolder.style.height = height + "px";
this.frameName = "jitsiConferenceFrame" + JitsiMeetExternalAPI.id;
this.url = (noSsl) ? "http" : "https" +"://" + domain + "/";
if(room_name)
this.url += room_name;
this.url += "#external=true";
var key;
if (configOverwrite) {
for (key in configOverwrite) {
if (!configOverwrite.hasOwnProperty(key) ||
typeof key !== 'string')
continue;
this.url += "&config." + key + "=" + configOverwrite[key];
}
}
if (interfaceConfigOverwrite) {
for (key in interfaceConfigOverwrite) {
if (!interfaceConfigOverwrite.hasOwnProperty(key) ||
typeof key !== 'string')
continue;
this.url += "&interfaceConfig." + key + "=" +
interfaceConfigOverwrite[key];
}
}
JitsiMeetExternalAPI.id++;
this.frame = document.createElement("iframe");
this.frame.src = this.url;
this.frame.name = this.frameName;
this.frame.id = this.frameName;
this.frame.width = "100%";
this.frame.height = "100%";
this.frame.setAttribute("allowFullScreen","true");
this.frame = this.iframeHolder.appendChild(this.frame);
this.frameLoaded = false;
this.initialCommands = [];
this.eventHandlers = {};
this.initListeners();
}
/**
* Last id of api object
* @type {number}
*/
JitsiMeetExternalAPI.id = 0;
/**
* Sends the passed object to Jitsi Meet
* @param object the object to be sent
*/
JitsiMeetExternalAPI.prototype.sendMessage = function(object) {
if (this.frameLoaded) {
this.frame.contentWindow.postMessage(
JSON.stringify(object), this.frame.src);
}
else {
this.initialCommands.push(object);
}
};
/**
* Executes command. The available commands are:
* displayName - sets the display name of the local participant to the value
* passed in the arguments array.
* toggleAudio - mutes / unmutes audio with no arguments
* toggleVideo - mutes / unmutes video with no arguments
* filmStrip - hides / shows the film strip with no arguments
* If the command doesn't require any arguments the parameter should be set
* to empty array or it may be omitted.
* @param name the name of the command
* @param arguments array of arguments
*/
JitsiMeetExternalAPI.prototype.executeCommand = function(name,
argumentsList) {
var argumentsArray = argumentsList;
if (!argumentsArray)
argumentsArray = [];
var object = {type: "command", action: "execute"};
object[name] = argumentsArray;
this.sendMessage(object);
};
/**
* Executes commands. The available commands are:
* displayName - sets the display name of the local participant to the value
* passed in the arguments array.
* toggleAudio - mutes / unmutes audio with no arguments
* toggleVideo - mutes / unmutes video with no arguments
* filmStrip - hides / shows the film strip with no arguments
* @param object the object with commands to be executed. The keys of the
* object are the commands that will be executed and the values are the
* arguments for the command.
*/
JitsiMeetExternalAPI.prototype.executeCommands = function (object) {
object.type = "command";
object.action = "execute";
this.sendMessage(object);
};
/**
* Adds event listeners to Meet Jitsi. The object key should be the name of
* the event and value - the listener.
* Currently we support the following
* events:
* incomingMessage - receives event notifications about incoming
* messages. The listener will receive object with the following structure:
* {{
* "from": from,//JID of the user that sent the message
* "nick": nick,//the nickname of the user that sent the message
* "message": txt//the text of the message
* }}
* outgoingMessage - receives event notifications about outgoing
* messages. The listener will receive object with the following structure:
* {{
* "message": txt//the text of the message
* }}
* displayNameChanged - receives event notifications about display name
* change. The listener will receive object with the following structure:
* {{
* jid: jid,//the JID of the participant that changed his display name
* displayname: displayName //the new display name
* }}
* participantJoined - receives event notifications about new participant.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* participantLeft - receives event notifications about the participant that
* left the room.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* @param object
*/
JitsiMeetExternalAPI.prototype.addEventListeners
= function (object) {
var message = {type: "event", action: "add", events: []};
for(var i in object)
{
message.events.push(i);
this.eventHandlers[i] = object[i];
}
this.sendMessage(message);
};
/**
* Adds event listeners to Meet Jitsi. Currently we support the following
* events:
* incomingMessage - receives event notifications about incoming
* messages. The listener will receive object with the following structure:
* {{
* "from": from,//JID of the user that sent the message
* "nick": nick,//the nickname of the user that sent the message
* "message": txt//the text of the message
* }}
* outgoingMessage - receives event notifications about outgoing
* messages. The listener will receive object with the following structure:
* {{
* "message": txt//the text of the message
* }}
* displayNameChanged - receives event notifications about display name
* change. The listener will receive object with the following structure:
* {{
* jid: jid,//the JID of the participant that changed his display name
* displayname: displayName //the new display name
* }}
* participantJoined - receives event notifications about new participant.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* participantLeft - receives event notifications about participant the that
* left the room.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* @param event the name of the event
* @param listener the listener
*/
JitsiMeetExternalAPI.prototype.addEventListener
= function (event, listener) {
var message = {type: "event", action: "add", events: [event]};
this.eventHandlers[event] = listener;
this.sendMessage(message);
};
/**
* Removes event listener.
* @param event the name of the event.
*/
JitsiMeetExternalAPI.prototype.removeEventListener
= function (event) {
if(!this.eventHandlers[event])
{
console.error("The event " + event + " is not registered.");
return;
}
var message = {type: "event", action: "remove", events: [event]};
delete this.eventHandlers[event];
this.sendMessage(message);
};
/**
* Removes event listeners.
* @param events array with the names of the events.
*/
JitsiMeetExternalAPI.prototype.removeEventListeners
= function (events) {
var eventsArray = [];
for(var i = 0; i < events.length; i++)
{
var event = events[i];
if(!this.eventHandlers[event])
{
console.error("The event " + event + " is not registered.");
continue;
}
delete this.eventHandlers[event];
eventsArray.push(event);
}
if(eventsArray.length > 0)
{
this.sendMessage(
{type: "event", action: "remove", events: eventsArray});
}
};
/**
* Processes message events sent from Jitsi Meet
* @param event the event
*/
JitsiMeetExternalAPI.prototype.processMessage = function(event) {
var message;
try {
message = JSON.parse(event.data);
} catch (e) {}
if(!message.type) {
console.error("Message without type is received.");
return;
}
switch (message.type) {
case "system":
if(message.loaded) {
this.onFrameLoaded();
}
break;
case "event":
if(message.action != "result" ||
!message.event || !this.eventHandlers[message.event]) {
console.warn("The received event cannot be parsed.");
return;
}
this.eventHandlers[message.event](message.result);
break;
default :
console.error("Unknown message type.");
return;
}
};
/**
* That method is called when the Jitsi Meet is loaded. Executes saved
* commands that are send before the frame was loaded.
*/
JitsiMeetExternalAPI.prototype.onFrameLoaded = function () {
this.frameLoaded = true;
for (var i = 0; i < this.initialCommands.length; i++) {
this.sendMessage(this.initialCommands[i]);
}
this.initialCommands = null;
};
/**
* Setups the listener for message events from Jitsi Meet.
*/
JitsiMeetExternalAPI.prototype.initListeners = function () {
var self = this;
this.eventListener = function (event) {
self.processMessage(event);
};
if (window.addEventListener) {
window.addEventListener('message',
this.eventListener, false);
}
else {
window.attachEvent('onmessage', this.eventListener);
}
};
/**
* Removes the listeners and removes the Jitsi Meet frame.
*/
JitsiMeetExternalAPI.prototype.dispose = function () {
if (window.removeEventListener) {
window.removeEventListener('message',
this.eventListener, false);
}
else {
window.detachEvent('onmessage',
this.eventListener);
}
var frame = document.getElementById(this.frameName);
if(frame)
frame.src = 'about:blank';
var self = this;
window.setTimeout(function () {
self.iframeHolder.removeChild(self.frame);
self.iframeHolder.parentNode.removeChild(self.iframeHolder);
}, 10);
};
return JitsiMeetExternalAPI;
})();

View File

@ -1,11 +1,11 @@
/* global APP */
/* global APP, getConfigParamsFromUrl */
/**
* Implements API class that communicates with external api class
* and provides interface to access Jitsi Meet features by external
* applications that embed Jitsi Meet
*/
import postis from 'postis';
import postisInit from 'postis';
/**
* List of the available commands.
@ -20,36 +20,41 @@
*/
let commands = {};
let hashParams = getConfigParamsFromUrl();
/**
* JitsiMeetExternalAPI id - unique for a webpage.
*/
let jitsi_meet_external_api_id = hashParams.jitsi_meet_external_api_id;
/**
* Object that will execute sendMessage
*/
let target = window.opener ? window.opener : window.parent;
/**
* Array of functions that are going to receive the objects passed to this
* window
* Postis instance. Used to communicate with the external application.
*/
let messageListeners = [];
let postis;
/**
* Current status (enabled/disabled) of Postis.
* Current status (enabled/disabled) of API.
*/
let enablePostis = false;
/**
* Current status (enabled/disabled) of Post Message API.
*/
let enablePostMessage = false;
let enabled = false;
function initCommands() {
commands = {
displayName: APP.UI.inputDisplayNameHandler,
toggleAudio: APP.conference.toggleAudioMuted,
toggleVideo: APP.conference.toggleVideoMuted,
toggleFilmStrip: APP.UI.toggleFilmStrip,
toggleChat: APP.UI.toggleChat,
toggleContactList: APP.UI.toggleContactList
"display-name": APP.UI.inputDisplayNameHandler,
"toggle-audio": APP.conference.toggleAudioMuted,
"toggle-video": APP.conference.toggleVideoMuted,
"toggle-film-strip": APP.UI.toggleFilmStrip,
"toggle-chat": APP.UI.toggleChat,
"toggle-contact-list": APP.UI.toggleContactList,
"toggle-share-screen": APP.conference.toggleScreenSharing
};
Object.keys(commands).forEach(function (key) {
postis.listen(key, commands[key]);
});
}
@ -57,95 +62,34 @@ function initCommands() {
* Maps the supported events and their status
* (true it the event is enabled and false if it is disabled)
* @type {{
* incomingMessage: boolean,
* outgoingMessage: boolean,
* displayNameChange: boolean,
* participantJoined: boolean,
* participantLeft: boolean
* incoming-message: boolean,
* outgoing-message: boolean,
* display-name-change: boolean,
* participant-left: boolean,
* participant-joined: boolean,
* video-conference-left: boolean,
* video-conference-joined: boolean
* }}
*/
const events = {
incomingMessage: false,
outgoingMessage:false,
displayNameChange: false,
participantJoined: false,
participantLeft: false
"incoming-message": false,
"outgoing-message":false,
"display-name-change": false,
"participant-joined": false,
"participant-left": false,
"video-conference-joined": false,
"video-conference-left": false
};
/**
* Processes commands from external application.
* @param message the object with the command
*/
function processCommand(message) {
if (message.action != "execute") {
console.error("Unknown action of the message");
return;
}
for (var key in message) {
if(commands[key])
commands[key].apply(null, message[key]);
}
}
/**
* Processes events objects from external applications
* @param event the event
*/
function processEvent(event) {
if (!event.action) {
console.error("Event with no action is received.");
return;
}
var i = 0;
switch(event.action) {
case "add":
for (; i < event.events.length; i++) {
events[event.events[i]] = true;
}
break;
case "remove":
for (; i < event.events.length; i++) {
events[event.events[i]] = false;
}
break;
default:
console.error("Unknown action for event.");
}
}
/**
* Processes a message event from the external application
* @param event the message event
*/
function processMessage(event) {
var message;
try {
message = JSON.parse(event.data);
} catch (e) {
console.error("Cannot parse data", event.data);
return;
}
switch (message.type) {
case "command":
processCommand(message);
break;
case "event":
processEvent(message);
break;
default:
console.warn("Unknown message type");
}
}
/**
* Sends message to the external application.
* @param object {object} the object that will be sent as JSON string
* @param message {object}
* @param method {string}
* @param params {object} the object that will be sent as JSON string
*/
function sendMessage(object) {
if(enablePostMessage)
target.postMessage(JSON.stringify(object), "*");
function sendMessage(message) {
if(enabled)
postis.send(message);
}
/**
@ -153,8 +97,7 @@ function sendMessage(object) {
* @returns {boolean}
*/
function isEnabled () {
let hash = location.hash;
return !!(hash && hash.indexOf("external=true") > -1 && window.postMessage);
return (typeof jitsi_meet_external_api_id === "number");
}
/**
@ -173,13 +116,25 @@ function isEventEnabled (name) {
* @param object data associated with the event
*/
function triggerEvent (name, object) {
if (isEventEnabled(name) && enablePostMessage) {
sendMessage({
type: "event",
action: "result",
event: name,
result: object
});
if(isEventEnabled(name))
sendMessage({method: name, params: object});
}
/**
* Handles system messages. (for example: enable/disable events)
* @param message {object} the message
*/
function onSystemMessage(message) {
switch (message.type) {
case "eventStatus":
if(!message.name || !message.value) {
console.warn("Unknown system message format", message);
break;
}
events[message.name] = message.value;
break;
default:
console.warn("Unknown system message type", message);
}
}
@ -190,33 +145,27 @@ export default {
* It also sends a message to the external application that APIConnector
* is initialized.
* @param options {object}
* @param enablePostis {boolean} if true the postis npm
* package for comminication with the parent window will be enabled.
* @param enablePostMessage {boolean} if true the postMessageAPI for
* comminication with the parent window will be enabled.
* @param forceEnable {boolean} if true the module will be enabled.
* @param enabledEvents {array} array of events that should be enabled.
*/
init: function (options = {}) {
options.enablePostMessage = options.enablePostMessage || isEnabled();
if (!options.enablePostis &&
!options.enablePostMessage) {
init (options = {}) {
if(!isEnabled() && !options.forceEnable)
return;
}
enablePostis = options.enablePostis;
enablePostMessage = options.enablePostMessage;
if(enablePostMessage) {
enabled = true;
if(options.enabledEvents)
options.enabledEvents.forEach(function (eventName) {
events[eventName] = true;
});
let postisOptions = {
window: target
};
if(typeof jitsi_meet_external_api_id === "number")
postisOptions.scope
= "jitsi_meet_external_api_" + jitsi_meet_external_api_id;
postis = postisInit(postisOptions);
postis.listen("jitsiSystemMessage", onSystemMessage);
initCommands();
if (window.addEventListener) {
window.addEventListener('message', processMessage, false);
} else {
window.attachEvent('onmessage', processMessage);
}
sendMessage({type: "system", loaded: true});
}
if(enablePostis) {
this.postis = postis({window: target});
}
},
/**
@ -224,28 +173,7 @@ export default {
* @param {string} body message body
*/
notifySendingChatMessage (body) {
triggerEvent("outgoingMessage", {"message": body});
},
/**
* Sends message to the external application.
* @param options {object}
* @param method {string}
* @param params {object} the object that will be sent as JSON string
*/
sendPostisMessage(options) {
if(enablePostis)
this.postis.send(options);
},
/**
* Adds listener for Postis messages.
* @param method {string} postis mehtod
* @param listener {function}
*/
addPostisMessageListener (method, listener) {
if(enablePostis)
this.postis.listen(method, listener);
triggerEvent("outgoing-message", {"message": body});
},
/**
@ -262,7 +190,7 @@ export default {
}
triggerEvent(
"incomingMessage",
"incoming-message",
{"from": id, "nick": nick, "message": body, "stamp": ts}
);
},
@ -273,7 +201,7 @@ export default {
* @param {string} id user id
*/
notifyUserJoined (id) {
triggerEvent("participantJoined", {id});
triggerEvent("participant-joined", {id});
},
/**
@ -282,7 +210,7 @@ export default {
* @param {string} id user id
*/
notifyUserLeft (id) {
triggerEvent("participantLeft", {id});
triggerEvent("participant-left", {id});
},
/**
@ -292,21 +220,34 @@ export default {
* @param {string} displayName user nickname
*/
notifyDisplayNameChanged (id, displayName) {
triggerEvent("displayNameChange", {id, displayname: displayName});
triggerEvent("display-name-change", {id, displayname: displayName});
},
/**
* Notify external application (if API is enabled) that
* user changed their nickname.
* @param {string} id user id
* @param {string} displayName user nickname
*/
notifyConferenceJoined (room) {
triggerEvent("video-conference-joined", {roomName: room});
},
/**
* Notify external application (if API is enabled) that
* user changed their nickname.
* @param {string} id user id
* @param {string} displayName user nickname
*/
notifyConferenceLeft (room) {
triggerEvent("video-conference-left", {roomName: room});
},
/**
* Removes the listeners.
*/
dispose: function () {
if (enablePostMessage) {
if (window.removeEventListener) {
window.removeEventListener("message", processMessage, false);
} else {
window.detachEvent('onmessage', processMessage);
}
}
if(enablePostis)
this.postis.destroy();
if(enabled)
postis.destroy();
}
};

359
modules/API/external/external_api.js vendored Normal file
View File

@ -0,0 +1,359 @@
/**
* Implements API class that embeds Jitsi Meet in external applications.
*/
var postisInit = require("postis");
/**
* The minimum width for the Jitsi Meet frame
* @type {number}
*/
var MIN_WIDTH = 790;
/**
* The minimum height for the Jitsi Meet frame
* @type {number}
*/
var MIN_HEIGHT = 300;
/**
* Last id of api object
* @type {number}
*/
var id = 0;
/**
* Maps the names of the commands expected by the API with the name of the
* commands expected by jitsi-meet
*/
var commands = {
"displayName": "display-name",
"toggleAudio": "toggle-audio",
"toggleVideo": "toggle-video",
"toggleFilmStrip": "toggle-film-strip",
"toggleChat": "toggle-chat",
"toggleContactList": "toggle-contact-list",
"toggleShareScreen": "toggle-share-screen"
};
/**
* Maps the names of the events expected by the API with the name of the
* events expected by jitsi-meet
*/
var events = {
"incomingMessage": "incoming-message",
"outgoingMessage": "outgoing-message",
"displayNameChange": "display-name-change",
"participantJoined": "participant-joined",
"participantLeft": "participant-left",
"videoConferenceJoined": "video-conference-joined",
"videoConferenceLeft": "video-conference-left"
};
/**
* Sends the passed object to Jitsi Meet
* @param postis {Postis object} the postis instance that is going to be used
* to send the message
* @param object the object to be sent
* - method {sting}
* - params {object}
*/
function sendMessage(postis, object) {
postis.send(object);
}
/**
* Sends message for event enable/disable status change.
* @param postis {Postis object} the postis instance that is going to be used.
* @param event {string} the name of the event
* @param status {boolean} true - enabled; false - disabled;
*/
function changeEventStatus(postis, event, status) {
if(!(event in events)) {
console.error("Not supported event name.");
return;
}
sendMessage(postis, {
method: "jitsiSystemMessage",
params: {type: "eventStatus", name: events[event], value: status}
});
}
/**
* Constructs new API instance. Creates iframe element that loads
* Jitsi Meet.
* @param domain the domain name of the server that hosts the conference
* @param room_name the name of the room to join
* @param width width of the iframe
* @param height height of the iframe
* @param parent_node the node that will contain the iframe
* @param filmStripOnly if the value is true only the small videos will be
* visible.
* @param noSsl if the value is true https won't be used
* @constructor
*/
function JitsiMeetExternalAPI(domain, room_name, width, height, parentNode,
configOverwrite, interfaceConfigOverwrite, noSsl) {
if (!width || width < MIN_WIDTH)
width = MIN_WIDTH;
if (!height || height < MIN_HEIGHT)
height = MIN_HEIGHT;
this.parentNode = null;
if (parentNode) {
this.parentNode = parentNode;
} else {
var scriptTag = document.scripts[document.scripts.length - 1];
this.parentNode = scriptTag.parentNode;
}
this.iframeHolder =
this.parentNode.appendChild(document.createElement("div"));
this.iframeHolder.id = "jitsiConference" + id;
if(width)
this.iframeHolder.style.width = width + "px";
if(height)
this.iframeHolder.style.height = height + "px";
this.frameName = "jitsiConferenceFrame" + id;
this.url = (noSsl) ? "http" : "https" +"://" + domain + "/";
if(room_name)
this.url += room_name;
this.url += "#jitsi_meet_external_api_id=" + id;
var key;
if (configOverwrite) {
for (key in configOverwrite) {
if (!configOverwrite.hasOwnProperty(key) ||
typeof key !== 'string')
continue;
this.url += "&config." + key + "=" + configOverwrite[key];
}
}
if (interfaceConfigOverwrite) {
for (key in interfaceConfigOverwrite) {
if (!interfaceConfigOverwrite.hasOwnProperty(key) ||
typeof key !== 'string')
continue;
this.url += "&interfaceConfig." + key + "=" +
interfaceConfigOverwrite[key];
}
}
this.frame = document.createElement("iframe");
this.frame.src = this.url;
this.frame.name = this.frameName;
this.frame.id = this.frameName;
this.frame.width = "100%";
this.frame.height = "100%";
this.frame.setAttribute("allowFullScreen","true");
this.frame = this.iframeHolder.appendChild(this.frame);
this.postis = postisInit({
window: this.frame.contentWindow,
scope: "jitsi_meet_external_api_" + id
});
this.eventHandlers = {};
id++;
}
/**
* Executes command. The available commands are:
* displayName - sets the display name of the local participant to the value
* passed in the arguments array.
* toggleAudio - mutes / unmutes audio with no arguments
* toggleVideo - mutes / unmutes video with no arguments
* filmStrip - hides / shows the film strip with no arguments
* If the command doesn't require any arguments the parameter should be set
* to empty array or it may be omitted.
* @param name the name of the command
* @param arguments array of arguments
*/
JitsiMeetExternalAPI.prototype.executeCommand = function(name, argumentsList) {
if(!(name in commands)) {
console.error("Not supported command name.");
return;
}
var argumentsArray = argumentsList;
if (!argumentsArray)
argumentsArray = [];
sendMessage(this.postis, {method: commands[name], params: argumentsArray});
};
/**
* Executes commands. The available commands are:
* displayName - sets the display name of the local participant to the value
* passed in the arguments array.
* toggleAudio - mutes / unmutes audio. no arguments
* toggleVideo - mutes / unmutes video. no arguments
* filmStrip - hides / shows the film strip. no arguments
* toggleChat - hides / shows chat. no arguments.
* toggleContactList - hides / shows contact list. no arguments.
* toggleShareScreen - starts / stops screen sharing. no arguments.
* @param object the object with commands to be executed. The keys of the
* object are the commands that will be executed and the values are the
* arguments for the command.
*/
JitsiMeetExternalAPI.prototype.executeCommands = function(object) {
for(var key in object)
this.executeCommand(key, object[key]);
};
/**
* Adds event listeners to Meet Jitsi. The object key should be the name of
* the event and value - the listener.
* Currently we support the following
* events:
* incomingMessage - receives event notifications about incoming
* messages. The listener will receive object with the following structure:
* {{
* "from": from,//JID of the user that sent the message
* "nick": nick,//the nickname of the user that sent the message
* "message": txt//the text of the message
* }}
* outgoingMessage - receives event notifications about outgoing
* messages. The listener will receive object with the following structure:
* {{
* "message": txt//the text of the message
* }}
* displayNameChanged - receives event notifications about display name
* change. The listener will receive object with the following structure:
* {{
* jid: jid,//the JID of the participant that changed his display name
* displayname: displayName //the new display name
* }}
* participantJoined - receives event notifications about new participant.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* participantLeft - receives event notifications about the participant that
* left the room.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* video-conference-joined - receives event notifications about the local user
* has successfully joined the video conference.
* The listener will receive object with the following structure:
* {{
* roomName: room //the room name of the conference
* }}
* video-conference-left - receives event notifications about the local user
* has left the video conference.
* The listener will receive object with the following structure:
* {{
* roomName: room //the room name of the conference
* }}
* @param object
*/
JitsiMeetExternalAPI.prototype.addEventListeners = function(object) {
for(var i in object)
this.addEventListener(i, object[i]);
};
/**
* Adds event listeners to Meet Jitsi. Currently we support the following
* events:
* incomingMessage - receives event notifications about incoming
* messages. The listener will receive object with the following structure:
* {{
* "from": from,//JID of the user that sent the message
* "nick": nick,//the nickname of the user that sent the message
* "message": txt//the text of the message
* }}
* outgoingMessage - receives event notifications about outgoing
* messages. The listener will receive object with the following structure:
* {{
* "message": txt//the text of the message
* }}
* displayNameChanged - receives event notifications about display name
* change. The listener will receive object with the following structure:
* {{
* jid: jid,//the JID of the participant that changed his display name
* displayname: displayName //the new display name
* }}
* participantJoined - receives event notifications about new participant.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* participantLeft - receives event notifications about participant the that
* left the room.
* The listener will receive object with the following structure:
* {{
* jid: jid //the jid of the participant
* }}
* video-conference-joined - receives event notifications fired when the local
* user has joined the video conference.
* The listener will receive object with the following structure:
* {{
* roomName: room //the room name of the conference
* }}
* video-conference-left - receives event notifications fired when the local
* user has joined the video conference.
* The listener will receive object with the following structure:
* {{
* roomName: room //the room name of the conference
* }}
* @param event the name of the event
* @param listener the listener
*/
JitsiMeetExternalAPI.prototype.addEventListener = function(event, listener) {
if(!(event in events)) {
console.error("Not supported event name.");
return;
}
// We cannot remove listeners from postis that's why we are handling the
// callback that way.
if(!(event in this.eventHandlers))
this.postis.listen(events[event], function(data) {
if((event in this.eventHandlers) &&
typeof this.eventHandlers[event] === "function")
this.eventHandlers[event].call(null, data);
}.bind(this));
this.eventHandlers[event] = listener;
changeEventStatus(this.postis, event, true);
};
/**
* Removes event listener.
* @param event the name of the event.
*/
JitsiMeetExternalAPI.prototype.removeEventListener = function(event) {
if(!(event in this.eventHandlers))
{
console.error("The event " + event + " is not registered.");
return;
}
delete this.eventHandlers[event];
changeEventStatus(this.postis, event, false);
};
/**
* Removes event listeners.
* @param events array with the names of the events.
*/
JitsiMeetExternalAPI.prototype.removeEventListeners = function(events) {
var eventsArray = [];
for(var i = 0; i < events.length; i++)
this.removeEventListener(events[i]);
};
/**
* Removes the listeners and removes the Jitsi Meet frame.
*/
JitsiMeetExternalAPI.prototype.dispose = function() {
this.postis.dispose();
var frame = document.getElementById(this.frameName);
if(frame)
frame.src = 'about:blank';
var self = this;
window.setTimeout(function () {
self.iframeHolder.removeChild(self.frame);
self.iframeHolder.parentNode.removeChild(self.iframeHolder);
}, 10);
};
module.exports = JitsiMeetExternalAPI;

View File

@ -72,7 +72,8 @@ class TokenData{
//External API settings
this.externalAPISettings = {
enablePostis: true
forceEnable: true,
enabledEvents: ["video-conference-joined", "video-conference-left"]
};
this._decode();
// Use JWT param as token if there is not other token set and if the