@webex/plugin-meetings 3.0.0-beta.1 → 3.0.0-beta.11

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

@@ -7,15 +7,15 @@ import LoggerProxy from '../common/logs/logger-proxy';
 import {
   AUDIO_INPUT,
   VIDEO_INPUT,
-  PEER_CONNECTION_STATE,
-  MEDIA_TRACK_CONSTRAINT
+  MEDIA_TRACK_CONSTRAINT,
 } from '../constants';
 import Config from '../config';
-import PeerConnectionManager from '../peer-connection-manager';
-import ReconnectionError from '../common/errors/reconnection';
+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 +46,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 +54,7 @@ const Media = {};
  * @returns {Boolean}
  * @public
  */
-Media.setLocalTrack = (enabled, track) => {
+Media.setLocalTrack = (enabled: boolean, track: MediaStreamTrack) => {
   if (track) {
     track.enabled = enabled;
 
@@ -64,32 +64,6 @@ Media.setLocalTrack = (enabled, track) => {
   return false;
 };
 
-/**
- * @param {RTCPeerConnection} peerConnection
- * @param {Object} meetingProperties
- * @param {string} meetingProperties.meetingId
- * @param {string} meetingProperties.remoteQualityLevel LOW|MEDIUM|HIGH
- * @returns {Promise}
- */
-Media.reconnectMedia = (peerConnection, {
-  meetingId,
-  remoteQualityLevel,
-  enableRtx,
-  enableExtmap
-}) => {
-  if (peerConnection.connectionState === PEER_CONNECTION_STATE.CLOSED ||
-    peerConnection.connectionState === PEER_CONNECTION_STATE.FAILED) {
-    return Promise.reject(new ReconnectionError('Reinitiate peerconnection'));
-  }
-
-  return PeerConnectionManager.createOffer(peerConnection, {
-    meetingId,
-    remoteQualityLevel,
-    enableRtx,
-    enableExtmap
-  });
-};
-
 /**
  * format the media array for send
  * @param {String} mediaId
@@ -97,7 +71,7 @@ Media.reconnectMedia = (peerConnection, {
  * @param {Boolean} videoMuted
  * @returns {Array} medias
  */
-Media.generateLocalMedias = (mediaId, audioMuted, videoMuted) => {
+Media.generateLocalMedias = (mediaId: string, audioMuted: boolean, videoMuted: boolean) => {
   if (mediaId) {
     return [
       {
@@ -119,7 +93,7 @@ Media.generateLocalMedias = (mediaId, audioMuted, videoMuted) => {
  * @param {Object} config SDK Configuration for meetings plugin
  * @returns {Promise}
  */
-Media.getLocalMedia = (options, config) => {
+Media.getLocalMedia = (options: any, config: object) => {
   const {
     sendAudio, sendVideo, sendShare, sharePreferences, isSharing
   } = options;
@@ -141,186 +115,110 @@ Media.getLocalMedia = (options, config) => {
 
   return Promise.resolve(undefined);
 };
+
 /**
- * Returns the direction and tracks
- * @param {string} trackType type of track (audio/video)
- * @param {object}  track  tracks passed
- * @param {boolean} receiveTracks do you want to receive tracks from the remote side
- * @returns {Object} returns direction tracks to be added in transceiver
+ * creates a webrtc media connection with provided tracks and mediaDirection configuration
+ *
+ * @param {boolean} isMultistream
+ * @param {string} debugId string useful for debugging (will appear in media connection logs)
+ * @param {Object} options
+ * @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.checkTracks = (trackType, track, receiveTracks) => {
-  const getDirection = (sendTracks, receiveTracks) => {
-    if (sendTracks && receiveTracks) {
-      return 'sendrecv';
-    } if (sendTracks && !receiveTracks) {
-      return 'sendonly';
-    } if (!sendTracks && receiveTracks) {
-      return 'recvonly';
+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
     }
-
-    return 'inactive';
-  };
-
-  if (track) {
-    return {track, direction: getDirection(!!track, receiveTracks)};
   }
-
-  return {track: trackType, direction: getDirection(!!track, receiveTracks)};
-};
-/**
- * creates peerconnection and attaches streams
- * @param {MediaDirection} mediaProperties
- * @param {Object} meetingProperties
- * @param {string} meetingProperties.meetingId
- * @param {string} meetingProperties.remoteQualityLevel LOW|MEDIUM|HIGH
- * @returns {Array} [peerConnection, ]
- */
-Media.attachMedia = (mediaProperties, {
-  meetingId,
-  remoteQualityLevel,
-  enableRtx,
-  enableExtmap
-}) => {
+) => {
   const {
-    mediaDirection,
-    audioTrack,
-    videoTrack,
-    shareTrack,
-    peerConnection
-  } = mediaProperties;
-
-  let result = null;
-
-  // Add Transceiver for audio
-  result = Media.checkTracks('audio', mediaDirection.sendAudio && audioTrack, mediaDirection.receiveAudio);
-  peerConnection.audioTransceiver = peerConnection.addTransceiver(result.track, {direction: result.direction});
+    mediaProperties,
+    remoteQualityLevel,
+    enableRtx,
+    enableExtmap,
+    turnServerInfo
+  } = options;
 
-  // Add Transceiver for video
-  result = Media.checkTracks('video', mediaDirection.sendVideo && videoTrack, mediaDirection.receiveVideo);
-  peerConnection.videoTransceiver = peerConnection.addTransceiver(result.track, {direction: result.direction});
+  const iceServers = [];
 
-  // Add Transceiver for share
-  result = Media.checkTracks('video', mediaDirection.sendShare && shareTrack, mediaDirection.receiveShare);
-  peerConnection.shareTransceiver = peerConnection.addTransceiver(result.track, {direction: result.direction});
+  if (turnServerInfo) {
+    iceServers.push({
+      urls: turnServerInfo.url,
+      username: turnServerInfo.username || '',
+      credential: turnServerInfo.password || ''
+    });
+  }
 
-  peerConnection.onnegotiationneeded = (event) => {
-    LoggerProxy.logger.info(`Media:index#attachMedia --> onnegotiationneeded#PeerConnection: ${event}`);
-  };
+  if (isMultistream) {
+    return new MultistreamRoapMediaConnection({
+      iceServers,
+    }, debugId);
+  }
 
-  return PeerConnectionManager.createOffer(peerConnection, {
-    meetingId,
-    remoteQualityLevel,
-    enableRtx,
-    enableExtmap
-  });
-};
+  if (!mediaProperties) {
+    throw new Error('mediaProperties have to be provided for non-multistream media connections');
+  }
 
-/**
- * updates all the media streams and creates a new media offer
- * @param {MediaDirection} mediaProperties
- * @param {Object} meetingProperties
- * @param {string} meetingProperties.meetingId
- * @param {string} meetingProperties.remoteQualityLevel LOW|MEDIUM|HIGH
- * @returns {Promise}
- */
-Media.updateMedia = (mediaProperties, {
-  meetingId,
-  remoteQualityLevel,
-  enableRtx,
-  enableExtmap
-}) => {
   const {
     mediaDirection,
     audioTrack,
     videoTrack,
-    shareTrack,
-    peerConnection
+    shareTrack
   } = mediaProperties;
 
-  // update audio transceiver
-  Media.setTrackOnTransceiver(peerConnection.audioTransceiver, {
-    type: 'audio',
-    track: audioTrack,
-    sendTrack: mediaDirection.sendAudio && audioTrack,
-    receiveTrack: mediaDirection.receiveAudio
-  });
 
-  // update video transceiver
-  Media.setTrackOnTransceiver(peerConnection.videoTransceiver, {
-    type: 'video',
-    track: videoTrack,
-    sendTrack: mediaDirection.sendVideo && videoTrack,
-    receiveTrack: mediaDirection.receiveVideo
-  });
-
-  // update content transceiver
-  Media.setTrackOnTransceiver(peerConnection.shareTransceiver, {
-    type: 'video',
-    track: shareTrack,
-    sendTrack: mediaDirection.sendShare && shareTrack,
-    receiveTrack: mediaDirection.receiveShare
-  });
-  peerConnection.onnegotiationneeded = (event) => {
-    LoggerProxy.logger.info(`Media:index#updateMedia --> onnegotiationneeded#PeerConnection: ${event}`);
-  };
-
-  return PeerConnectionManager.createOffer(peerConnection, {
-    meetingId,
-    remoteQualityLevel,
-    enableRtx,
-    enableExtmap
-  });
-};
-
-/**
- * @param {RTCRtpTransceiver} transceiver
- * @param {Object} options
- * @param {MediaStreamTrack} options.track
- * @returns {undefined}
- */
-Media.setTrackOnTransceiver = (transceiver, options) => {
-  const {
-    type, track, sendTrack, receiveTrack
-  } = options;
-
-  try {
-    const result = Media.checkTracks(type, sendTrack && track, receiveTrack);
-
-    transceiver.direction = result.direction;
-    if (options.track) {
-      transceiver.sender.replaceTrack(track);
+  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
     }
-  }
-  catch (e) {
-    LoggerProxy.logger.error(`Media:index#setTrackOnTransceiver --> ${e}`);
-    throw e;
-  }
-};
-
-/**
- * creates a new offer
- * @param {Object} meetingProperties
- * @param {string} meetingProperties.meetingId
- * @param {string} meetingProperties.remoteQualityLevel LOW|MEDIUM|HIGH
- * @param {RTCPeerConnection} peerConnection
- * @param {RTCRtpTransceiver} transceiver
- * @param {Object} options see #Media.setTrackOnTransceiver
- * @returns {Promise}
- */
-Media.updateTransceiver = ({
-  meetingId,
-  remoteQualityLevel,
-  enableRtx,
-  enableExtmap
-}, peerConnection, transceiver, options) => {
-  Media.setTrackOnTransceiver(transceiver, options);
-
-  return PeerConnectionManager.createOffer(peerConnection, {
-    meetingId,
-    remoteQualityLevel,
-    enableRtx,
-    enableExtmap
-  });
+  }, {
+    send: {
+      audio: audioTrack,
+      video: videoTrack,
+      screenShareVideo: shareTrack
+    },
+    receive: {
+      audio: mediaDirection.receiveAudio,
+      video: mediaDirection.receiveVideo,
+      screenShareVideo: mediaDirection.receiveShare,
+      remoteQualityLevel
+    }
+  }, debugId);
 };
 
 /**
@@ -335,7 +233,17 @@ Media.updateTransceiver = ({
  * @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
@@ -352,7 +260,7 @@ Media.getDisplayMedia = (options, config = {}) => {
     aspectRatio
   } = Config.meetings;
 
-  let shareConstraints = {
+  let shareConstraints: any = {
     cursor: MEDIA_TRACK_CONSTRAINT.CURSOR.AWLAYS,
     aspectRatio
   };
@@ -388,7 +296,7 @@ Media.getDisplayMedia = (options, config = {}) => {
 
 
   if (isBrowser('firefox')) {
-    const mediaConfig = {
+    const mediaConfig: any = {
       audio: options.sendAudio,
       video: options.sendShare
     };
@@ -408,7 +316,7 @@ Media.getDisplayMedia = (options, config = {}) => {
       });
   }
 
-  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
@@ -426,7 +334,7 @@ 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 = {
@@ -471,7 +379,7 @@ 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 {
@@ -518,7 +426,7 @@ Media.toggleStream = () => {};
  * @param {MediaTrack} track A media stream
  * @returns {null}
  */
-Media.stopTracks = (track) => {
+Media.stopTracks = (track: any) => {
   if (!track) {
     return Promise.resolve();
   }
@@ -542,7 +450,7 @@ Media.stopTracks = (track) => {
  * @returns {null}
  * @deprecated after v1.89.3
  */
-Media.stopStream = (stream) => {
+Media.stopStream = (stream: any) => {
   LoggerProxy.logger.warn('Media:index#stopStream --> [DEPRECATION WARNING]: stopStream has been deprecated after v1.89.3');
   if (!stream) {
     return Promise.resolve();
@@ -581,7 +489,24 @@ Media.stopStream = (stream) => {
  * @param {Object} config SDK Config
  * @returns {Array} [localStream, shareStream]
  */
-Media.getUserMedia = (mediaSetting, audioVideo, sharePreferences, config) => Media.getLocalMedia({
+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({

package/src/media/internal-media-core-wrapper.ts

@@ -0,0 +1,9 @@
+import {MediaConnection as MC} from '@webex/internal-media-core';
+
+/* We have this wrapper just because otherwise it's impossible to mock
+ * RoapMediaConnection and MultistreamRoapMediaConnection constructors in unit tests,
+ * because they are exported by @webex/internal-media-core as non-writable, non-configurable
+ * properties of MediaConnection and sinon doesn't allow spying on them or stubbing them.
+ */
+export const RoapMediaConnection = MC.RoapMediaConnection;
+export const MultistreamRoapMediaConnection = MC.MultistreamRoapMediaConnection;

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

@@ -1,25 +1,36 @@
+import {MediaConnection as MC} from '@webex/internal-media-core';
+
 import {
-  ICE_STATE,
   MEETINGS,
   PC_BAIL_TIMEOUT,
   QUALITY_LEVELS
 } from '../constants';
 import LoggerProxy from '../common/logs/logger-proxy';
 
-import MediaUtil from './util';
-
 /**
  * @class MediaProperties
  */
 export default class MediaProperties {
+  audioTrack: any;
+  localQualityLevel: any;
+  mediaDirection: any;
+  mediaSettings: any;
+  webrtcMediaConnection: any;
+  remoteAudioTrack: any;
+  remoteQualityLevel: any;
+  remoteShare: any;
+  remoteVideoTrack: any;
+  shareTrack: any;
+  videoDeviceId: any;
+  videoTrack: any;
   namespace = MEETINGS;
 
   /**
    * @param {Object} [options] -- to auto construct
    * @returns {MediaProperties}
    */
-  constructor(options = {}) {
-    this.peerConnection = MediaUtil.createPeerConnection();
+  constructor(options: any = {}) {
+    this.webrtcMediaConnection = null;
     this.mediaDirection = options.mediaDirection;
     this.videoTrack = options.videoTrack;
     this.audioTrack = options.audioTrack;
@@ -49,8 +60,8 @@ export default class MediaProperties {
     this.mediaSettings[type] = values;
   }
 
-  setMediaPeerConnection(peerConnection) {
-    this.peerConnection = peerConnection;
+  setMediaPeerConnection(mediaPeerConnection) {
+    this.webrtcMediaConnection = mediaPeerConnection;
   }
 
   setLocalVideoTrack(videoTrack) {
@@ -82,7 +93,7 @@ export default class MediaProperties {
    * @param {MediaTrack} remoteAudioTrack MediaTrack to save
    * @returns {void}
    */
-  setRemoteAudioTrack(remoteAudioTrack) {
+  setRemoteAudioTrack(remoteAudioTrack: any) {
     this.remoteAudioTrack = remoteAudioTrack;
   }
 
@@ -91,7 +102,7 @@ export default class MediaProperties {
    * @param {MediaTrack} remoteVideoTrack MediaTrack to save
    * @returns {void}
    */
-  setRemoteVideoTrack(remoteVideoTrack) {
+  setRemoteVideoTrack(remoteVideoTrack: any) {
     this.remoteVideoTrack = remoteVideoTrack;
   }
 
@@ -100,16 +111,12 @@ export default class MediaProperties {
    * @param {string} deviceId Preferred video input device
    * @returns {void}
    */
-  setVideoDeviceId(deviceId) {
+  setVideoDeviceId(deviceId: string) {
     this.videoDeviceId = deviceId;
   }
 
   unsetPeerConnection() {
-    this.peerConnection = null;
-  }
-
-  reInitiatePeerconnection(turnServerInfo) {
-    this.peerConnection = MediaUtil.createPeerConnection(turnServerInfo);
+    this.webrtcMediaConnection = null;
   }
 
   unsetLocalVideoTrack() {
@@ -199,39 +206,38 @@ export default class MediaProperties {
   }
 
   /**
-   * Waits until ice connection is established
+   * Waits for the webrtc media connection to be connected.
    *
    * @returns {Promise<void>}
    */
-  waitForIceConnectedState() {
-    const isIceConnected = () => (
-      this.peerConnection.iceConnectionState === ICE_STATE.CONNECTED ||
-        this.peerConnection.iceConnectionState === ICE_STATE.COMPLETED
+  waitForMediaConnectionConnected() {
+    const isConnected = () => (
+      this.webrtcMediaConnection.getConnectionState() === MC.ConnectionState.Connected
     );
 
-    if (isIceConnected()) {
+    if (isConnected()) {
       return Promise.resolve();
     }
 
     return new Promise((resolve, reject) => {
       let timer;
 
-      const iceListener = () => {
-        LoggerProxy.logger.log(`Media:properties#waitForIceConnectedState --> ice state: ${this.peerConnection.iceConnectionState}, conn state: ${this.peerConnection.connectionState}`);
+      const connectionStateListener = () => {
+        LoggerProxy.logger.log(`Media:properties#waitForMediaConnectionConnected --> connection state: ${this.webrtcMediaConnection.getConnectionState()}`);
 
-        if (isIceConnected()) {
+        if (isConnected()) {
           clearTimeout(timer);
-          this.peerConnection.removeEventListener('iceconnectionstatechange', iceListener);
+          this.webrtcMediaConnection.off(MC.Event.CONNECTION_STATE_CHANGED, connectionStateListener);
           resolve();
         }
       };
 
       timer = setTimeout(() => {
-        this.peerConnection.removeEventListener('iceconnectionstatechange', iceListener);
+        this.webrtcMediaConnection.off(MC.Event.CONNECTION_STATE_CHANGED, connectionStateListener);
         reject();
       }, PC_BAIL_TIMEOUT);
 
-      this.peerConnection.addEventListener('iceconnectionstatechange', iceListener);
+      this.webrtcMediaConnection.on(MC.Event.CONNECTION_STATE_CHANGED, connectionStateListener);
     });
   }
 
@@ -242,13 +248,13 @@ export default class MediaProperties {
    */
   async getCurrentConnectionType() {
     // we can only get the connection type after ICE connection has been established
-    await this.waitForIceConnectedState();
+    await this.waitForMediaConnectionConnected();
 
     const allStatsReports = [];
 
     try {
       // eslint-disable-next-line no-await-in-loop
-      const statsResult = await this.peerConnection.getStats();
+      const statsResult = await this.webrtcMediaConnection.getStats();
 
       statsResult.forEach((report) => allStatsReports.push(report));
     }

package/src/media/util.ts

@@ -0,0 +1,16 @@
+/* globals MediaStream */
+
+import LoggerProxy from '../common/logs/logger-proxy';
+
+const MediaUtil: any = {};
+
+MediaUtil.createMediaStream = (tracks) => {
+  if (!tracks) {
+    LoggerProxy.logger.error('Media:util#createMediaStream --> Tracks don\'t exist');
+  }
+  const filtredTracks = tracks.filter((element) => !!element);
+
+  return new MediaStream(filtredTracks);
+};
+
+export default MediaUtil;

package/src/mediaQualityMetrics/{config.js → config.ts}

@@ -1,4 +1,3 @@
-
 export default {
   intervals: [
     {
@@ -380,3 +379,4 @@ export default {
     }
   ]
 };
+