You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

external_api.js 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  1. import EventEmitter from 'events';
  2. import postisInit from 'postis';
  3. const logger = require('jitsi-meet-logger').getLogger(__filename);
  4. /**
  5. * Maps the names of the commands expected by the API with the name of the
  6. * commands expected by jitsi-meet
  7. */
  8. const commands = {
  9. avatarUrl: 'avatar-url',
  10. displayName: 'display-name',
  11. email: 'email',
  12. hangup: 'video-hangup',
  13. toggleAudio: 'toggle-audio',
  14. toggleChat: 'toggle-chat',
  15. toggleContactList: 'toggle-contact-list',
  16. toggleFilmStrip: 'toggle-film-strip',
  17. toggleShareScreen: 'toggle-share-screen',
  18. toggleVideo: 'toggle-video'
  19. };
  20. /**
  21. * Maps the names of the events expected by the API with the name of the
  22. * events expected by jitsi-meet
  23. */
  24. const events = {
  25. displayNameChange: 'display-name-change',
  26. incomingMessage: 'incoming-message',
  27. outgoingMessage: 'outgoing-message',
  28. participantJoined: 'participant-joined',
  29. participantLeft: 'participant-left',
  30. readyToClose: 'video-ready-to-close',
  31. videoConferenceJoined: 'video-conference-joined',
  32. videoConferenceLeft: 'video-conference-left'
  33. };
  34. /**
  35. * Last id of api object
  36. * @type {number}
  37. */
  38. let id = 0;
  39. /**
  40. * The minimum height for the Jitsi Meet frame
  41. * @type {number}
  42. */
  43. const MIN_HEIGHT = 300;
  44. /**
  45. * The minimum width for the Jitsi Meet frame
  46. * @type {number}
  47. */
  48. const MIN_WIDTH = 790;
  49. /**
  50. * Adds given number to the numberOfParticipants property of given APIInstance.
  51. *
  52. * @param {JitsiMeetExternalAPI} APIInstance - The instance of the API.
  53. * @param {int} number - The number of participants to be added to
  54. * numberOfParticipants property (this parameter can be negative number if the
  55. * numberOfParticipants should be decreased).
  56. * @returns {void}
  57. */
  58. function changeParticipantNumber(APIInstance, number) {
  59. APIInstance.numberOfParticipants += number;
  60. }
  61. /**
  62. * Generates array with URL params based on the passed config object that will
  63. * be used for the Jitsi Meet URL generation.
  64. *
  65. * @param {Object} config - The config object.
  66. * @returns {Array<string>} The array with URL param strings.
  67. */
  68. function configToURLParamsArray(config = {}) {
  69. const params = [];
  70. for (const key in config) { // eslint-disable-line guard-for-in
  71. try {
  72. params.push(`${key}=${
  73. encodeURIComponent(JSON.stringify(config[key]))}`);
  74. } catch (e) {
  75. console.warn(`Error encoding ${key}: ${e}`);
  76. }
  77. }
  78. return params;
  79. }
  80. /**
  81. * Generates the URL for the iframe.
  82. *
  83. * @param {string} domain - The domain name of the server that hosts the
  84. * conference.
  85. * @param {string} [options] - Another optional parameters.
  86. * @param {Object} [options.configOverwrite] - Object containing configuration
  87. * options defined in config.js to be overridden.
  88. * @param {Object} [options.interfaceConfigOverwrite] - Object containing
  89. * configuration options defined in interface_config.js to be overridden.
  90. * @param {string} [options.jwt] - The JWT token if needed by jitsi-meet for
  91. * authentication.
  92. * @param {boolean} [options.noSsl] - If the value is true https won't be used.
  93. * @param {string} [options.roomName] - The name of the room to join.
  94. * @returns {string} The URL.
  95. */
  96. function generateURL(domain, options = {}) {
  97. const {
  98. configOverwrite,
  99. interfaceConfigOverwrite,
  100. jwt,
  101. noSSL,
  102. roomName
  103. } = options;
  104. let url = `${noSSL ? 'http' : 'https'}://${domain}/${roomName || ''}`;
  105. if (jwt) {
  106. url += `?jwt=${jwt}`;
  107. }
  108. url += `#jitsi_meet_external_api_id=${id}`;
  109. const configURLParams = configToURLParamsArray(configOverwrite);
  110. if (configURLParams.length) {
  111. url += `&config.${configURLParams.join('&config.')}`;
  112. }
  113. const interfaceConfigURLParams
  114. = configToURLParamsArray(interfaceConfigOverwrite);
  115. if (interfaceConfigURLParams.length) {
  116. url += `&interfaceConfig.${
  117. interfaceConfigURLParams.join('&interfaceConfig.')}`;
  118. }
  119. return url;
  120. }
  121. /**
  122. * The IFrame API interface class.
  123. */
  124. class JitsiMeetExternalAPI extends EventEmitter {
  125. /**
  126. * Constructs new API instance. Creates iframe and loads Jitsi Meet in it.
  127. *
  128. * @param {string} domain - The domain name of the server that hosts the
  129. * conference.
  130. * @param {string} [roomName] - The name of the room to join.
  131. * @param {number} [width] - Width of the iframe.
  132. * @param {number} [height] - Height of the iframe.
  133. * @param {DOMElement} [parentNode] - The node that will contain the
  134. * iframe.
  135. * @param {Object} [configOverwrite] - Object containing configuration
  136. * options defined in config.js to be overridden.
  137. * @param {Object} [interfaceConfigOverwrite] - Object containing
  138. * configuration options defined in interface_config.js to be overridden.
  139. * @param {boolean} [noSSL] - If the value is true https won't be used.
  140. * @param {string} [jwt] - The JWT token if needed by jitsi-meet for
  141. * authentication.
  142. */
  143. constructor(domain, // eslint-disable-line max-params
  144. roomName = '',
  145. width = MIN_WIDTH,
  146. height = MIN_HEIGHT,
  147. parentNode = document.body,
  148. configOverwrite = {},
  149. interfaceConfigOverwrite = {},
  150. noSSL = false,
  151. jwt = undefined) {
  152. super();
  153. this.parentNode = parentNode;
  154. this.url = generateURL(domain, {
  155. configOverwrite,
  156. interfaceConfigOverwrite,
  157. jwt,
  158. noSSL,
  159. roomName
  160. });
  161. this._createIFrame(Math.max(height, MIN_HEIGHT),
  162. Math.max(width, MIN_WIDTH));
  163. this.postis = postisInit({
  164. scope: `jitsi_meet_external_api_${id}`,
  165. window: this.frame.contentWindow
  166. });
  167. this.numberOfParticipants = 1;
  168. this._setupListeners();
  169. id++;
  170. }
  171. /**
  172. * Creates the iframe element.
  173. *
  174. * @param {number} height - The height of the iframe.
  175. * @param {number} width - The with of the iframe.
  176. * @returns {void}
  177. *
  178. * @private
  179. */
  180. _createIFrame(height, width) {
  181. this.iframeHolder
  182. = this.parentNode.appendChild(document.createElement('div'));
  183. this.iframeHolder.id = `jitsiConference${id}`;
  184. this.iframeHolder.style.width = `${width}px`;
  185. this.iframeHolder.style.height = `${height}px`;
  186. this.frameName = `jitsiConferenceFrame${id}`;
  187. this.frame = document.createElement('iframe');
  188. this.frame.src = this.url;
  189. this.frame.name = this.frameName;
  190. this.frame.id = this.frameName;
  191. this.frame.width = '100%';
  192. this.frame.height = '100%';
  193. this.frame.setAttribute('allowFullScreen', 'true');
  194. this.frame = this.iframeHolder.appendChild(this.frame);
  195. }
  196. /**
  197. * Setups listeners that are used internally for JitsiMeetExternalAPI.
  198. *
  199. * @returns {void}
  200. *
  201. * @private
  202. */
  203. _setupListeners() {
  204. this.postis.listen('participant-joined',
  205. changeParticipantNumber.bind(null, this, 1));
  206. this.postis.listen('participant-left',
  207. changeParticipantNumber.bind(null, this, -1));
  208. for (const eventName in events) { // eslint-disable-line guard-for-in
  209. const postisMethod = events[eventName];
  210. this.postis.listen(postisMethod,
  211. (...args) => this.emit(eventName, ...args));
  212. }
  213. }
  214. /**
  215. * Adds event listener to Meet Jitsi.
  216. *
  217. * @param {string} event - The name of the event.
  218. * @param {Function} listener - The listener.
  219. * @returns {void}
  220. *
  221. * @deprecated
  222. * NOTE: This method is not removed for backward comatability purposes.
  223. */
  224. addEventListener(event, listener) {
  225. this.on(event, listener);
  226. }
  227. /**
  228. * Adds event listeners to Meet Jitsi.
  229. *
  230. * @param {Object} listeners - The object key should be the name of
  231. * the event and value - the listener.
  232. * Currently we support the following
  233. * events:
  234. * incomingMessage - receives event notifications about incoming
  235. * messages. The listener will receive object with the following structure:
  236. * {{
  237. * 'from': from,//JID of the user that sent the message
  238. * 'nick': nick,//the nickname of the user that sent the message
  239. * 'message': txt//the text of the message
  240. * }}
  241. * outgoingMessage - receives event notifications about outgoing
  242. * messages. The listener will receive object with the following structure:
  243. * {{
  244. * 'message': txt//the text of the message
  245. * }}
  246. * displayNameChanged - receives event notifications about display name
  247. * change. The listener will receive object with the following structure:
  248. * {{
  249. * jid: jid,//the JID of the participant that changed his display name
  250. * displayname: displayName //the new display name
  251. * }}
  252. * participantJoined - receives event notifications about new participant.
  253. * The listener will receive object with the following structure:
  254. * {{
  255. * jid: jid //the jid of the participant
  256. * }}
  257. * participantLeft - receives event notifications about the participant that
  258. * left the room.
  259. * The listener will receive object with the following structure:
  260. * {{
  261. * jid: jid //the jid of the participant
  262. * }}
  263. * video-conference-joined - receives event notifications about the local
  264. * user has successfully joined the video conference.
  265. * The listener will receive object with the following structure:
  266. * {{
  267. * roomName: room //the room name of the conference
  268. * }}
  269. * video-conference-left - receives event notifications about the local user
  270. * has left the video conference.
  271. * The listener will receive object with the following structure:
  272. * {{
  273. * roomName: room //the room name of the conference
  274. * }}
  275. * readyToClose - all hangup operations are completed and Jitsi Meet is
  276. * ready to be disposed.
  277. * @returns {void}
  278. *
  279. * @deprecated
  280. * NOTE: This method is not removed for backward comatability purposes.
  281. */
  282. addEventListeners(listeners) {
  283. for (const event in listeners) { // eslint-disable-line guard-for-in
  284. this.addEventListener(event, listeners[event]);
  285. }
  286. }
  287. /**
  288. * Removes the listeners and removes the Jitsi Meet frame.
  289. *
  290. * @returns {void}
  291. */
  292. dispose() {
  293. const frame = document.getElementById(this.frameName);
  294. this.postis.destroy();
  295. if (frame) {
  296. frame.src = 'about:blank';
  297. }
  298. window.setTimeout(() => {
  299. this.iframeHolder.removeChild(this.frame);
  300. this.iframeHolder.parentNode.removeChild(this.iframeHolder);
  301. }, 10);
  302. }
  303. /**
  304. * Executes command. The available commands are:
  305. * displayName - sets the display name of the local participant to the value
  306. * passed in the arguments array.
  307. * toggleAudio - mutes / unmutes audio with no arguments.
  308. * toggleVideo - mutes / unmutes video with no arguments.
  309. * filmStrip - hides / shows the film strip with no arguments.
  310. * If the command doesn't require any arguments the parameter should be set
  311. * to empty array or it may be omitted.
  312. *
  313. * @param {string} name - The name of the command.
  314. * @returns {void}
  315. */
  316. executeCommand(name, ...args) {
  317. if (!(name in commands)) {
  318. logger.error('Not supported command name.');
  319. return;
  320. }
  321. this.postis.send({
  322. method: commands[name],
  323. params: args
  324. });
  325. }
  326. /**
  327. * Executes commands. The available commands are:
  328. * displayName - sets the display name of the local participant to the value
  329. * passed in the arguments array.
  330. * toggleAudio - mutes / unmutes audio. no arguments
  331. * toggleVideo - mutes / unmutes video. no arguments
  332. * filmStrip - hides / shows the film strip. no arguments
  333. * toggleChat - hides / shows chat. no arguments.
  334. * toggleContactList - hides / shows contact list. no arguments.
  335. * toggleShareScreen - starts / stops screen sharing. no arguments.
  336. *
  337. * @param {Object} commandList - The object with commands to be executed.
  338. * The keys of the object are the commands that will be executed and the
  339. * values are the arguments for the command.
  340. * @returns {void}
  341. */
  342. executeCommands(commandList) {
  343. for (const key in commandList) { // eslint-disable-line guard-for-in
  344. this.executeCommand(key, commandList[key]);
  345. }
  346. }
  347. /**
  348. * Returns the number of participants in the conference. The local
  349. * participant is included.
  350. *
  351. * @returns {int} The number of participants in the conference.
  352. */
  353. getNumberOfParticipants() {
  354. return this.numberOfParticipants;
  355. }
  356. /**
  357. * Removes event listener.
  358. *
  359. * @param {string} event - The name of the event.
  360. * @returns {void}
  361. *
  362. * @deprecated
  363. * NOTE: This method is not removed for backward comatability purposes.
  364. */
  365. removeEventListener(event) {
  366. this.removeListeners(event);
  367. }
  368. /**
  369. * Removes event listeners.
  370. *
  371. * @param {Array<string>} eventList - Array with the names of the events.
  372. * @returns {void}
  373. *
  374. * @deprecated
  375. * NOTE: This method is not removed for backward comatability purposes.
  376. */
  377. removeEventListeners(eventList) {
  378. eventList.forEach(event => this.removeEventListener(event));
  379. }
  380. }
  381. module.exports = JitsiMeetExternalAPI;