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.

ScreenObtainer.js 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609
  1. /* global chrome, $, alert */
  2. import JitsiTrackError from '../../JitsiTrackError';
  3. import * as JitsiTrackErrors from '../../JitsiTrackErrors';
  4. import browser from '../browser';
  5. const logger = require('jitsi-meet-logger').getLogger(__filename);
  6. const GlobalOnErrorHandler = require('../util/GlobalOnErrorHandler');
  7. /**
  8. * Indicates whether the Chrome desktop sharing extension is installed.
  9. * @type {boolean}
  10. */
  11. let chromeExtInstalled = false;
  12. /**
  13. * Indicates whether an update of the Chrome desktop sharing extension is
  14. * required.
  15. * @type {boolean}
  16. */
  17. let chromeExtUpdateRequired = false;
  18. let gumFunction = null;
  19. /**
  20. * The error message returned by chrome when the extension is installed.
  21. */
  22. const CHROME_NO_EXTENSION_ERROR_MSG // eslint-disable-line no-unused-vars
  23. = 'Could not establish connection. Receiving end does not exist.';
  24. /**
  25. * Handles obtaining a stream from a screen capture on different browsers.
  26. */
  27. const ScreenObtainer = {
  28. /**
  29. * If not <tt>null</tt> it means that the initialization process is still in
  30. * progress. It is used to make desktop stream request wait and continue
  31. * after it's done.
  32. * {@type Promise|null}
  33. */
  34. intChromeExtPromise: null,
  35. obtainStream: null,
  36. /**
  37. * Initializes the function used to obtain a screen capture
  38. * (this.obtainStream).
  39. *
  40. * @param {object} options
  41. * @param {boolean} [options.desktopSharingChromeDisabled]
  42. * @param {boolean} [options.desktopSharingChromeExtId]
  43. * @param {boolean} [options.desktopSharingFirefoxDisabled]
  44. * @param {Function} gum GUM method
  45. */
  46. init(options = {
  47. desktopSharingChromeDisabled: false,
  48. desktopSharingChromeExtId: null,
  49. desktopSharingFirefoxDisabled: false
  50. }, gum) {
  51. this.options = options;
  52. gumFunction = gum;
  53. this.obtainStream = this._createObtainStreamMethod(options);
  54. if (!this.obtainStream) {
  55. logger.info('Desktop sharing disabled');
  56. }
  57. },
  58. /**
  59. * Returns a method which will be used to obtain the screen sharing stream
  60. * (based on the browser type).
  61. *
  62. * @param {object} options passed from {@link init} - check description
  63. * there
  64. * @returns {Function}
  65. * @private
  66. */
  67. _createObtainStreamMethod(options) {
  68. if (browser.isNWJS()) {
  69. return (_, onSuccess, onFailure) => {
  70. window.JitsiMeetNW.obtainDesktopStream(
  71. onSuccess,
  72. (error, constraints) => {
  73. let jitsiError;
  74. // FIXME:
  75. // This is very very dirty fix for recognising that the
  76. // user have clicked the cancel button from the Desktop
  77. // sharing pick window. The proper solution would be to
  78. // detect this in the NWJS application by checking the
  79. // streamId === "". Even better solution would be to
  80. // stop calling GUM from the NWJS app and just pass the
  81. // streamId to lib-jitsi-meet. This way the desktop
  82. // sharing implementation for NWJS and chrome extension
  83. // will be the same and lib-jitsi-meet will be able to
  84. // control the constraints, check the streamId, etc.
  85. //
  86. // I cannot find documentation about "InvalidStateError"
  87. // but this is what we are receiving from GUM when the
  88. // streamId for the desktop sharing is "".
  89. if (error && error.name === 'InvalidStateError') {
  90. jitsiError = new JitsiTrackError(
  91. JitsiTrackErrors.CHROME_EXTENSION_USER_CANCELED
  92. );
  93. } else {
  94. jitsiError = new JitsiTrackError(
  95. error, constraints, [ 'desktop' ]);
  96. }
  97. (typeof onFailure === 'function')
  98. && onFailure(jitsiError);
  99. });
  100. };
  101. } else if (browser.isElectron()) {
  102. return this.obtainScreenOnElectron;
  103. } else if (browser.isChrome() || browser.isOpera()) {
  104. if (browser.supportsGetDisplayMedia()
  105. && !options.desktopSharingChromeDisabled) {
  106. return this.obtainScreenFromGetDisplayMedia;
  107. } else if (options.desktopSharingChromeDisabled
  108. || !options.desktopSharingChromeExtId) {
  109. return null;
  110. }
  111. logger.info('Using Chrome extension for desktop sharing');
  112. this.intChromeExtPromise
  113. = initChromeExtension(options).then(() => {
  114. this.intChromeExtPromise = null;
  115. });
  116. return this.obtainScreenFromExtension;
  117. } else if (browser.isFirefox()) {
  118. if (options.desktopSharingFirefoxDisabled) {
  119. return null;
  120. } else if (window.location.protocol === 'http:') {
  121. logger.log('Screen sharing is not supported over HTTP. '
  122. + 'Use of HTTPS is required.');
  123. return null;
  124. }
  125. return this.obtainScreenOnFirefox;
  126. } else if (browser.isEdge() && browser.supportsGetDisplayMedia()) {
  127. return this.obtainScreenFromGetDisplayMedia;
  128. }
  129. logger.log(
  130. 'Screen sharing not supported by the current browser: ',
  131. browser.getName());
  132. return null;
  133. },
  134. /**
  135. * Checks whether obtaining a screen capture is supported in the current
  136. * environment.
  137. * @returns {boolean}
  138. */
  139. isSupported() {
  140. return this.obtainStream !== null;
  141. },
  142. /**
  143. * Obtains a screen capture stream on Firefox.
  144. * @param callback
  145. * @param errorCallback
  146. */
  147. obtainScreenOnFirefox(options, callback, errorCallback) {
  148. obtainWebRTCScreen(options.gumOptions, callback, errorCallback);
  149. },
  150. /**
  151. * Obtains a screen capture stream on Electron.
  152. *
  153. * @param {Object} [options] - Screen sharing options.
  154. * @param {Array<string>} [options.desktopSharingSources] - Array with the
  155. * sources that have to be displayed in the desktop picker window ('screen',
  156. * 'window', etc.).
  157. * @param onSuccess - Success callback.
  158. * @param onFailure - Failure callback.
  159. */
  160. obtainScreenOnElectron(options = {}, onSuccess, onFailure) {
  161. if (window.JitsiMeetScreenObtainer
  162. && window.JitsiMeetScreenObtainer.openDesktopPicker) {
  163. const { desktopSharingSources, gumOptions } = options;
  164. window.JitsiMeetScreenObtainer.openDesktopPicker(
  165. {
  166. desktopSharingSources: desktopSharingSources
  167. || this.options.desktopSharingChromeSources
  168. },
  169. (streamId, streamType) =>
  170. onGetStreamResponse(
  171. {
  172. response: {
  173. streamId,
  174. streamType
  175. },
  176. gumOptions
  177. },
  178. onSuccess,
  179. onFailure
  180. ),
  181. err => onFailure(new JitsiTrackError(
  182. JitsiTrackErrors.ELECTRON_DESKTOP_PICKER_ERROR,
  183. err
  184. ))
  185. );
  186. } else {
  187. onFailure(new JitsiTrackError(
  188. JitsiTrackErrors.ELECTRON_DESKTOP_PICKER_NOT_FOUND));
  189. }
  190. },
  191. /**
  192. * Asks Chrome extension to call chooseDesktopMedia and gets chrome
  193. * 'desktop' stream for returned stream token.
  194. */
  195. obtainScreenFromExtension(options, streamCallback, failCallback) {
  196. if (this.intChromeExtPromise !== null) {
  197. this.intChromeExtPromise.then(() => {
  198. this.obtainScreenFromExtension(
  199. options, streamCallback, failCallback);
  200. });
  201. return;
  202. }
  203. const {
  204. desktopSharingChromeExtId,
  205. desktopSharingChromeSources
  206. } = this.options;
  207. const {
  208. gumOptions
  209. } = options;
  210. const doGetStreamFromExtensionOptions = {
  211. desktopSharingChromeExtId,
  212. desktopSharingChromeSources:
  213. options.desktopSharingSources || desktopSharingChromeSources,
  214. gumOptions
  215. };
  216. if (chromeExtInstalled) {
  217. doGetStreamFromExtension(
  218. doGetStreamFromExtensionOptions,
  219. streamCallback,
  220. failCallback);
  221. } else {
  222. if (chromeExtUpdateRequired) {
  223. /* eslint-disable no-alert */
  224. alert(
  225. 'Jitsi Desktop Streamer requires update. '
  226. + 'Changes will take effect after next Chrome restart.');
  227. /* eslint-enable no-alert */
  228. }
  229. this.handleExternalInstall(options, streamCallback,
  230. failCallback);
  231. }
  232. },
  233. /* eslint-disable max-params */
  234. handleExternalInstall(options, streamCallback, failCallback, e) {
  235. const webStoreInstallUrl = getWebStoreInstallUrl(this.options);
  236. options.listener('waitingForExtension', webStoreInstallUrl);
  237. this.checkForChromeExtensionOnInterval(options, streamCallback,
  238. failCallback, e);
  239. },
  240. /* eslint-enable max-params */
  241. checkForChromeExtensionOnInterval(options, streamCallback, failCallback) {
  242. if (options.checkAgain() === false) {
  243. failCallback(new JitsiTrackError(
  244. JitsiTrackErrors.CHROME_EXTENSION_INSTALLATION_ERROR));
  245. return;
  246. }
  247. waitForExtensionAfterInstall(this.options, options.interval, 1)
  248. .then(() => {
  249. chromeExtInstalled = true;
  250. options.listener('extensionFound');
  251. this.obtainScreenFromExtension(options,
  252. streamCallback, failCallback);
  253. })
  254. .catch(() => {
  255. this.checkForChromeExtensionOnInterval(options,
  256. streamCallback, failCallback);
  257. });
  258. },
  259. /**
  260. * Obtains a screen capture stream using getDisplayMedia.
  261. *
  262. * @param callback - The success callback.
  263. * @param errorCallback - The error callback.
  264. */
  265. obtainScreenFromGetDisplayMedia(options, callback, errorCallback) {
  266. navigator.mediaDevices.getDisplayMedia({ video: true })
  267. .then(stream => {
  268. let applyConstraintsPromise;
  269. if (stream
  270. && stream.getTracks()
  271. && stream.getTracks().length > 0) {
  272. applyConstraintsPromise = stream.getTracks()[0]
  273. .applyConstraints(options.trackOptions);
  274. } else {
  275. applyConstraintsPromise = Promise.resolve();
  276. }
  277. applyConstraintsPromise.then(() =>
  278. callback({
  279. stream,
  280. sourceId: stream.id
  281. }));
  282. })
  283. .catch(() =>
  284. errorCallback(new JitsiTrackError(JitsiTrackErrors
  285. .CHROME_EXTENSION_USER_CANCELED)));
  286. }
  287. };
  288. /**
  289. * Obtains a desktop stream using getUserMedia.
  290. * For this to work on Chrome, the
  291. * 'chrome://flags/#enable-usermedia-screen-capture' flag must be enabled.
  292. *
  293. * On firefox, the document's domain must be white-listed in the
  294. * 'media.getusermedia.screensharing.allowed_domains' preference in
  295. * 'about:config'.
  296. */
  297. function obtainWebRTCScreen(options, streamCallback, failCallback) {
  298. gumFunction([ 'screen' ], options)
  299. .then(stream => streamCallback({ stream }), failCallback);
  300. }
  301. /**
  302. * Constructs inline install URL for Chrome desktop streaming extension.
  303. * The 'chromeExtensionId' must be defined in options parameter.
  304. * @param options supports "desktopSharingChromeExtId"
  305. * @returns {string}
  306. */
  307. function getWebStoreInstallUrl(options) {
  308. return (
  309. `https://chrome.google.com/webstore/detail/${
  310. options.desktopSharingChromeExtId}`);
  311. }
  312. /**
  313. * Checks whether an update of the Chrome extension is required.
  314. * @param minVersion minimal required version
  315. * @param extVersion current extension version
  316. * @returns {boolean}
  317. */
  318. function isUpdateRequired(minVersion, extVersion) {
  319. try {
  320. const s1 = minVersion.split('.');
  321. const s2 = extVersion.split('.');
  322. const len = Math.max(s1.length, s2.length);
  323. for (let i = 0; i < len; i++) {
  324. let n1 = 0,
  325. n2 = 0;
  326. if (i < s1.length) {
  327. n1 = parseInt(s1[i], 10);
  328. }
  329. if (i < s2.length) {
  330. n2 = parseInt(s2[i], 10);
  331. }
  332. if (isNaN(n1) || isNaN(n2)) {
  333. return true;
  334. } else if (n1 !== n2) {
  335. return n1 > n2;
  336. }
  337. }
  338. // will happen if both versions have identical numbers in
  339. // their components (even if one of them is longer, has more components)
  340. return false;
  341. } catch (e) {
  342. GlobalOnErrorHandler.callErrorHandler(e);
  343. logger.error('Failed to parse extension version', e);
  344. return true;
  345. }
  346. }
  347. /**
  348. *
  349. * @param callback
  350. * @param options
  351. */
  352. function checkChromeExtInstalled(callback, options) {
  353. if (typeof chrome === 'undefined' || !chrome || !chrome.runtime) {
  354. // No API, so no extension for sure
  355. callback(false, false);
  356. return;
  357. }
  358. chrome.runtime.sendMessage(
  359. options.desktopSharingChromeExtId,
  360. { getVersion: true },
  361. response => {
  362. if (!response || !response.version) {
  363. // Communication failure - assume that no endpoint exists
  364. logger.warn(
  365. 'Extension not installed?: ', chrome.runtime.lastError);
  366. callback(false, false);
  367. return;
  368. }
  369. // Check installed extension version
  370. const extVersion = response.version;
  371. logger.log(`Extension version is: ${extVersion}`);
  372. const updateRequired
  373. = isUpdateRequired(
  374. options.desktopSharingChromeMinExtVersion,
  375. extVersion);
  376. callback(!updateRequired, updateRequired);
  377. }
  378. );
  379. }
  380. /**
  381. *
  382. * @param options
  383. * @param streamCallback
  384. * @param failCallback
  385. */
  386. function doGetStreamFromExtension(options, streamCallback, failCallback) {
  387. const {
  388. desktopSharingChromeSources,
  389. desktopSharingChromeExtId,
  390. gumOptions
  391. } = options;
  392. // Sends 'getStream' msg to the extension.
  393. // Extension id must be defined in the config.
  394. chrome.runtime.sendMessage(
  395. desktopSharingChromeExtId,
  396. {
  397. getStream: true,
  398. sources: desktopSharingChromeSources
  399. },
  400. response => {
  401. if (!response) {
  402. // possibly re-wraping error message to make code consistent
  403. const lastError = chrome.runtime.lastError;
  404. failCallback(lastError instanceof Error
  405. ? lastError
  406. : new JitsiTrackError(
  407. JitsiTrackErrors.CHROME_EXTENSION_GENERIC_ERROR,
  408. lastError));
  409. return;
  410. }
  411. logger.log('Response from extension: ', response);
  412. onGetStreamResponse(
  413. {
  414. response,
  415. gumOptions
  416. },
  417. streamCallback,
  418. failCallback
  419. );
  420. }
  421. );
  422. }
  423. /**
  424. * Initializes <link rel=chrome-webstore-item /> with extension id set in
  425. * config.js to support inline installs. Host site must be selected as main
  426. * website of published extension.
  427. * @param options supports "desktopSharingChromeExtId"
  428. */
  429. function initInlineInstalls(options) {
  430. if ($('link[rel=chrome-webstore-item]').length === 0) {
  431. $('head').append('<link rel="chrome-webstore-item">');
  432. }
  433. $('link[rel=chrome-webstore-item]').attr('href',
  434. getWebStoreInstallUrl(options));
  435. }
  436. /**
  437. *
  438. * @param options
  439. *
  440. * @return {Promise} - a Promise resolved once the initialization process is
  441. * finished.
  442. */
  443. function initChromeExtension(options) {
  444. // Initialize Chrome extension inline installs
  445. initInlineInstalls(options);
  446. return new Promise(resolve => {
  447. // Check if extension is installed
  448. checkChromeExtInstalled((installed, updateRequired) => {
  449. chromeExtInstalled = installed;
  450. chromeExtUpdateRequired = updateRequired;
  451. logger.info(
  452. `Chrome extension installed: ${
  453. chromeExtInstalled} updateRequired: ${
  454. chromeExtUpdateRequired}`);
  455. resolve();
  456. }, options);
  457. });
  458. }
  459. /**
  460. * Checks "retries" times on every "waitInterval"ms whether the ext is alive.
  461. * @param {Object} options the options passed to ScreanObtainer.obtainStream
  462. * @param {int} waitInterval the number of ms between retries
  463. * @param {int} retries the number of retries
  464. * @returns {Promise} returns promise that will be resolved when the extension
  465. * is alive and rejected if the extension is not alive even after "retries"
  466. * checks
  467. */
  468. function waitForExtensionAfterInstall(options, waitInterval, retries) {
  469. if (retries === 0) {
  470. return Promise.reject();
  471. }
  472. return new Promise((resolve, reject) => {
  473. let currentRetries = retries;
  474. const interval = window.setInterval(() => {
  475. checkChromeExtInstalled(installed => {
  476. if (installed) {
  477. window.clearInterval(interval);
  478. resolve();
  479. } else {
  480. currentRetries--;
  481. if (currentRetries === 0) {
  482. reject();
  483. window.clearInterval(interval);
  484. }
  485. }
  486. }, options);
  487. }, waitInterval);
  488. });
  489. }
  490. /**
  491. * Handles response from external application / extension and calls GUM to
  492. * receive the desktop streams or reports error.
  493. * @param {object} options
  494. * @param {object} options.response
  495. * @param {string} options.response.streamId - the streamId for the desktop
  496. * stream.
  497. * @param {string} options.response.error - error to be reported.
  498. * @param {object} options.gumOptions - options passed to GUM.
  499. * @param {Function} onSuccess - callback for success.
  500. * @param {Function} onFailure - callback for failure.
  501. * @param {object} gumOptions - options passed to GUM.
  502. */
  503. function onGetStreamResponse(
  504. options = {
  505. response: {},
  506. gumOptions: {}
  507. },
  508. onSuccess,
  509. onFailure) {
  510. const { streamId, streamType, error } = options.response || {};
  511. if (streamId) {
  512. const gumOptions = {
  513. desktopStream: streamId,
  514. ...options.gumOptions
  515. };
  516. gumFunction([ 'desktop' ], gumOptions)
  517. .then(stream => onSuccess({
  518. stream,
  519. sourceId: streamId,
  520. sourceType: streamType
  521. }), onFailure);
  522. } else {
  523. // As noted in Chrome Desktop Capture API:
  524. // If user didn't select any source (i.e. canceled the prompt)
  525. // then the callback is called with an empty streamId.
  526. if (streamId === '') {
  527. onFailure(new JitsiTrackError(
  528. JitsiTrackErrors.CHROME_EXTENSION_USER_CANCELED));
  529. return;
  530. }
  531. onFailure(new JitsiTrackError(
  532. JitsiTrackErrors.CHROME_EXTENSION_GENERIC_ERROR,
  533. error));
  534. }
  535. }
  536. export default ScreenObtainer;