@webex/plugin-meetings 3.0.0-beta.3 → 3.0.0-beta.30

package/src/media/{index.js → index.ts}

@@ -3,19 +3,14 @@
  */
 /* globals navigator */
 
+import {RoapMediaConnection, MultistreamRoapMediaConnection} from '@webex/internal-media-core';
 import LoggerProxy from '../common/logs/logger-proxy';
-import {
-  AUDIO_INPUT,
-  VIDEO_INPUT,
-  MEDIA_TRACK_CONSTRAINT,
-} from '../constants';
+import {AUDIO_INPUT, VIDEO_INPUT, MEDIA_TRACK_CONSTRAINT} from '../constants';
 import Config from '../config';
 import StaticConfig from '../common/config';
 import MediaError from '../common/errors/media';
 import BrowserDetection from '../common/browser-detection';
 
-import {RoapMediaConnection, MultistreamRoapMediaConnection} from './internal-media-core-wrapper';
-
 const {isBrowser} = BrowserDetection();
 
 /**
@@ -46,7 +41,7 @@ const {isBrowser} = BrowserDetection();
  * Handles the quirks of each browser.
  * Extends and enhances adapter.js, i.e., the "media" file from the web client.
  */
-const Media = {};
+const Media: any = {};
 
 /**
  * @param {boolean} enabled
@@ -54,7 +49,7 @@ const Media = {};
  * @returns {Boolean}
  * @public
  */
-Media.setLocalTrack = (enabled, track) => {
+Media.setLocalTrack = (enabled: boolean, track: MediaStreamTrack) => {
   if (track) {
     track.enabled = enabled;
 
@@ -71,16 +66,16 @@ Media.setLocalTrack = (enabled, track) => {
  * @param {Boolean} videoMuted
  * @returns {Array} medias
  */
-Media.generateLocalMedias = (mediaId, audioMuted, videoMuted) => {
+Media.generateLocalMedias = (mediaId: string, audioMuted: boolean, videoMuted: boolean) => {
   if (mediaId) {
     return [
       {
         localSdp: JSON.stringify({
           audioMuted,
-          videoMuted
+          videoMuted,
         }),
-        mediaId
-      }
+        mediaId,
+      },
     ];
   }
 
@@ -93,10 +88,8 @@ Media.generateLocalMedias = (mediaId, audioMuted, videoMuted) => {
  * @param {Object} config SDK Configuration for meetings plugin
  * @returns {Promise}
  */
-Media.getLocalMedia = (options, config) => {
-  const {
-    sendAudio, sendVideo, sendShare, sharePreferences, isSharing
-  } = options;
+Media.getLocalMedia = (options: any, config: object) => {
+  const {sendAudio, sendVideo, sendShare, sharePreferences, isSharing} = options;
 
   if (sendAudio || sendVideo) {
     return Media.getMedia(sendAudio, sendVideo, config);
@@ -107,7 +100,7 @@ Media.getLocalMedia = (options, config) => {
       {
         sendAudio: false,
         sendShare: true,
-        sharePreferences
+        sharePreferences,
       },
       config
     );
@@ -118,29 +111,43 @@ Media.getLocalMedia = (options, config) => {
 
 /**
  * creates a webrtc media connection with provided tracks and mediaDirection configuration
- * @param {Object} mediaProperties only applicable to non-multistream connections, contains mediaDirection and local tracks:
- *                                 audioTrack, videoTrack and shareTrack
+ *
+ * @param {boolean} isMultistream
+ * @param {string} debugId string useful for debugging (will appear in media connection logs)
  * @param {Object} options
- * @param {boolean} options.isMultistream
+ * @param {Object} [options.mediaProperties] only applicable to non-multistream connections, contains mediaDirection and local tracks:
+ *                                 audioTrack, videoTrack and shareTrack
  * @param {string} [options.remoteQualityLevel] LOW|MEDIUM|HIGH applicable only to non-multistream connections
  * @param {boolean} [options.enableRtx] applicable only to non-multistream connections
  * @param {boolean} [options.enableExtmap] applicable only to non-multistream connections
  * @param {Object} [options.turnServerInfo]
  * @returns {RoapMediaConnection}
  */
-Media.createMediaConnection = (mediaProperties, {
-  isMultistream,
-  remoteQualityLevel,
-  enableRtx,
-  enableExtmap,
-  turnServerInfo
-}) => {
-  const {
-    mediaDirection,
-    audioTrack,
-    videoTrack,
-    shareTrack
-  } = mediaProperties;
+Media.createMediaConnection = (
+  isMultistream: boolean,
+  debugId: string,
+  options: {
+    mediaProperties?: {
+      mediaDirection?: {
+        receiveAudio: boolean;
+        receiveVideo: boolean;
+        receiveShare: boolean;
+      };
+      audioTrack?: MediaStreamTrack;
+      videoTrack?: MediaStreamTrack;
+      shareTrack?: MediaStreamTrack;
+    };
+    remoteQualityLevel?: 'LOW' | 'MEDIUM' | 'HIGH';
+    enableRtx?: boolean;
+    enableExtmap?: boolean;
+    turnServerInfo?: {
+      url: string;
+      username: string;
+      password: string;
+    };
+  }
+) => {
+  const {mediaProperties, remoteQualityLevel, enableRtx, enableExtmap, turnServerInfo} = options;
 
   const iceServers = [];
 
@@ -148,45 +155,58 @@ Media.createMediaConnection = (mediaProperties, {
     iceServers.push({
       urls: turnServerInfo.url,
       username: turnServerInfo.username || '',
-      credential: turnServerInfo.password || ''
+      credential: turnServerInfo.password || '',
     });
   }
 
   if (isMultistream) {
-    return new MultistreamRoapMediaConnection({
-      iceServers,
-    }, 'mc');
+    return new MultistreamRoapMediaConnection(
+      {
+        iceServers,
+      },
+      debugId
+    );
   }
 
-  return new RoapMediaConnection({
-    iceServers,
-    skipInactiveTransceivers: false,
-    requireH264: true,
-    sdpMunging: {
-      convertPort9to0: false,
-      addContentSlides: true,
-      bandwidthLimits: {
-        audio: StaticConfig.meetings.bandwidth.audio,
-        video: StaticConfig.meetings.bandwidth.video,
+  if (!mediaProperties) {
+    throw new Error('mediaProperties have to be provided for non-multistream media connections');
+  }
+
+  const {mediaDirection, audioTrack, videoTrack, shareTrack} = mediaProperties;
+
+  return new RoapMediaConnection(
+    {
+      iceServers,
+      skipInactiveTransceivers: false,
+      requireH264: true,
+      sdpMunging: {
+        convertPort9to0: false,
+        addContentSlides: true,
+        bandwidthLimits: {
+          audio: StaticConfig.meetings.bandwidth.audio,
+          video: StaticConfig.meetings.bandwidth.video,
+        },
+        startBitrate: StaticConfig.meetings.bandwidth.startBitrate,
+        periodicKeyframes: 20, // it's always been hardcoded in SDK so for now keeping it that way
+        disableExtmap: !enableExtmap,
+        disableRtx: !enableRtx, // see https://bugs.chromium.org/p/chromium/issues/detail?id=1020642 why we might want to remove RTX from SDP
       },
-      startBitrate: StaticConfig.meetings.bandwidth.startBitrate,
-      periodicKeyframes: 20, // it's always been hardcoded in SDK so for now keeping it that way
-      disableExtmap: !enableExtmap,
-      disableRtx: !enableRtx, // see https://bugs.chromium.org/p/chromium/issues/detail?id=1020642 why we might want to remove RTX from SDP
-    }
-  }, {
-    send: {
-      audio: audioTrack,
-      video: videoTrack,
-      screenShareVideo: shareTrack
     },
-    receive: {
-      audio: mediaDirection.receiveAudio,
-      video: mediaDirection.receiveVideo,
-      screenShareVideo: mediaDirection.receiveShare,
-      remoteQualityLevel
-    }
-  }, 'mc');
+    {
+      send: {
+        audio: audioTrack,
+        video: videoTrack,
+        screenShareVideo: shareTrack,
+      },
+      receive: {
+        audio: mediaDirection.receiveAudio,
+        video: mediaDirection.receiveVideo,
+        screenShareVideo: mediaDirection.receiveShare,
+        remoteQualityLevel,
+      },
+    },
+    debugId
+  );
 };
 
 /**
@@ -201,7 +221,17 @@ Media.createMediaConnection = (mediaProperties, {
  * @param {Object} config SDK Configuration for meetings plugin
  * @returns {Promise.<MediaStream>}
  */
-Media.getDisplayMedia = (options, config = {}) => {
+Media.getDisplayMedia = (
+  options: {
+    sendAudio: boolean;
+    sendShare: boolean;
+    sharePreferences: {
+      shareConstraints: MediaTrackConstraints;
+      highFrameRate: any;
+    };
+  },
+  config: any = {}
+) => {
   // SDK screen share resolution settings from Webex.init
   const customResolution = config.screenResolution || {};
   // user defined screen share frame rate
@@ -210,38 +240,31 @@ Media.getDisplayMedia = (options, config = {}) => {
   const hasSharePreferences = options.sharePreferences;
   const hasCustomConstraints = hasSharePreferences && hasSharePreferences.shareConstraints;
   const hasHighFrameRate = hasSharePreferences && hasSharePreferences.highFrameRate;
-  const {
-    screenResolution,
-    resolution,
-    videoShareFrameRate,
-    screenFrameRate,
-    aspectRatio
-  } = Config.meetings;
-
-  let shareConstraints = {
+  const {screenResolution, resolution, videoShareFrameRate, screenFrameRate, aspectRatio} =
+    Config.meetings;
+
+  let shareConstraints: any = {
     cursor: MEDIA_TRACK_CONSTRAINT.CURSOR.AWLAYS,
-    aspectRatio
+    aspectRatio,
   };
 
   if (hasCustomConstraints) {
     shareConstraints = hasSharePreferences.shareConstraints;
-  }
-  else if (hasHighFrameRate) {
+  } else if (hasHighFrameRate) {
     shareConstraints = {
       ...shareConstraints,
       frameRate: videoShareFrameRate,
       height: resolution.idealHeight,
       width: resolution.idealWidth,
-      ...config.resolution
+      ...config.resolution,
     };
-  }
-  else {
+  } else {
     shareConstraints = {
       ...shareConstraints,
       frameRate: customShareFrameRate || screenFrameRate,
       height: customResolution.idealHeight || screenResolution.idealHeight,
       width: customResolution.idealWidth || screenResolution.idealWidth,
-      ...config.screenResolution
+      ...config.screenResolution,
     };
   }
 
@@ -252,15 +275,14 @@ Media.getDisplayMedia = (options, config = {}) => {
   // to have higher quality, and for developers to control the values
   // eventually we may have to add the same functionality to chrome, OR conversely, get to with firefox
 
-
   if (isBrowser('firefox')) {
-    const mediaConfig = {
+    const mediaConfig: any = {
       audio: options.sendAudio,
-      video: options.sendShare
+      video: options.sendShare,
     };
 
-
-    return navigator.mediaDevices.getDisplayMedia({audio: options.sendAudio, video: mediaConfig})
+    return navigator.mediaDevices
+      .getDisplayMedia({audio: options.sendAudio, video: mediaConfig})
       .then((stream) => {
         if (options.sendShare && stream.getVideoTracks().length > 0) {
           // Firefox has a bug with the spec where changing in the height and width only happens
@@ -269,12 +291,11 @@ Media.getDisplayMedia = (options, config = {}) => {
           stream.getVideoTracks()[0].applyConstraints(shareConstraints);
         }
 
-
         return stream;
       });
   }
 
-  const getDisplayMediaParams = {video: options.sendShare ? shareConstraints : false};
+  const getDisplayMediaParams: any = {video: options.sendShare ? shareConstraints : false};
 
   // safari doesn't support sending screen share audio
   // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
@@ -292,37 +313,39 @@ Media.getDisplayMedia = (options, config = {}) => {
  * @param {Object} config SDK Configuration for meetings plugin
  * @returns {Object} {streams}
  */
-Media.getMedia = (audio, video, config) => {
+Media.getMedia = (audio: any | boolean, video: any | boolean, config: any) => {
   const defaultWidth = {ideal: config.resolution.idealWidth, max: config.resolution.maxWidth};
   const defaultHeight = {ideal: config.resolution.idealHeight, max: config.resolution.maxHeight};
   const mediaConfig = {
     audio,
     // TODO: Remove temporary workaround once Firefox fixes low constraint issues
     // eslint-disable-next-line no-nested-ternary
-    video: video ?
-      isBrowser('firefox') && video.width && video.width.max === 320 ?
-        {
-          deviceId: video.deviceId ? video.deviceId : undefined,
-          width: 320,
-          height: 180
-        } :
-        {
-          deviceId: video.deviceId ? video.deviceId : undefined,
-          width: video.width ? video.width : defaultWidth,
-          height: video.height ? video.height : defaultHeight
-        } :
-      false,
-    fake: process.env.NODE_ENV === 'test' // Special case to get fake media for Firefox browser for testing
+    video: video
+      ? isBrowser('firefox') && video.width && video.width.max === 320
+        ? {
+            deviceId: video.deviceId ? video.deviceId : undefined,
+            width: 320,
+            height: 180,
+            frameRate: video.frameRate ? video.frameRate : undefined,
+            facingMode: video.facingMode ? video.facingMode : undefined,
+          }
+        : {
+            deviceId: video.deviceId ? video.deviceId : undefined,
+            width: video.width ? video.width : defaultWidth,
+            height: video.height ? video.height : defaultHeight,
+            frameRate: video.frameRate ? video.frameRate : undefined,
+            facingMode: video.facingMode ? video.facingMode : undefined,
+          }
+      : false,
+    fake: process.env.NODE_ENV === 'test', // Special case to get fake media for Firefox browser for testing
   };
 
-  return navigator.mediaDevices
-    .getUserMedia(mediaConfig)
-    .catch((err) => {
-      const logPath = 'Media:index#getMedia --> navigator.mediaDevices.getUserMedia';
+  return navigator.mediaDevices.getUserMedia(mediaConfig).catch((err) => {
+    const logPath = 'Media:index#getMedia --> navigator.mediaDevices.getUserMedia';
 
-      LoggerProxy.logger.error(`${logPath} failed - ${err} (${err.constraint})`);
-      throw err;
-    });
+    LoggerProxy.logger.error(`${logPath} failed - ${err} (${err.constraint})`);
+    throw err;
+  });
 };
 
 /**
@@ -337,24 +360,24 @@ Media.getMedia = (audio, video, config) => {
  *    sendVideo: true/false
  *}
  */
-Media.getSupportedDevice = ({sendAudio, sendVideo}) =>
+Media.getSupportedDevice = ({sendAudio, sendVideo}: {sendAudio: boolean; sendVideo: boolean}) =>
   Promise.resolve().then(() => {
     if (!navigator.mediaDevices || navigator.mediaDevices.enumerateDevices === undefined) {
       return {
         sendAudio: false,
-        sendVideo: false
+        sendVideo: false,
       };
     }
 
     return navigator.mediaDevices.enumerateDevices().then((devices) => {
       const supported = {
         audio: devices.filter((device) => device.kind === AUDIO_INPUT).length > 0,
-        video: devices.filter((device) => device.kind === VIDEO_INPUT).length > 0
+        video: devices.filter((device) => device.kind === VIDEO_INPUT).length > 0,
       };
 
       return {
         sendAudio: supported.audio && sendAudio,
-        sendVideo: supported.video && sendVideo
+        sendVideo: supported.video && sendVideo,
       };
     });
   });
@@ -384,7 +407,7 @@ Media.toggleStream = () => {};
  * @param {MediaTrack} track A media stream
  * @returns {null}
  */
-Media.stopTracks = (track) => {
+Media.stopTracks = (track: any) => {
   if (!track) {
     return Promise.resolve();
   }
@@ -393,40 +416,11 @@ Media.stopTracks = (track) => {
     if (track && track.stop) {
       try {
         track.stop();
+      } catch (e) {
+        LoggerProxy.logger.error(
+          `Media:index#stopTracks --> Unable to stop the track with state ${track.readyState}, error: ${e}`
+        );
       }
-      catch (e) {
-        LoggerProxy.logger.error(`Media:index#stopTracks --> Unable to stop the track with state ${track.readyState}, error: ${e}`);
-      }
-    }
-  });
-};
-
-/**
- *
- * Stop input stream
- * @param {Stream} stream A media stream
- * @returns {null}
- * @deprecated after v1.89.3
- */
-Media.stopStream = (stream) => {
-  LoggerProxy.logger.warn('Media:index#stopStream --> [DEPRECATION WARNING]: stopStream has been deprecated after v1.89.3');
-  if (!stream) {
-    return Promise.resolve();
-  }
-
-  /*
-   * To release local media
-   * 1) Chrome requires all tracks to be stopped (stream.stop got deprecated)
-   * 2) Firefox requires the stream to be stopped
-   */
-  return Promise.resolve().then(() => {
-    if (stream.getTracks) {
-      stream.getTracks().forEach((track) => {
-        track.stop();
-      });
-    }
-    else if (stream.stop) {
-      stream.stop();
     }
   });
 };
@@ -447,13 +441,38 @@ Media.stopStream = (stream) => {
  * @param {Object} config SDK Config
  * @returns {Array} [localStream, shareStream]
  */
-Media.getUserMedia = (mediaSetting, audioVideo, sharePreferences, config) => Media.getLocalMedia({
-  sendAudio: mediaSetting.sendAudio ? audioVideo.audio || mediaSetting.sendAudio : false,
-  sendVideo: mediaSetting.sendVideo ? audioVideo.video || mediaSetting.sendVideo : false
-}, config).then((localStream) => Media.getLocalMedia({
-  sendShare: mediaSetting.sendShare,
-  isSharing: mediaSetting.isSharing,
-  sharePreferences
-}, config).then((shareStream) => [localStream, shareStream]));
+Media.getUserMedia = (
+  mediaSetting: {
+    sendAudio: object;
+    sendVideo: object;
+    sendShare: object;
+    isSharing: object;
+  },
+  audioVideo: {
+    audio: object;
+    video: object;
+  },
+  sharePreferences: {
+    shareConstraints: object;
+    highFrameRate: boolean;
+  },
+  config: object
+) =>
+  Media.getLocalMedia(
+    {
+      sendAudio: mediaSetting.sendAudio ? audioVideo.audio || mediaSetting.sendAudio : false,
+      sendVideo: mediaSetting.sendVideo ? audioVideo.video || mediaSetting.sendVideo : false,
+    },
+    config
+  ).then((localStream) =>
+    Media.getLocalMedia(
+      {
+        sendShare: mediaSetting.sendShare,
+        isSharing: mediaSetting.isSharing,
+        sharePreferences,
+      },
+      config
+    ).then((shareStream) => [localStream, shareStream])
+  );
 
 export default Media;