@techsee/techsee-media-service 4.0.0 → 5.0.1

package/lib/MultiParty/OpentokMultiPartyService.js

@@ -185,20 +185,34 @@ var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
   }
 };
 
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OpentokMultiPartyService = void 0;
 
-var MultiPartyService_1 = require("./MultiPartyService");
-
 var MediaConstants_1 = require("../MediaConstants");
 
 var MediaUtils_1 = require("../MediaUtils");
 
+var MediaCapabilitiesService_1 = require("./MediaCapabilitiesService");
+
 var MediaCapabilitiesUtils_1 = require("./MediaCapabilitiesUtils");
 
-var MediaCapabilitiesService_1 = require("./MediaCapabilitiesService");
+var MultiPartyService_1 = require("./MultiPartyService");
 
 var trace = MediaUtils_1.getMediaTracer('Multiparty'); // The preferred camera position to use for the video source
 
@@ -214,74 +228,57 @@ var OpentokMultiPartyService =
 function (_super) {
   __extends(OpentokMultiPartyService, _super);
 
-  function OpentokMultiPartyService(settings, getParticipantDomId) {
+  function OpentokMultiPartyService(settings, getParticipantId) {
     var _this = _super.call(this, settings) || this;
 
-    _this.subscribers = [];
-    _this.participantCount = 0;
+    _this.getParticipantId = getParticipantId;
+    _this.subscriberList = [];
 
     _this.connect = function (credentials) {
       try {
-        _this.session = window === null || window === void 0 ? void 0 : window.OT.initSession(credentials.apiKey, credentials.sessionId);
-      } catch (err) {
-        trace.error(JSON.stringify(err));
+        _this.session = OT.initSession(credentials.apiKey, credentials.sessionId);
 
-        _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.connectFailed, {
-          meta: {
-            err: JSON.stringify(err)
-          }
-        });
+        _this.session.on('connectionCreated', _this.connectionCreatedHandler);
 
-        return;
-      }
+        _this.session.on('connectionDestroyed', _this.connectionDestroyedHandler);
 
-      _this.session.on('connectionCreated', _this.connectionCreatedHandler);
+        _this.session.on('streamCreated', _this.streamCreatedHandler);
 
-      _this.session.on('connectionDestroyed', _this.connectionDestroyedHandler);
+        _this.session.on('streamDestroyed', _this.streamDestroyedHandler);
 
-      _this.session.on('streamCreated', _this.streamCreatedHandler);
+        _this.session.on('streamPropertyChanged', _this.streamPropertyChangedHandler);
 
-      _this.session.on('streamDestroyed', _this.streamDestroyedHandler);
+        _this.session.on('sessionDisconnected', _this.sessionDisconnectedHandler);
 
-      _this.session.on('streamPropertyChanged', _this.streamPropertyChangedHandler);
+        _this.session.connect(credentials.token, function (error) {
+          var _a;
 
-      _this.session.on('sessionDisconnected', _this.sessionDisconnectedHandler);
+          if (error) {
+            (_a = _this.session) === null || _a === void 0 ? void 0 : _a.off();
+            _this.session = undefined;
 
-      _this.session.connect(credentials.token, function (error) {
-        return __awaiter(_this, void 0, void 0, function () {
-          var _a;
+            _this.traceErrorCallback(error);
 
-          return __generator(this, function (_b) {
-            switch (_b.label) {
-              case 0:
-                if (error) {
-                  (_a = this.session) === null || _a === void 0 ? void 0 : _a.off();
-                  this.session = null;
-                  this.traceErrorCallback(error);
-                  this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.connectFailed, {
-                    meta: {
-                      err: JSON.stringify(error)
-                    }
-                  });
-                  return [2
-                  /*return*/
-                  ];
-                }
+            _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.connectFailed, {
+              meta: {
+                err: JSON.stringify(error)
+              }
+            });
 
-                return [4
-                /*yield*/
-                , this.createPublisher(this.settings)];
+            return;
+          }
 
-              case 1:
-                _b.sent();
+          _this.createPublisher(_this.settings);
+        });
+      } catch (err) {
+        trace.error(JSON.stringify(err));
 
-                return [2
-                /*return*/
-                ];
-            }
-          });
+        _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.connectFailed, {
+          meta: {
+            err: JSON.stringify(err)
+          }
         });
-      });
+      }
     };
 
     _this.disconnect = function () {
@@ -291,7 +288,6 @@ function (_super) {
         if (_this.session) {
           _this.session.disconnect();
 
-          _this.participantCount = 0;
           trace.info('Disconnection from session completed');
         }
       } catch (err) {
@@ -526,16 +522,16 @@ function (_super) {
 
     _this.initPublisher = function (settings) {
       return __awaiter(_this, void 0, void 0, function () {
-        var selectedCamera, isMobile, mediaCapabilitiesService, frontCameraDeviceId, backCameraDeviceId, videoSourceId, mobileCameraType, properties, err_2;
+        var selectedCamera, isMobile, mediaCapabilitiesService, frontCameraDeviceId, backCameraDeviceId, videoSourceId, mobileCameraType, err_2;
 
         var _this = this;
 
-        var _a, _b;
+        var _a, _b, _c;
 
-        return __generator(this, function (_c) {
-          switch (_c.label) {
+        return __generator(this, function (_d) {
+          switch (_d.label) {
             case 0:
-              _c.trys.push([0, 2,, 3]);
+              _d.trys.push([0, 2,, 3]);
 
               selectedCamera = settings.selectedCamera;
               isMobile = MediaCapabilitiesUtils_1.checkIsMobile();
@@ -544,11 +540,11 @@ function (_super) {
               , MediaCapabilitiesService_1.MediaCapabilitiesService.getInstance()];
 
             case 1:
-              mediaCapabilitiesService = _c.sent();
+              mediaCapabilitiesService = _d.sent();
               frontCameraDeviceId = mediaCapabilitiesService.frontCameraDeviceId, backCameraDeviceId = mediaCapabilitiesService.backCameraDeviceId;
               videoSourceId = (selectedCamera === MediaConstants_1.MultiPartyCameraTypes.FRONT ? frontCameraDeviceId : backCameraDeviceId) || undefined;
               mobileCameraType = settings.selectedCamera === MediaConstants_1.MultiPartyCameraTypes.FRONT ? OpentokFacingMode.USER : OpentokFacingMode.ENVIRONMENT;
-              properties = {
+              this.currentPublisher = OT.initPublisher(this.getParticipantId(((_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.connection) === null || _b === void 0 ? void 0 : _b.connectionId) || ''), {
                 insertMode: 'append',
                 fitMode: 'cover',
                 width: '100%',
@@ -557,14 +553,13 @@ function (_super) {
                   buttonDisplayMode: 'off',
                   archiveStatusDisplayMode: 'off',
                   audioLevelDisplayMode: 'off',
-                  backgroundImageURI: ((_a = this.branding) === null || _a === void 0 ? void 0 : _a.backgroundImageURI) || MultiPartyService_1.DEFAULT_AVATAR_URI
+                  backgroundImageURI: ((_c = this.branding) === null || _c === void 0 ? void 0 : _c.backgroundImageURI) || MultiPartyService_1.DEFAULT_AVATAR_URI
                 },
                 publishAudio: !settings.startWithAudioMuted,
                 publishVideo: settings.cameraEnabled,
                 videoSource: !isMobile ? videoSourceId : undefined,
                 facingMode: isMobile || !videoSourceId ? mobileCameraType : undefined
-              };
-              this.currentPublisher = window === null || window === void 0 ? void 0 : window.OT.initPublisher(this.getParticipantId((_b = this.session) === null || _b === void 0 ? void 0 : _b.connection.connectionId), properties, this.traceErrorCallback);
+              }, this.traceErrorCallback);
 
               if (!this.currentPublisher) {
                 trace.error('failed to init publisher');
@@ -591,7 +586,7 @@ function (_super) {
                   var connection = (_a = _this.session) === null || _a === void 0 ? void 0 : _a.connection;
                   var connectionId = connection === null || connection === void 0 ? void 0 : connection.connectionId;
 
-                  var participantId = _this.getParticipantId(connection.connectionId);
+                  var participantId = _this.getParticipantId(connectionId);
 
                   var isOwnConnection = _this.ownConnectionId === connectionId;
 
@@ -645,7 +640,7 @@ function (_super) {
               , 3];
 
             case 2:
-              err_2 = _c.sent();
+              err_2 = _d.sent();
               trace.error(JSON.stringify(err_2));
               throw err_2;
 
@@ -658,71 +653,93 @@ function (_super) {
       });
     };
 
-    _this.streamCreatedHandler = function (event) {
+    _this.reinitializeStreams = function (settings) {
       return __awaiter(_this, void 0, void 0, function () {
-        var stream, connection, participantId, properties, subscriber_1;
-
         var _this = this;
 
-        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              if (this.currentPublisher) {
+                this.currentPublisher.destroy();
+                this.currentPublisher = undefined;
+              }
+
+              return [4
+              /*yield*/
+              , this.createPublisher(settings)];
+
+            case 1:
+              _a.sent();
+
+              this.subscriberList = this.subscriberList.map(function (s) {
+                var _a;
+
+                var connectionId = s.connectionId,
+                    subscriber = s.subscriber;
+                var stream = subscriber.stream;
+                (_a = _this.session) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+                return __assign(__assign({}, s), {
+                  subscriber: _this.createSubscriber(stream, connectionId)
+                });
+              });
+              return [2
+              /*return*/
+              ];
+          }
+        });
+      });
+    };
+
+    _this.streamCreatedHandler = function (event) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var stream, connection, connectionId, participantId, subscriber;
+
+        var _a, _b;
 
-        return __generator(this, function (_f) {
-          switch (_f.label) {
+        return __generator(this, function (_c) {
+          switch (_c.label) {
             case 0:
               trace.info('streamCreatedHandler', event.stream);
               stream = event.stream;
               connection = stream.connection;
-              participantId = this.getParticipantId(connection.connectionId);
+              connectionId = connection.connectionId;
+              participantId = this.getParticipantId(connectionId);
               return [4
               /*yield*/
               , MediaCapabilitiesService_1.MediaCapabilitiesService.setDevicesList()];
 
             case 1:
-              _f.sent();
+              _c.sent();
 
               this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.streamCreated, {
                 event: event,
                 participantId: participantId,
                 startWithAudioMuted: this.settings.startWithAudioMuted,
-                isOwnConnection: this.ownConnectionId === ((_b = (_a = event === null || event === void 0 ? void 0 : event.stream) === null || _a === void 0 ? void 0 : _a.connection) === null || _b === void 0 ? void 0 : _b.connectionId),
-                hasVideo: (_c = event === null || event === void 0 ? void 0 : event.stream) === null || _c === void 0 ? void 0 : _c.hasVideo,
-                hasAudio: (_d = event === null || event === void 0 ? void 0 : event.stream) === null || _d === void 0 ? void 0 : _d.hasAudio
+                isOwnConnection: this.ownConnectionId === connectionId,
+                hasVideo: (_a = event === null || event === void 0 ? void 0 : event.stream) === null || _a === void 0 ? void 0 : _a.hasVideo,
+                hasAudio: (_b = event === null || event === void 0 ? void 0 : event.stream) === null || _b === void 0 ? void 0 : _b.hasAudio
               });
 
-              if (!this.ownConnectionId || !stream || connection.connectionId === this.ownConnectionId) {
+              if (!this.ownConnectionId || !stream || connectionId === this.ownConnectionId) {
                 return [2
                 /*return*/
                 ];
               }
 
-              if (this.subscribers.length >= MultiPartyService_1.maxParticipantsNumber - 1) {
+              if (this.subscriberList.length >= MultiPartyService_1.maxParticipantsNumber - 1) {
                 trace.info("a new subscriber cannot be added, as the number of participants reached its limit: " + MultiPartyService_1.maxParticipantsNumber);
-              } else {
-                properties = {
-                  insertMode: 'append',
-                  fitMode: 'cover',
-                  width: '100%',
-                  height: '100%',
-                  style: {
-                    buttonDisplayMode: 'off',
-                    audioLevelDisplayMode: 'off',
-                    backgroundImageURI: ((_e = this.branding) === null || _e === void 0 ? void 0 : _e.backgroundImageURI) || MultiPartyService_1.DEFAULT_AVATAR_URI
-                  }
-                };
-                subscriber_1 = event.target.subscribe(event.stream, participantId, properties, function (err) {
-                  _this.traceErrorCallback(err);
-
-                  subscriber_1 === null || subscriber_1 === void 0 ? void 0 : subscriber_1.on('videoElementCreated', function (event) {
-                    trace.info('videoElementCreated', event);
-                  });
-                });
-                this.subscribers.push({
-                  subscriber: subscriber_1,
-                  connectionId: connection.connectionId,
-                  clientRole: this.getClientRole(connection)
-                });
+                return [2
+                /*return*/
+                ];
               }
 
+              subscriber = this.createSubscriber(stream, connectionId);
+              this.subscriberList.push({
+                subscriber: subscriber,
+                connectionId: connectionId,
+                clientRole: this.getClientRole(connection)
+              });
               return [2
               /*return*/
               ];
@@ -758,7 +775,7 @@ function (_super) {
         participantId: _this.getParticipantId((_a = event === null || event === void 0 ? void 0 : event.stream) === null || _a === void 0 ? void 0 : _a.connection.connectionId)
       });
 
-      _this.subscribers = _this.subscribers.filter(function (subscriber) {
+      _this.subscriberList = _this.subscriberList.filter(function (subscriber) {
         return subscriber.connectionId !== destroyedConnectionId;
       });
     };
@@ -771,9 +788,7 @@ function (_super) {
         return;
       }
 
-      ++_this.participantCount;
-
-      _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.participantsNumberChanged, _this.participantCount);
+      _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.participantsNumberChanged, _this.subscriberList.length);
 
       var clientRole = _this.getClientRole(connection);
 
@@ -802,11 +817,9 @@ function (_super) {
         return;
       }
 
-      --_this.participantCount;
-
-      _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.participantsNumberChanged, _this.participantCount);
+      _this.emit(MultiPartyService_1.MULTI_PARTY_EVENTS.participantsNumberChanged, _this.subscriberList.length);
 
-      _this.session = null;
+      _this.session = undefined;
     };
 
     _this.traceErrorCallback = function (error) {
@@ -814,16 +827,36 @@ function (_super) {
     };
 
     _this.sessionDisconnectedHandler = function (event) {
-      var _a;
+      trace.info('sessionDisconnectedHandler', event); // ToDo: Below line makes no sense (according to the OT types). This is not how OT signals work.
+      // this?.session?.signal({ retryAfterReconnect: true });
+    };
+
+    _this.createSubscriber = function (stream, connectionId) {
+      var _a; // ToDo: OT session can be undefined. This needs to be fixed.
+
 
-      trace.info('sessionDisconnectedHandler', event);
-      (_a = _this === null || _this === void 0 ? void 0 : _this.session) === null || _a === void 0 ? void 0 : _a.signal({
-        retryAfterReconnect: true
+      var subscriber = _this.session.subscribe(stream, _this.getParticipantId(connectionId), {
+        insertMode: 'append',
+        fitMode: 'cover',
+        width: '100%',
+        height: '100%',
+        style: {
+          buttonDisplayMode: 'off',
+          audioLevelDisplayMode: 'off',
+          backgroundImageURI: ((_a = _this.branding) === null || _a === void 0 ? void 0 : _a.backgroundImageURI) || MultiPartyService_1.DEFAULT_AVATAR_URI
+        }
+      }, function (err) {
+        _this.traceErrorCallback(err);
+
+        subscriber === null || subscriber === void 0 ? void 0 : subscriber.on('videoElementCreated', function (event) {
+          trace.info('videoElementCreated', event);
+        });
       });
+
+      return subscriber;
     };
 
     _this.branding = settings.branding;
-    _this.getParticipantId = getParticipantDomId;
     return _this;
   }
 
@@ -831,7 +864,14 @@ function (_super) {
     get: function get() {
       var _a, _b;
 
-      return (_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.connection) === null || _b === void 0 ? void 0 : _b.connectionId;
+      return ((_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.connection) === null || _b === void 0 ? void 0 : _b.connectionId) || '';
+    },
+    enumerable: false,
+    configurable: true
+  });
+  Object.defineProperty(OpentokMultiPartyService.prototype, "subscribers", {
+    get: function get() {
+      return __spreadArrays(this.subscriberList);
     },
     enumerable: false,
     configurable: true