@techsee/techsee-media-service 0.7.0-alpha.2 → 0.7.0

package/lib/MediaSubscriber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MediaSubscriber.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAC,gBAAgB,EAAE,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAC,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAC,gBAAgB,EAAuB,MAAM,kBAAkB,CAAC;AAWxE,qBAAa,sBAAuB,YAAW,gBAAgB;IAC3D,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,aAAa,CAAoC;IAEzD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwB;gBAE9C,gBAAgB,EAAE,qBAAqB;aAW/C,UAAU,EAAI,gBAAgB;aAI9B,SAAS,EAAI,cAAc;aAI3B,SAAS,EAAI,OAAO;aAIpB,YAAY,EAAI,OAAO;aAQvB,QAAQ,EAAI,OAAO;aAInB,QAAQ,EAAI,OAAO;aAInB,YAAY,EAAI,QAAQ,CAAC,gBAAgB,CAAC;aAI1C,UAAU,EAAI,MAAM;aAIpB,WAAW,EAAI,MAAM;aAIrB,WAAW,EAAI,MAAM;aAIrB,YAAY,EAAI,MAAM;IAI1B,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IASjC,cAAc,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IAK1C,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI;IASrC,YAAY,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI;IAc9C,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IAI9B,OAAO,IAAI,IAAI;IAgBf,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,eAAe;CAK1B","file":"MediaSubscriber.d.ts","sourcesContent":["import {EventEmitter} from 'events';\nimport {Nullable} from '@techsee/techsee-common';\nimport {IMediaSubscriber, MediaSubscriberParams} from './MediaContracts';\nimport {TechseeMediaStream} from './TechseeMediaStream';\nimport {removeVideoElementFromDom, renderMediaStreamToVideoEl} from './MediaUtils/MediaDomUtils';\nimport {KnownMediaStream, KnownMediaStreamKind} from './MediaConstants';\n\nimport {getMediaTracer} from './MediaUtils/MediaTracer';\n\nconst trace = getMediaTracer('MediaSubscriber');\n\nenum privateEvents {\n    STREAM_STATE_CHANGE = 'STREAM_STATE_CHANGE',\n    SUBSCRIBER_DISPOSE = 'SUBSCRIBER_DISPOSE'\n}\n\nexport class TechseeMediaSubscriber implements IMediaSubscriber {\n    private _emitter: EventEmitter;\n    private _isDisposed: boolean = false;\n    private _isPlaying: boolean = false;\n    private _hasVideo: boolean = false;\n    private _hasAudio: boolean = false;\n    private _mediaElement: Nullable<HTMLVideoElement> = null;\n\n    private readonly _subscriberParams: MediaSubscriberParams;\n\n    constructor(subscriberParams: MediaSubscriberParams) {\n        trace.info('Subscriber created');\n\n        this.videoResizeHandler = this.videoResizeHandler.bind(this);\n\n        this._emitter = new EventEmitter();\n        this._subscriberParams = subscriberParams;\n    }\n\n    //#region IMediaSubscriber\n\n    get streamType(): KnownMediaStream {\n        return this._subscriberParams.streamType;\n    }\n\n    get container(): HTMLDivElement {\n        return this._subscriberParams.container;\n    }\n\n    get isPlaying(): boolean {\n        return this._isPlaying;\n    }\n\n    get isSoundMuted(): boolean {\n        if (!this._mediaElement) {\n            return true;\n        }\n\n        return this._mediaElement.muted;\n    }\n\n    get hasAudio(): boolean {\n        return this._hasAudio;\n    }\n\n    get hasVideo(): boolean {\n        return this._hasVideo;\n    }\n\n    get mediaElement(): Nullable<HTMLVideoElement> {\n        return this._mediaElement;\n    }\n\n    get videoWidth(): number {\n        return this.mediaElement ? this.mediaElement.videoWidth : 0;\n    }\n\n    get videoHeight(): number {\n        return this.mediaElement ? this.mediaElement.videoHeight : 0;\n    }\n\n    get renderWidth(): number {\n        return this.container.offsetWidth;\n    }\n\n    get renderHeight(): number {\n        return this.container.offsetHeight;\n    }\n\n    muteSound(isMuted: boolean): void {\n        this.throwIfDisposed();\n        trace.info('Subscriber mute change - isMuted =', isMuted);\n        if (this._mediaElement && this._mediaElement.muted !== isMuted) {\n            this._mediaElement.muted = isMuted;\n            this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n        }\n    }\n\n    onStateChanged(callback: () => void): void {\n        this.throwIfDisposed();\n        this._emitter.on(privateEvents.STREAM_STATE_CHANGE, callback);\n    }\n\n    onDispose(callback: () => void): void {\n        this.throwIfDisposed();\n        this._emitter.on(privateEvents.SUBSCRIBER_DISPOSE, callback);\n    }\n\n    //#endregion\n\n    //#region Non Interface Methods\n\n    renderStream(stream: TechseeMediaStream): void {\n        this.throwIfDisposed();\n        this.stopRenderInternal().then(() => renderMediaStreamToVideoEl(this.container, stream.mediaStream))\n            .then((videoEl) => {\n                this._hasAudio = stream.mediaStream.getAudioTracks().length > 0;\n                this._hasVideo = stream.mediaStream.getVideoTracks().length > 0;\n\n                this.setPlayingState(videoEl, stream.streamKind);\n            })\n            .catch((error) => {\n                trace.warn('Error while rendering stream on video element', error);\n            });\n    }\n\n    stopRendering(): Promise<void> {\n        return this.stopRenderInternal().then(() => this.setPlayingState());\n    }\n\n    dispose(): void {\n        if (this._isDisposed) {\n            return;\n        }\n\n        this.stopRendering().catch(() => undefined);\n\n\n        this._isDisposed = true;\n        this._emitter.removeAllListeners();\n        trace.info('Subscriber disposed');\n        this.emitEvent(privateEvents.SUBSCRIBER_DISPOSE);\n    }\n\n    //#endregion\n\n    private setPlayingState(mediaElement?: HTMLVideoElement, streamKind?: KnownMediaStreamKind): void {\n        this._isPlaying = !!mediaElement;\n        this._mediaElement = mediaElement || null;\n\n        const finalize = (): void => {\n            this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n            trace.info(`Video element ${streamKind || ''} ${this.isPlaying ? 'play' : 'stop'} success`);\n        };\n\n        if (this._mediaElement && streamKind === KnownMediaStreamKind.Video) {\n            if (this._mediaElement.videoHeight === 0) {\n                const resizeHandler = (): void => {\n                    finalize();\n                    this._mediaElement && this._mediaElement.removeEventListener('resize', resizeHandler);\n                    this._mediaElement && this._mediaElement.addEventListener('resize', this.videoResizeHandler);\n                };\n\n                //Todo actually, from here we can know on dimensions changes\n                this._mediaElement.addEventListener('resize', resizeHandler, false);\n            } else {\n                this._mediaElement.addEventListener('resize', this.videoResizeHandler);\n                finalize();\n            }\n        } else {\n            finalize();\n        }\n    }\n\n    private videoResizeHandler(): void {\n        trace.info(`Video resize, new size = w: ${this.videoWidth} h:${this.videoHeight}`);\n        this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n    }\n\n    private stopRenderInternal() {\n        if (this._mediaElement && document.body.contains(this._mediaElement)) {\n            return removeVideoElementFromDom(this._mediaElement);\n        }\n\n        return Promise.resolve();\n    }\n\n    private emitEvent(event: string, eventArgs?: any): void {\n        setTimeout(() => {\n            this._emitter.emit(event, eventArgs);\n        });\n    }\n\n    private throwIfDisposed(): void {\n        if (this._isDisposed) {\n            throw new Error('Subscriber is already disposed');\n        }\n    }\n}\n"]}

package/lib/MediaSubscriber.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var events_1 = require("events");
+var MediaDomUtils_1 = require("./MediaUtils/MediaDomUtils");
+var MediaConstants_1 = require("./MediaConstants");
+var MediaTracer_1 = require("./MediaUtils/MediaTracer");
+var trace = MediaTracer_1.getMediaTracer('MediaSubscriber');
+var privateEvents;
+(function (privateEvents) {
+    privateEvents["STREAM_STATE_CHANGE"] = "STREAM_STATE_CHANGE";
+    privateEvents["SUBSCRIBER_DISPOSE"] = "SUBSCRIBER_DISPOSE";
+})(privateEvents || (privateEvents = {}));
+var TechseeMediaSubscriber = /** @class */function () {
+    function TechseeMediaSubscriber(subscriberParams) {
+        this._isDisposed = false;
+        this._isPlaying = false;
+        this._hasVideo = false;
+        this._hasAudio = false;
+        this._mediaElement = null;
+        trace.info('Subscriber created');
+        this.videoResizeHandler = this.videoResizeHandler.bind(this);
+        this._emitter = new events_1.EventEmitter();
+        this._subscriberParams = subscriberParams;
+    }
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "streamType", {
+        //#region IMediaSubscriber
+        get: function get() {
+            return this._subscriberParams.streamType;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "container", {
+        get: function get() {
+            return this._subscriberParams.container;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "isPlaying", {
+        get: function get() {
+            return this._isPlaying;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "isSoundMuted", {
+        get: function get() {
+            if (!this._mediaElement) {
+                return true;
+            }
+            return this._mediaElement.muted;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "hasAudio", {
+        get: function get() {
+            return this._hasAudio;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "hasVideo", {
+        get: function get() {
+            return this._hasVideo;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "mediaElement", {
+        get: function get() {
+            return this._mediaElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "videoWidth", {
+        get: function get() {
+            return this.mediaElement ? this.mediaElement.videoWidth : 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "videoHeight", {
+        get: function get() {
+            return this.mediaElement ? this.mediaElement.videoHeight : 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "renderWidth", {
+        get: function get() {
+            return this.container.offsetWidth;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TechseeMediaSubscriber.prototype, "renderHeight", {
+        get: function get() {
+            return this.container.offsetHeight;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TechseeMediaSubscriber.prototype.muteSound = function (isMuted) {
+        this.throwIfDisposed();
+        trace.info('Subscriber mute change - isMuted =', isMuted);
+        if (this._mediaElement && this._mediaElement.muted !== isMuted) {
+            this._mediaElement.muted = isMuted;
+            this.emitEvent(privateEvents.STREAM_STATE_CHANGE);
+        }
+    };
+    TechseeMediaSubscriber.prototype.onStateChanged = function (callback) {
+        this.throwIfDisposed();
+        this._emitter.on(privateEvents.STREAM_STATE_CHANGE, callback);
+    };
+    TechseeMediaSubscriber.prototype.onDispose = function (callback) {
+        this.throwIfDisposed();
+        this._emitter.on(privateEvents.SUBSCRIBER_DISPOSE, callback);
+    };
+    //#endregion
+    //#region Non Interface Methods
+    TechseeMediaSubscriber.prototype.renderStream = function (stream) {
+        var _this = this;
+        this.throwIfDisposed();
+        this.stopRenderInternal().then(function () {
+            return MediaDomUtils_1.renderMediaStreamToVideoEl(_this.container, stream.mediaStream);
+        }).then(function (videoEl) {
+            _this._hasAudio = stream.mediaStream.getAudioTracks().length > 0;
+            _this._hasVideo = stream.mediaStream.getVideoTracks().length > 0;
+            _this.setPlayingState(videoEl, stream.streamKind);
+        }).catch(function (error) {
+            trace.warn('Error while rendering stream on video element', error);
+        });
+    };
+    TechseeMediaSubscriber.prototype.stopRendering = function () {
+        var _this = this;
+        return this.stopRenderInternal().then(function () {
+            return _this.setPlayingState();
+        });
+    };
+    TechseeMediaSubscriber.prototype.dispose = function () {
+        if (this._isDisposed) {
+            return;
+        }
+        this.stopRendering().catch(function () {
+            return undefined;
+        });
+        this._isDisposed = true;
+        this._emitter.removeAllListeners();
+        trace.info('Subscriber disposed');
+        this.emitEvent(privateEvents.SUBSCRIBER_DISPOSE);
+    };
+    //#endregion
+    TechseeMediaSubscriber.prototype.setPlayingState = function (mediaElement, streamKind) {
+        var _this = this;
+        this._isPlaying = !!mediaElement;
+        this._mediaElement = mediaElement || null;
+        var finalize = function finalize() {
+            _this.emitEvent(privateEvents.STREAM_STATE_CHANGE);
+            trace.info("Video element " + (streamKind || '') + " " + (_this.isPlaying ? 'play' : 'stop') + " success");
+        };
+        if (this._mediaElement && streamKind === MediaConstants_1.KnownMediaStreamKind.Video) {
+            if (this._mediaElement.videoHeight === 0) {
+                var resizeHandler_1 = function resizeHandler_1() {
+                    finalize();
+                    _this._mediaElement && _this._mediaElement.removeEventListener('resize', resizeHandler_1);
+                    _this._mediaElement && _this._mediaElement.addEventListener('resize', _this.videoResizeHandler);
+                };
+                //Todo actually, from here we can know on dimensions changes
+                this._mediaElement.addEventListener('resize', resizeHandler_1, false);
+            } else {
+                this._mediaElement.addEventListener('resize', this.videoResizeHandler);
+                finalize();
+            }
+        } else {
+            finalize();
+        }
+    };
+    TechseeMediaSubscriber.prototype.videoResizeHandler = function () {
+        trace.info("Video resize, new size = w: " + this.videoWidth + " h:" + this.videoHeight);
+        this.emitEvent(privateEvents.STREAM_STATE_CHANGE);
+    };
+    TechseeMediaSubscriber.prototype.stopRenderInternal = function () {
+        if (this._mediaElement && document.body.contains(this._mediaElement)) {
+            return MediaDomUtils_1.removeVideoElementFromDom(this._mediaElement);
+        }
+        return Promise.resolve();
+    };
+    TechseeMediaSubscriber.prototype.emitEvent = function (event, eventArgs) {
+        var _this = this;
+        setTimeout(function () {
+            _this._emitter.emit(event, eventArgs);
+        });
+    };
+    TechseeMediaSubscriber.prototype.throwIfDisposed = function () {
+        if (this._isDisposed) {
+            throw new Error('Subscriber is already disposed');
+        }
+    };
+    return TechseeMediaSubscriber;
+}();
+exports.TechseeMediaSubscriber = TechseeMediaSubscriber;
+
+//# sourceMappingURL=MediaSubscriber.js.map
+//# sourceMappingURL=MediaSubscriber.js.map

package/lib/MediaSubscriber.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MediaSubscriber.js","../src/MediaSubscriber.ts"],"names":["Object","defineProperty","exports","value","events_1","require","MediaDomUtils_1","MediaConstants_1","MediaTracer_1","trace","getMediaTracer","privateEvents","TechseeMediaSubscriber","subscriberParams","_isDisposed","_isPlaying","_hasVideo","_hasAudio","_mediaElement","info","videoResizeHandler","bind","_emitter","EventEmitter","_subscriberParams","prototype","get","streamType","enumerable","configurable","container","muted","mediaElement","videoWidth","videoHeight","offsetWidth","offsetHeight","muteSound","isMuted","throwIfDisposed","emitEvent","STREAM_STATE_CHANGE","onStateChanged","callback","on","onDispose","SUBSCRIBER_DISPOSE","renderStream","stream","_this","stopRenderInternal","then","renderMediaStreamToVideoEl","mediaStream","videoEl","getAudioTracks","length","getVideoTracks","setPlayingState","streamKind","catch","error","warn","stopRendering","dispose","undefined","removeAllListeners","finalize","isPlaying","KnownMediaStreamKind","Video","resizeHandler_1","removeEventListener","addEventListener","document","body","contains","removeVideoElementFromDom","Promise","resolve","event","eventArgs","setTimeout","emit","Error"],"mappings":"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","file":"MediaSubscriber.js","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar events_1 = require(\"events\");\nvar MediaDomUtils_1 = require(\"./MediaUtils/MediaDomUtils\");\nvar MediaConstants_1 = require(\"./MediaConstants\");\nvar MediaTracer_1 = require(\"./MediaUtils/MediaTracer\");\nvar trace = MediaTracer_1.getMediaTracer('MediaSubscriber');\nvar privateEvents;\n(function (privateEvents) {\n    privateEvents[\"STREAM_STATE_CHANGE\"] = \"STREAM_STATE_CHANGE\";\n    privateEvents[\"SUBSCRIBER_DISPOSE\"] = \"SUBSCRIBER_DISPOSE\";\n})(privateEvents || (privateEvents = {}));\nvar TechseeMediaSubscriber = /** @class */ (function () {\n    function TechseeMediaSubscriber(subscriberParams) {\n        this._isDisposed = false;\n        this._isPlaying = false;\n        this._hasVideo = false;\n        this._hasAudio = false;\n        this._mediaElement = null;\n        trace.info('Subscriber created');\n        this.videoResizeHandler = this.videoResizeHandler.bind(this);\n        this._emitter = new events_1.EventEmitter();\n        this._subscriberParams = subscriberParams;\n    }\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"streamType\", {\n        //#region IMediaSubscriber\n        get: function () {\n            return this._subscriberParams.streamType;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"container\", {\n        get: function () {\n            return this._subscriberParams.container;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"isPlaying\", {\n        get: function () {\n            return this._isPlaying;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"isSoundMuted\", {\n        get: function () {\n            if (!this._mediaElement) {\n                return true;\n            }\n            return this._mediaElement.muted;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"hasAudio\", {\n        get: function () {\n            return this._hasAudio;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"hasVideo\", {\n        get: function () {\n            return this._hasVideo;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"mediaElement\", {\n        get: function () {\n            return this._mediaElement;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"videoWidth\", {\n        get: function () {\n            return this.mediaElement ? this.mediaElement.videoWidth : 0;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"videoHeight\", {\n        get: function () {\n            return this.mediaElement ? this.mediaElement.videoHeight : 0;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"renderWidth\", {\n        get: function () {\n            return this.container.offsetWidth;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    Object.defineProperty(TechseeMediaSubscriber.prototype, \"renderHeight\", {\n        get: function () {\n            return this.container.offsetHeight;\n        },\n        enumerable: true,\n        configurable: true\n    });\n    TechseeMediaSubscriber.prototype.muteSound = function (isMuted) {\n        this.throwIfDisposed();\n        trace.info('Subscriber mute change - isMuted =', isMuted);\n        if (this._mediaElement && this._mediaElement.muted !== isMuted) {\n            this._mediaElement.muted = isMuted;\n            this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n        }\n    };\n    TechseeMediaSubscriber.prototype.onStateChanged = function (callback) {\n        this.throwIfDisposed();\n        this._emitter.on(privateEvents.STREAM_STATE_CHANGE, callback);\n    };\n    TechseeMediaSubscriber.prototype.onDispose = function (callback) {\n        this.throwIfDisposed();\n        this._emitter.on(privateEvents.SUBSCRIBER_DISPOSE, callback);\n    };\n    //#endregion\n    //#region Non Interface Methods\n    TechseeMediaSubscriber.prototype.renderStream = function (stream) {\n        var _this = this;\n        this.throwIfDisposed();\n        this.stopRenderInternal().then(function () { return MediaDomUtils_1.renderMediaStreamToVideoEl(_this.container, stream.mediaStream); })\n            .then(function (videoEl) {\n            _this._hasAudio = stream.mediaStream.getAudioTracks().length > 0;\n            _this._hasVideo = stream.mediaStream.getVideoTracks().length > 0;\n            _this.setPlayingState(videoEl, stream.streamKind);\n        })\n            .catch(function (error) {\n            trace.warn('Error while rendering stream on video element', error);\n        });\n    };\n    TechseeMediaSubscriber.prototype.stopRendering = function () {\n        var _this = this;\n        return this.stopRenderInternal().then(function () { return _this.setPlayingState(); });\n    };\n    TechseeMediaSubscriber.prototype.dispose = function () {\n        if (this._isDisposed) {\n            return;\n        }\n        this.stopRendering().catch(function () { return undefined; });\n        this._isDisposed = true;\n        this._emitter.removeAllListeners();\n        trace.info('Subscriber disposed');\n        this.emitEvent(privateEvents.SUBSCRIBER_DISPOSE);\n    };\n    //#endregion\n    TechseeMediaSubscriber.prototype.setPlayingState = function (mediaElement, streamKind) {\n        var _this = this;\n        this._isPlaying = !!mediaElement;\n        this._mediaElement = mediaElement || null;\n        var finalize = function () {\n            _this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n            trace.info(\"Video element \" + (streamKind || '') + \" \" + (_this.isPlaying ? 'play' : 'stop') + \" success\");\n        };\n        if (this._mediaElement && streamKind === MediaConstants_1.KnownMediaStreamKind.Video) {\n            if (this._mediaElement.videoHeight === 0) {\n                var resizeHandler_1 = function () {\n                    finalize();\n                    _this._mediaElement && _this._mediaElement.removeEventListener('resize', resizeHandler_1);\n                    _this._mediaElement && _this._mediaElement.addEventListener('resize', _this.videoResizeHandler);\n                };\n                //Todo actually, from here we can know on dimensions changes\n                this._mediaElement.addEventListener('resize', resizeHandler_1, false);\n            }\n            else {\n                this._mediaElement.addEventListener('resize', this.videoResizeHandler);\n                finalize();\n            }\n        }\n        else {\n            finalize();\n        }\n    };\n    TechseeMediaSubscriber.prototype.videoResizeHandler = function () {\n        trace.info(\"Video resize, new size = w: \" + this.videoWidth + \" h:\" + this.videoHeight);\n        this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n    };\n    TechseeMediaSubscriber.prototype.stopRenderInternal = function () {\n        if (this._mediaElement && document.body.contains(this._mediaElement)) {\n            return MediaDomUtils_1.removeVideoElementFromDom(this._mediaElement);\n        }\n        return Promise.resolve();\n    };\n    TechseeMediaSubscriber.prototype.emitEvent = function (event, eventArgs) {\n        var _this = this;\n        setTimeout(function () {\n            _this._emitter.emit(event, eventArgs);\n        });\n    };\n    TechseeMediaSubscriber.prototype.throwIfDisposed = function () {\n        if (this._isDisposed) {\n            throw new Error('Subscriber is already disposed');\n        }\n    };\n    return TechseeMediaSubscriber;\n}());\nexports.TechseeMediaSubscriber = TechseeMediaSubscriber;\n\n//# sourceMappingURL=MediaSubscriber.js.map\n","import {EventEmitter} from 'events';\nimport {Nullable} from '@techsee/techsee-common';\nimport {IMediaSubscriber, MediaSubscriberParams} from './MediaContracts';\nimport {TechseeMediaStream} from './TechseeMediaStream';\nimport {removeVideoElementFromDom, renderMediaStreamToVideoEl} from './MediaUtils/MediaDomUtils';\nimport {KnownMediaStream, KnownMediaStreamKind} from './MediaConstants';\n\nimport {getMediaTracer} from './MediaUtils/MediaTracer';\n\nconst trace = getMediaTracer('MediaSubscriber');\n\nenum privateEvents {\n    STREAM_STATE_CHANGE = 'STREAM_STATE_CHANGE',\n    SUBSCRIBER_DISPOSE = 'SUBSCRIBER_DISPOSE'\n}\n\nexport class TechseeMediaSubscriber implements IMediaSubscriber {\n    private _emitter: EventEmitter;\n    private _isDisposed: boolean = false;\n    private _isPlaying: boolean = false;\n    private _hasVideo: boolean = false;\n    private _hasAudio: boolean = false;\n    private _mediaElement: Nullable<HTMLVideoElement> = null;\n\n    private readonly _subscriberParams: MediaSubscriberParams;\n\n    constructor(subscriberParams: MediaSubscriberParams) {\n        trace.info('Subscriber created');\n\n        this.videoResizeHandler = this.videoResizeHandler.bind(this);\n\n        this._emitter = new EventEmitter();\n        this._subscriberParams = subscriberParams;\n    }\n\n    //#region IMediaSubscriber\n\n    get streamType(): KnownMediaStream {\n        return this._subscriberParams.streamType;\n    }\n\n    get container(): HTMLDivElement {\n        return this._subscriberParams.container;\n    }\n\n    get isPlaying(): boolean {\n        return this._isPlaying;\n    }\n\n    get isSoundMuted(): boolean {\n        if (!this._mediaElement) {\n            return true;\n        }\n\n        return this._mediaElement.muted;\n    }\n\n    get hasAudio(): boolean {\n        return this._hasAudio;\n    }\n\n    get hasVideo(): boolean {\n        return this._hasVideo;\n    }\n\n    get mediaElement(): Nullable<HTMLVideoElement> {\n        return this._mediaElement;\n    }\n\n    get videoWidth(): number {\n        return this.mediaElement ? this.mediaElement.videoWidth : 0;\n    }\n\n    get videoHeight(): number {\n        return this.mediaElement ? this.mediaElement.videoHeight : 0;\n    }\n\n    get renderWidth(): number {\n        return this.container.offsetWidth;\n    }\n\n    get renderHeight(): number {\n        return this.container.offsetHeight;\n    }\n\n    muteSound(isMuted: boolean): void {\n        this.throwIfDisposed();\n        trace.info('Subscriber mute change - isMuted =', isMuted);\n        if (this._mediaElement && this._mediaElement.muted !== isMuted) {\n            this._mediaElement.muted = isMuted;\n            this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n        }\n    }\n\n    onStateChanged(callback: () => void): void {\n        this.throwIfDisposed();\n        this._emitter.on(privateEvents.STREAM_STATE_CHANGE, callback);\n    }\n\n    onDispose(callback: () => void): void {\n        this.throwIfDisposed();\n        this._emitter.on(privateEvents.SUBSCRIBER_DISPOSE, callback);\n    }\n\n    //#endregion\n\n    //#region Non Interface Methods\n\n    renderStream(stream: TechseeMediaStream): void {\n        this.throwIfDisposed();\n        this.stopRenderInternal().then(() => renderMediaStreamToVideoEl(this.container, stream.mediaStream))\n            .then((videoEl) => {\n                this._hasAudio = stream.mediaStream.getAudioTracks().length > 0;\n                this._hasVideo = stream.mediaStream.getVideoTracks().length > 0;\n\n                this.setPlayingState(videoEl, stream.streamKind);\n            })\n            .catch((error) => {\n                trace.warn('Error while rendering stream on video element', error);\n            });\n    }\n\n    stopRendering(): Promise<void> {\n        return this.stopRenderInternal().then(() => this.setPlayingState());\n    }\n\n    dispose(): void {\n        if (this._isDisposed) {\n            return;\n        }\n\n        this.stopRendering().catch(() => undefined);\n\n\n        this._isDisposed = true;\n        this._emitter.removeAllListeners();\n        trace.info('Subscriber disposed');\n        this.emitEvent(privateEvents.SUBSCRIBER_DISPOSE);\n    }\n\n    //#endregion\n\n    private setPlayingState(mediaElement?: HTMLVideoElement, streamKind?: KnownMediaStreamKind): void {\n        this._isPlaying = !!mediaElement;\n        this._mediaElement = mediaElement || null;\n\n        const finalize = (): void => {\n            this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n            trace.info(`Video element ${streamKind || ''} ${this.isPlaying ? 'play' : 'stop'} success`);\n        };\n\n        if (this._mediaElement && streamKind === KnownMediaStreamKind.Video) {\n            if (this._mediaElement.videoHeight === 0) {\n                const resizeHandler = (): void => {\n                    finalize();\n                    this._mediaElement && this._mediaElement.removeEventListener('resize', resizeHandler);\n                    this._mediaElement && this._mediaElement.addEventListener('resize', this.videoResizeHandler);\n                };\n\n                //Todo actually, from here we can know on dimensions changes\n                this._mediaElement.addEventListener('resize', resizeHandler, false);\n            } else {\n                this._mediaElement.addEventListener('resize', this.videoResizeHandler);\n                finalize();\n            }\n        } else {\n            finalize();\n        }\n    }\n\n    private videoResizeHandler(): void {\n        trace.info(`Video resize, new size = w: ${this.videoWidth} h:${this.videoHeight}`);\n        this.emitEvent(privateEvents.STREAM_STATE_CHANGE);\n    }\n\n    private stopRenderInternal() {\n        if (this._mediaElement && document.body.contains(this._mediaElement)) {\n            return removeVideoElementFromDom(this._mediaElement);\n        }\n\n        return Promise.resolve();\n    }\n\n    private emitEvent(event: string, eventArgs?: any): void {\n        setTimeout(() => {\n            this._emitter.emit(event, eventArgs);\n        });\n    }\n\n    private throwIfDisposed(): void {\n        if (this._isDisposed) {\n            throw new Error('Subscriber is already disposed');\n        }\n    }\n}\n"]}

package/lib/MediaUtils/Compatibility.d.ts

@@ -0,0 +1,11 @@
+declare global {
+    interface Window {
+        OT: any;
+        OTPlugin: any;
+    }
+}
+export declare const WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS = 10;
+export declare const WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL = 500;
+export declare function waitForOpenTokIsLoaded(): Promise<void>;
+export declare function enumerateMediaDevices(): Promise<MediaDeviceInfo[]>;
+export declare function isVideoPlaySupportedOnDevice(isOpenTokService: boolean): Promise<boolean>;

package/lib/MediaUtils/Compatibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MediaUtils/Compatibility.ts"],"names":[],"mappings":"AAEA,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,EAAE,EAAE,GAAG,CAAC;QACR,QAAQ,EAAE,GAAG,CAAC;KACjB;CACJ;AAOD,eAAO,MAAM,4CAA4C,KAAK,CAAC;AAC/D,eAAO,MAAM,wCAAwC,MAAM,CAAC;AAmB5D,wBAAgB,sBAAsB,IAAI,OAAO,CAAC,IAAI,CAAC,CAmBtD;AAED,wBAAgB,qBAAqB,IAAI,OAAO,CAAC,eAAe,EAAE,CAAC,CAUlE;AAED,wBAAgB,4BAA4B,CAAC,gBAAgB,EAAE,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAcxF","file":"Compatibility.d.ts","sourcesContent":["declare const require: any;\n\ndeclare global {\n    interface Window {\n        OT: any;\n        OTPlugin: any;\n    }\n}\n\n//@ts-ignore\nimport {TsEnvironmentDetect} from '@techsee/techsee-common/lib/helpers/ts-environment-detect';\n\n// Grace period to wait in the unlikely case that Opentok has not finished initializing,\n// and a session initialization was requested\nexport const WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS = 10;\nexport const WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL = 500;\n\nconst environmentDetect = new TsEnvironmentDetect();\nconst isIE11 = environmentDetect.isIE11();\n\nif (isIE11) {\n    require('../webrtc-ie-shim.js');\n} else if (!(environmentDetect.isChrome() && (environmentDetect.majorVersion() < 49))) {\n    require('webrtc-adapter/src/js/adapter_core'); // eslint-disable-line global-require\n}\n\nfunction _isOTDefined(): boolean {\n    try {\n        return !!window.OT;\n    } catch (e) {\n        return false;\n    }\n}\n\nexport function waitForOpenTokIsLoaded(): Promise<void> {\n    if (_isOTDefined()) {\n        return Promise.resolve();\n    }\n\n    let isDefined = false;\n\n    return (Promise as any).reduce(\n        new Array(WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS),\n        () => {\n            if (isDefined || _isOTDefined()) {\n                isDefined = true;\n\n                return Promise.resolve();\n            }\n\n            return (Promise as any).delay(WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL);\n        }, 0)\n        .then(() => isDefined || Promise.reject(new Error('OT is undefined')));\n}\n\nexport function enumerateMediaDevices(): Promise<MediaDeviceInfo[]> {\n    return new Promise((resolve, reject) => {\n        if ((typeof window.OT !== 'undefined') && window.OT && window.OT.getDevices) {\n            window.OT.getDevices((error: any, devices: any) => (error ? reject(error) : resolve(devices)));\n        } else if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {\n            navigator.mediaDevices.enumerateDevices().then(resolve).catch(reject);\n        } else {\n            reject(new Error('Enumerating media devices is not supported'));\n        }\n    });\n}\n\nexport function isVideoPlaySupportedOnDevice(isOpenTokService: boolean): Promise<boolean> {\n    if (!isIE11) {\n        return Promise.resolve(true);\n    }\n\n    if (isOpenTokService) {\n        return waitForOpenTokIsLoaded().then(() => window.OT && window.OTPlugin && window.OTPlugin.isInstalled && window.OTPlugin.isInstalled());\n    }\n\n    if ((window as any).WebRTCAdapter) {\n        return Promise.resolve(true);\n    }\n\n    return Promise.resolve(false);\n}\n"]}

package/lib/MediaUtils/Compatibility.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+//@ts-ignore
+var ts_environment_detect_1 = require("@techsee/techsee-common/lib/helpers/ts-environment-detect");
+// Grace period to wait in the unlikely case that Opentok has not finished initializing,
+// and a session initialization was requested
+exports.WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS = 10;
+exports.WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL = 500;
+var environmentDetect = new ts_environment_detect_1.TsEnvironmentDetect();
+var isIE11 = environmentDetect.isIE11();
+if (isIE11) {
+    require('../webrtc-ie-shim.js');
+} else if (!(environmentDetect.isChrome() && environmentDetect.majorVersion() < 49)) {
+    require('webrtc-adapter/src/js/adapter_core'); // eslint-disable-line global-require
+}
+function _isOTDefined() {
+    try {
+        return !!window.OT;
+    } catch (e) {
+        return false;
+    }
+}
+function waitForOpenTokIsLoaded() {
+    if (_isOTDefined()) {
+        return Promise.resolve();
+    }
+    var isDefined = false;
+    return Promise.reduce(new Array(exports.WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS), function () {
+        if (isDefined || _isOTDefined()) {
+            isDefined = true;
+            return Promise.resolve();
+        }
+        return Promise.delay(exports.WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL);
+    }, 0).then(function () {
+        return isDefined || Promise.reject(new Error('OT is undefined'));
+    });
+}
+exports.waitForOpenTokIsLoaded = waitForOpenTokIsLoaded;
+function enumerateMediaDevices() {
+    return new Promise(function (resolve, reject) {
+        if (typeof window.OT !== 'undefined' && window.OT && window.OT.getDevices) {
+            window.OT.getDevices(function (error, devices) {
+                return error ? reject(error) : resolve(devices);
+            });
+        } else if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
+            navigator.mediaDevices.enumerateDevices().then(resolve).catch(reject);
+        } else {
+            reject(new Error('Enumerating media devices is not supported'));
+        }
+    });
+}
+exports.enumerateMediaDevices = enumerateMediaDevices;
+function isVideoPlaySupportedOnDevice(isOpenTokService) {
+    if (!isIE11) {
+        return Promise.resolve(true);
+    }
+    if (isOpenTokService) {
+        return waitForOpenTokIsLoaded().then(function () {
+            return window.OT && window.OTPlugin && window.OTPlugin.isInstalled && window.OTPlugin.isInstalled();
+        });
+    }
+    if (window.WebRTCAdapter) {
+        return Promise.resolve(true);
+    }
+    return Promise.resolve(false);
+}
+exports.isVideoPlaySupportedOnDevice = isVideoPlaySupportedOnDevice;
+
+//# sourceMappingURL=Compatibility.js.map
+//# sourceMappingURL=Compatibility.js.map

package/lib/MediaUtils/Compatibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MediaUtils/Compatibility.js"],"names":["Object","defineProperty","exports","value","ts_environment_detect_1","require","WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS","WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL","environmentDetect","TsEnvironmentDetect","isIE11","isChrome","majorVersion","_isOTDefined","window","OT","e","waitForOpenTokIsLoaded","Promise","resolve","isDefined","reduce","Array","delay","then","reject","Error","enumerateMediaDevices","getDevices","error","devices","navigator","mediaDevices","enumerateDevices","catch","isVideoPlaySupportedOnDevice","isOpenTokService","OTPlugin","isInstalled","WebRTCAdapter"],"mappings":"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","file":"Compatibility.js","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\n//@ts-ignore\nvar ts_environment_detect_1 = require(\"@techsee/techsee-common/lib/helpers/ts-environment-detect\");\n// Grace period to wait in the unlikely case that Opentok has not finished initializing,\n// and a session initialization was requested\nexports.WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS = 10;\nexports.WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL = 500;\nvar environmentDetect = new ts_environment_detect_1.TsEnvironmentDetect();\nvar isIE11 = environmentDetect.isIE11();\nif (isIE11) {\n    require('../webrtc-ie-shim.js');\n}\nelse if (!(environmentDetect.isChrome() && (environmentDetect.majorVersion() < 49))) {\n    require('webrtc-adapter/src/js/adapter_core'); // eslint-disable-line global-require\n}\nfunction _isOTDefined() {\n    try {\n        return !!window.OT;\n    }\n    catch (e) {\n        return false;\n    }\n}\nfunction waitForOpenTokIsLoaded() {\n    if (_isOTDefined()) {\n        return Promise.resolve();\n    }\n    var isDefined = false;\n    return Promise.reduce(new Array(exports.WAIT_FOR_OPENTOK_INITIALIZATION_MAX_ATTEMPTS), function () {\n        if (isDefined || _isOTDefined()) {\n            isDefined = true;\n            return Promise.resolve();\n        }\n        return Promise.delay(exports.WAIT_FOR_OPENTOK_INITIALIZATION_INTERVAL);\n    }, 0)\n        .then(function () { return isDefined || Promise.reject(new Error('OT is undefined')); });\n}\nexports.waitForOpenTokIsLoaded = waitForOpenTokIsLoaded;\nfunction enumerateMediaDevices() {\n    return new Promise(function (resolve, reject) {\n        if ((typeof window.OT !== 'undefined') && window.OT && window.OT.getDevices) {\n            window.OT.getDevices(function (error, devices) { return (error ? reject(error) : resolve(devices)); });\n        }\n        else if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {\n            navigator.mediaDevices.enumerateDevices().then(resolve).catch(reject);\n        }\n        else {\n            reject(new Error('Enumerating media devices is not supported'));\n        }\n    });\n}\nexports.enumerateMediaDevices = enumerateMediaDevices;\nfunction isVideoPlaySupportedOnDevice(isOpenTokService) {\n    if (!isIE11) {\n        return Promise.resolve(true);\n    }\n    if (isOpenTokService) {\n        return waitForOpenTokIsLoaded().then(function () { return window.OT && window.OTPlugin && window.OTPlugin.isInstalled && window.OTPlugin.isInstalled(); });\n    }\n    if (window.WebRTCAdapter) {\n        return Promise.resolve(true);\n    }\n    return Promise.resolve(false);\n}\nexports.isVideoPlaySupportedOnDevice = isVideoPlaySupportedOnDevice;\n\n//# sourceMappingURL=Compatibility.js.map\n"]}

package/lib/MediaUtils/MediaDomUtils.d.ts

@@ -0,0 +1,4 @@
+import { SnapshotOptions } from '../MediaContracts';
+export declare function renderMediaStreamToVideoEl(container: HTMLDivElement, mediaStream: MediaStream): Promise<HTMLVideoElement>;
+export declare function removeVideoElementFromDom(videoEl: HTMLVideoElement): Promise<void>;
+export declare function getSnapshotFromMediaStream(mediaStream: MediaStream, snapshotOptions?: SnapshotOptions): Promise<string>;

package/lib/MediaUtils/MediaDomUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MediaUtils/MediaDomUtils.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAOlD,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,GAAG,OAAO,CAAC,gBAAgB,CAAC,CA8EzH;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAgBlF;AAOD,wBAAgB,0BAA0B,CAAC,WAAW,EAAE,WAAW,EAAE,eAAe,GAAE,eAAiC,GAAG,OAAO,CAAC,MAAM,CAAC,CAqGxI","file":"MediaDomUtils.d.ts","sourcesContent":["import isUndefined from 'lodash/isUndefined';\n\n//@ts-ignore\nimport {TsEnvironmentDetect} from '@techsee/techsee-common/lib/helpers/ts-environment-detect';\nimport {repeatWithTimeout} from '@techsee/techsee-common/lib/core/retry-with-timeout';\nimport {SnapshotOptions} from '../MediaContracts';\nimport {getMediaTracer} from './MediaTracer';\n\nconst trace = getMediaTracer('DomUtils');\n\nconst isIE11 = (new TsEnvironmentDetect()).isIE11();\n\nexport function renderMediaStreamToVideoEl(container: HTMLDivElement, mediaStream: MediaStream): Promise<HTMLVideoElement> {\n    return new Promise((resolve, reject) => {\n        if (!document.body.contains(container)) {\n            reject(new Error('Cannot render to container that is not attached to dom'));\n\n            return;\n        }\n\n        const doResolve = (videoEl: HTMLVideoElement): void => {\n            trace.info('Video element created successfully', {videoEl});\n            resolve(videoEl);\n        };\n\n        const videoEl = document.createElement('video') as any;\n\n        videoEl.muted = true;\n        videoEl.playsInline = true;\n\n        if (isIE11 && (window as any).WebRTCAdapter) {\n            container.appendChild(videoEl);\n            (window as any).WebRTCAdapter.bindVideoElement(videoEl);\n        }\n\n        videoEl.srcObject = mediaStream;\n\n        if (!isIE11) {\n            // Hack to override behavior introduced by Chrome/FF that unmuted video elements can't auto play\n            videoEl.setAttribute('muted', '');\n        }\n\n        try {\n            const playRes = videoEl.play();\n\n            if (playRes && playRes.then) {\n                playRes.then(() => {\n                    trace.info('Video element play success');\n                    if (!isIE11) {\n                        doResolve(videoEl);\n                    }\n                });\n            } else {\n                doResolve(videoEl);\n            }\n\n            if (playRes && playRes.catch) {\n                playRes.catch((error: any) => {\n                    trace.error('Reject while executing play method on video element', error);\n                    reject(error);\n                });\n            }\n        } catch (error) {\n            reject(error);\n            trace.error('Error while executing play method on video element', error);\n\n            return;\n        }\n\n\n        if (isIE11) {\n            const handleComplete = (): boolean => videoEl.parentElement.tagName !== 'OBJECT';\n\n            const waitForObjectSettings = {intervalInMs: 30, timeoutInMs: 200};\n\n            repeatWithTimeout(handleComplete, waitForObjectSettings)\n                .then(() => {\n                    //We will wait, until video is played, then we resolve\n                    const isVideoPlaying = (): boolean => videoEl.videoHeight <= 0 || videoEl.videoWidth <= 0;\n                    const waitForVideoSettings = {intervalInMs: 50, timeoutInMs: 10000};\n\n                    repeatWithTimeout(isVideoPlaying, waitForVideoSettings)\n                        .then(() => doResolve(videoEl.parentElement))\n                        .catch(() => reject(new Error('Timeout while waiting for video to play')));\n                });\n        } else {\n            container.appendChild(videoEl);\n            //doResolve(videoEl);\n        }\n    });\n}\n\nexport function removeVideoElementFromDom(videoEl: HTMLVideoElement): Promise<void> {\n    return new Promise((resolve) => {\n        if (isIE11 && (window as any).WebRTCAdapter) {\n            (window as any).WebRTCAdapter.unBindVideoElement(videoEl);\n            if (videoEl && videoEl.parentNode && videoEl.parentNode.removeChild) {\n                videoEl.parentNode.removeChild(videoEl);\n                trace.info('Video element removed successfully');\n            } else {\n                trace.warn('Video element not removed', videoEl, videoEl.parentNode);\n            }\n        } else {\n            videoEl.remove();\n        }\n\n        resolve();\n    });\n}\n\nconst defaultSnapshot: SnapshotOptions = {\n    format: 'image/png',\n    quality: 0.92\n};\n\nexport function getSnapshotFromMediaStream(mediaStream: MediaStream, snapshotOptions: SnapshotOptions = defaultSnapshot): Promise<string> {\n    const {format, quality, x, y, w, h} = snapshotOptions;\n    const crop = !isUndefined(x) && !isUndefined(y) && !isUndefined(w) && !isUndefined(h);\n    const resize = !crop && (!isUndefined(w) || !isUndefined(h));\n\n    return new Promise((resolve, reject) => {\n\n        const tempContainer = document.createElement('div');\n\n        tempContainer.style.cssText = 'position:absolute;left: -10000px;';\n        document.body.appendChild(tempContainer);\n\n        const doneFn = (err: any, image?: any): void => {\n            if (err) {\n                reject(err);\n\n                return;\n            }\n\n            setTimeout(() => {\n                document.body.removeChild(tempContainer);\n                if (!err) {\n                    resolve(image);\n                }\n            }, 50);\n        };\n\n        renderMediaStreamToVideoEl(tempContainer, mediaStream)\n            .then((videoElement) => Promise.resolve(isIE11 ? getImgDataIE11(videoElement) : getImgData(videoElement))\n                .then((imgData: any) => {\n                    if (!imgData || imgData.length < 10) {\n                        throw new Error('Failed to create a snapshot - imgData is null or empty');\n                    }\n\n                    doneFn(null, imgData);\n                }))\n            .catch((error) => {\n                doneFn(error || new Error('Failed to create a snapshot - can\\'t render MediaStream To VideoEl '));\n            });\n    });\n\n    //Gets image in all browsers except of IE\n    function getImgData(videoElement: HTMLVideoElement): string {\n        const {videoWidth, videoHeight} = videoElement;\n        const canvas = document.createElement('canvas');\n        const ctx = canvas.getContext('2d')!;\n\n        if (crop) {\n            canvas.width = w;\n            canvas.height = h;\n\n            ctx.drawImage(videoElement, x, y, w, h, 0, 0, w, h);\n        } else if (resize) {\n            canvas.width = w;\n            canvas.height = h;\n\n            ctx.drawImage(videoElement, 0, 0, w, h);\n        } else {\n            canvas.height = videoHeight;\n            canvas.width = videoWidth;\n\n            ctx.drawImage(videoElement, 0, 0);\n        }\n\n        return canvas.toDataURL(format, quality);\n    }\n\n    //Gets image in IE browser. There should be TechSee IE11 plugin or OpenTok plugin installed.\n    function getImgDataIE11(videoElement: any): Promise<string> {\n        return new Promise((resolve) => {\n            const {videoWidth, videoHeight} = videoElement;\n            const canvas = document.createElement('canvas');\n            const ctx = canvas.getContext('2d')!;\n\n            if (crop || resize) {\n                canvas.width = w;\n                canvas.height = h;\n            } else {\n                canvas.height = videoHeight;\n                canvas.width = videoWidth;\n            }\n\n            function _drawAndRemove(image: any): string {\n                if (crop) {\n                    ctx.drawImage(image, x, y, w, h, 0, 0, w, h);\n                } else if (resize) {\n                    ctx.drawImage(image, 0, 0, w, h);\n                } else {\n                    ctx.drawImage(image, 0, 0, videoWidth, videoHeight);\n                }\n\n                return canvas.toDataURL(format, quality);\n            }\n\n            const base64 = videoElement.getFrame();\n            const image = new Image();\n\n            image.onload = () => resolve(_drawAndRemove(image));\n            image.setAttribute('src', 'data:image/bmp;base64,' + base64);\n        });\n    }\n}\n"]}

package/lib/MediaUtils/MediaDomUtils.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var __importDefault = undefined && undefined.__importDefault || function (mod) {
+    return mod && mod.__esModule ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var isUndefined_1 = __importDefault(require("lodash/isUndefined"));
+//@ts-ignore
+var ts_environment_detect_1 = require("@techsee/techsee-common/lib/helpers/ts-environment-detect");
+var retry_with_timeout_1 = require("@techsee/techsee-common/lib/core/retry-with-timeout");
+var MediaTracer_1 = require("./MediaTracer");
+var trace = MediaTracer_1.getMediaTracer('DomUtils');
+var isIE11 = new ts_environment_detect_1.TsEnvironmentDetect().isIE11();
+function renderMediaStreamToVideoEl(container, mediaStream) {
+    return new Promise(function (resolve, reject) {
+        if (!document.body.contains(container)) {
+            reject(new Error('Cannot render to container that is not attached to dom'));
+            return;
+        }
+        var doResolve = function doResolve(videoEl) {
+            trace.info('Video element created successfully', { videoEl: videoEl });
+            resolve(videoEl);
+        };
+        var videoEl = document.createElement('video');
+        videoEl.muted = true;
+        videoEl.playsInline = true;
+        if (isIE11 && window.WebRTCAdapter) {
+            container.appendChild(videoEl);
+            window.WebRTCAdapter.bindVideoElement(videoEl);
+        }
+        videoEl.srcObject = mediaStream;
+        if (!isIE11) {
+            // Hack to override behavior introduced by Chrome/FF that unmuted video elements can't auto play
+            videoEl.setAttribute('muted', '');
+        }
+        try {
+            var playRes = videoEl.play();
+            if (playRes && playRes.then) {
+                playRes.then(function () {
+                    trace.info('Video element play success');
+                    if (!isIE11) {
+                        doResolve(videoEl);
+                    }
+                });
+            } else {
+                doResolve(videoEl);
+            }
+            if (playRes && playRes.catch) {
+                playRes.catch(function (error) {
+                    trace.error('Reject while executing play method on video element', error);
+                    reject(error);
+                });
+            }
+        } catch (error) {
+            reject(error);
+            trace.error('Error while executing play method on video element', error);
+            return;
+        }
+        if (isIE11) {
+            var handleComplete = function handleComplete() {
+                return videoEl.parentElement.tagName !== 'OBJECT';
+            };
+            var waitForObjectSettings = { intervalInMs: 30, timeoutInMs: 200 };
+            retry_with_timeout_1.repeatWithTimeout(handleComplete, waitForObjectSettings).then(function () {
+                //We will wait, until video is played, then we resolve
+                var isVideoPlaying = function isVideoPlaying() {
+                    return videoEl.videoHeight <= 0 || videoEl.videoWidth <= 0;
+                };
+                var waitForVideoSettings = { intervalInMs: 50, timeoutInMs: 10000 };
+                retry_with_timeout_1.repeatWithTimeout(isVideoPlaying, waitForVideoSettings).then(function () {
+                    return doResolve(videoEl.parentElement);
+                }).catch(function () {
+                    return reject(new Error('Timeout while waiting for video to play'));
+                });
+            });
+        } else {
+            container.appendChild(videoEl);
+            //doResolve(videoEl);
+        }
+    });
+}
+exports.renderMediaStreamToVideoEl = renderMediaStreamToVideoEl;
+function removeVideoElementFromDom(videoEl) {
+    return new Promise(function (resolve) {
+        if (isIE11 && window.WebRTCAdapter) {
+            window.WebRTCAdapter.unBindVideoElement(videoEl);
+            if (videoEl && videoEl.parentNode && videoEl.parentNode.removeChild) {
+                videoEl.parentNode.removeChild(videoEl);
+                trace.info('Video element removed successfully');
+            } else {
+                trace.warn('Video element not removed', videoEl, videoEl.parentNode);
+            }
+        } else {
+            videoEl.remove();
+        }
+        resolve();
+    });
+}
+exports.removeVideoElementFromDom = removeVideoElementFromDom;
+var defaultSnapshot = {
+    format: 'image/png',
+    quality: 0.92
+};
+function getSnapshotFromMediaStream(mediaStream, snapshotOptions) {
+    if (snapshotOptions === void 0) {
+        snapshotOptions = defaultSnapshot;
+    }
+    var format = snapshotOptions.format,
+        quality = snapshotOptions.quality,
+        x = snapshotOptions.x,
+        y = snapshotOptions.y,
+        w = snapshotOptions.w,
+        h = snapshotOptions.h;
+    var crop = !isUndefined_1.default(x) && !isUndefined_1.default(y) && !isUndefined_1.default(w) && !isUndefined_1.default(h);
+    var resize = !crop && (!isUndefined_1.default(w) || !isUndefined_1.default(h));
+    return new Promise(function (resolve, reject) {
+        var tempContainer = document.createElement('div');
+        tempContainer.style.cssText = 'position:absolute;left: -10000px;';
+        document.body.appendChild(tempContainer);
+        var doneFn = function doneFn(err, image) {
+            if (err) {
+                reject(err);
+                return;
+            }
+            setTimeout(function () {
+                document.body.removeChild(tempContainer);
+                if (!err) {
+                    resolve(image);
+                }
+            }, 50);
+        };
+        renderMediaStreamToVideoEl(tempContainer, mediaStream).then(function (videoElement) {
+            return Promise.resolve(isIE11 ? getImgDataIE11(videoElement) : getImgData(videoElement)).then(function (imgData) {
+                if (!imgData || imgData.length < 10) {
+                    throw new Error('Failed to create a snapshot - imgData is null or empty');
+                }
+                doneFn(null, imgData);
+            });
+        }).catch(function (error) {
+            doneFn(error || new Error('Failed to create a snapshot - can\'t render MediaStream To VideoEl '));
+        });
+    });
+    //Gets image in all browsers except of IE
+    function getImgData(videoElement) {
+        var videoWidth = videoElement.videoWidth,
+            videoHeight = videoElement.videoHeight;
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        if (crop) {
+            canvas.width = w;
+            canvas.height = h;
+            ctx.drawImage(videoElement, x, y, w, h, 0, 0, w, h);
+        } else if (resize) {
+            canvas.width = w;
+            canvas.height = h;
+            ctx.drawImage(videoElement, 0, 0, w, h);
+        } else {
+            canvas.height = videoHeight;
+            canvas.width = videoWidth;
+            ctx.drawImage(videoElement, 0, 0);
+        }
+        return canvas.toDataURL(format, quality);
+    }
+    //Gets image in IE browser. There should be TechSee IE11 plugin or OpenTok plugin installed.
+    function getImgDataIE11(videoElement) {
+        return new Promise(function (resolve) {
+            var videoWidth = videoElement.videoWidth,
+                videoHeight = videoElement.videoHeight;
+            var canvas = document.createElement('canvas');
+            var ctx = canvas.getContext('2d');
+            if (crop || resize) {
+                canvas.width = w;
+                canvas.height = h;
+            } else {
+                canvas.height = videoHeight;
+                canvas.width = videoWidth;
+            }
+            function _drawAndRemove(image) {
+                if (crop) {
+                    ctx.drawImage(image, x, y, w, h, 0, 0, w, h);
+                } else if (resize) {
+                    ctx.drawImage(image, 0, 0, w, h);
+                } else {
+                    ctx.drawImage(image, 0, 0, videoWidth, videoHeight);
+                }
+                return canvas.toDataURL(format, quality);
+            }
+            var base64 = videoElement.getFrame();
+            var image = new Image();
+            image.onload = function () {
+                return resolve(_drawAndRemove(image));
+            };
+            image.setAttribute('src', 'data:image/bmp;base64,' + base64);
+        });
+    }
+}
+exports.getSnapshotFromMediaStream = getSnapshotFromMediaStream;
+
+//# sourceMappingURL=MediaDomUtils.js.map
+//# sourceMappingURL=MediaDomUtils.js.map