diff --git a/openvidu-browser/src/OpenVidu/OpenVidu.ts b/openvidu-browser/src/OpenVidu/OpenVidu.ts index 53540a93..fc23effd 100644 --- a/openvidu-browser/src/OpenVidu/OpenVidu.ts +++ b/openvidu-browser/src/OpenVidu/OpenVidu.ts @@ -29,6 +29,7 @@ import { VideoInsertMode } from '../OpenViduInternal/Enums/VideoInsertMode'; import * as screenSharingAuto from '../OpenViduInternal/ScreenSharing/Screen-Capturing-Auto'; import * as screenSharing from '../OpenViduInternal/ScreenSharing/Screen-Capturing'; +import EventEmitter = require('wolfy87-eventemitter'); import RpcBuilder = require('../OpenViduInternal/KurentoUtils/kurento-jsonrpc'); import platform = require('platform'); platform['isIonicIos'] = (platform.product === 'iPhone' || platform.product === 'iPad') && platform.ua!!.indexOf('Safari') === -1; @@ -93,6 +94,10 @@ export class OpenVidu { * @hidden */ libraryVersion: string; + /** + * @hidden + */ + ee = new EventEmitter() constructor() { this.libraryVersion = packageJson.version; @@ -101,7 +106,9 @@ export class OpenVidu { console.info("openvidu-browser version: " + this.libraryVersion); if (platform['isInternetExplorer']) { + console.info("Detected IE Explorer " + platform.version); this.importIEAdapterJS(); + this.importURLLibrary(); } if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') { @@ -763,16 +770,33 @@ export class OpenVidu { private importIEAdapterJS(): void { const moduleSpecifier = 'https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.min.js'; - //Create a script tag var script = document.createElement('script'); - // Assign a URL to the script element script.src = moduleSpecifier; - // Get the first script tag on the page (we'll insert our new one before it) var ref = document.querySelector('script'); - // Insert the new node before the reference node + if (ref && ref.parentNode) { ref.parentNode.insertBefore(script, ref); - console.info("Detected IE Explorer " + platform.version + ". IEAdapter imported"); + console.info("IE AdapterJS imported"); + } + } + + private importURLLibrary(): void { + const moduleSpecifier = 'https://polyfill.io/v3/polyfill.min.js?features=URL'; + const scriptId = 'url-script-element'; + var script = document.createElement('script'); + script.async = false; + script.id = scriptId; + script.src = moduleSpecifier; + script.onload = () => { + // URL feature is now available + this.ee.emitEvent(scriptId, []); + document.getElementById(scriptId)!.classList.add(scriptId); + }; + var ref = document.querySelector('script'); + // Insert the new script node before the first reference node + if (ref && ref.parentNode) { + ref.parentNode.insertBefore(script, ref); + console.info("URL polyfill imported"); } } diff --git a/openvidu-browser/src/OpenVidu/Session.ts b/openvidu-browser/src/OpenVidu/Session.ts index e49b3338..20221b08 100644 --- a/openvidu-browser/src/OpenVidu/Session.ts +++ b/openvidu-browser/src/OpenVidu/Session.ts @@ -143,9 +143,9 @@ export class Session implements EventDispatcher { * */ connect(token: string, metadata?: any): Promise { - return new Promise((resolve, reject) => { + return new Promise(async (resolve, reject) => { - this.processToken(token); + await this.processToken(token); if (this.openvidu.checkSystemRequirements()) { // Early configuration to deactivate automatic subscription to streams @@ -1143,50 +1143,74 @@ export class Session implements EventDispatcher { }); } - private processToken(token: string): void { - const url = new URL(token); - this.sessionId = url.searchParams.get('sessionId'); - const secret = url.searchParams.get('secret'); - const recorder = url.searchParams.get('recorder'); - const turnUsername = url.searchParams.get('turnUsername'); - const turnCredential = url.searchParams.get('turnCredential'); - const role = url.searchParams.get('role'); - const webrtcStatsInterval = url.searchParams.get('webrtcStatsInterval'); - const openviduServerVersion = url.searchParams.get('version'); + private async processToken(token: string): Promise { + return new Promise((resolve, reject) => { - if (!!secret) { - this.openvidu.secret = secret; - } - if (!!recorder) { - this.openvidu.recorder = true; - } - if (!!turnUsername && !!turnCredential) { - const stunUrl = 'stun:' + url.hostname + ':3478'; - const turnUrl1 = 'turn:' + url.hostname + ':3478'; - const turnUrl2 = turnUrl1 + '?transport=tcp'; - this.openvidu.iceServers = [ - { urls: [stunUrl] }, - { urls: [turnUrl1, turnUrl2], username: turnUsername, credential: turnCredential } - ]; - console.log('TURN temp credentials [' + turnUsername + ':' + turnCredential + ']'); - } - if (!!role) { - this.openvidu.role = role; - } - if (!!webrtcStatsInterval) { - this.openvidu.webrtcStatsInterval = +webrtcStatsInterval; - } - if (!!openviduServerVersion) { - console.info("openvidu-server version: " + openviduServerVersion); - if (openviduServerVersion !== this.openvidu.libraryVersion) { - console.error('OpenVidu Server (' + openviduServerVersion + - ') and OpenVidu Browser (' + this.openvidu.libraryVersion + - ') versions do NOT match. There may be incompatibilities') + const processTokenAux: Function = token => { + const url = new URL(token); + this.sessionId = url.searchParams.get('sessionId'); + const secret = url.searchParams.get('secret'); + const recorder = url.searchParams.get('recorder'); + const turnUsername = url.searchParams.get('turnUsername'); + const turnCredential = url.searchParams.get('turnCredential'); + const role = url.searchParams.get('role'); + const webrtcStatsInterval = url.searchParams.get('webrtcStatsInterval'); + const openviduServerVersion = url.searchParams.get('version'); + + if (!!secret) { + this.openvidu.secret = secret; + } + if (!!recorder) { + this.openvidu.recorder = true; + } + if (!!turnUsername && !!turnCredential) { + const stunUrl = 'stun:' + url.hostname + ':3478'; + const turnUrl1 = 'turn:' + url.hostname + ':3478'; + const turnUrl2 = turnUrl1 + '?transport=tcp'; + this.openvidu.iceServers = [ + { urls: [stunUrl] }, + { urls: [turnUrl1, turnUrl2], username: turnUsername, credential: turnCredential } + ]; + console.log('TURN temp credentials [' + turnUsername + ':' + turnCredential + ']'); + } + if (!!role) { + this.openvidu.role = role; + } + if (!!webrtcStatsInterval) { + this.openvidu.webrtcStatsInterval = +webrtcStatsInterval; + } + if (!!openviduServerVersion) { + console.info("openvidu-server version: " + openviduServerVersion); + if (openviduServerVersion !== this.openvidu.libraryVersion) { + console.error('OpenVidu Server (' + openviduServerVersion + + ') and OpenVidu Browser (' + this.openvidu.libraryVersion + + ') versions do NOT match. There may be incompatibilities') + } + } + + this.openvidu.wsUri = 'wss://' + url.host + '/openvidu'; + this.openvidu.httpUri = 'https://' + url.host; + + resolve(); + }; + + if (platform['isInternetExplorer']) { + // Wait for URL polyfill to be available + const scriptId = 'url-script-element'; + const script = document.getElementById(scriptId); + if (script!.classList.contains(scriptId)) { + // URL polyfill is already available + processTokenAux(token); + } else { + // Wait for the script tag to be loaded + this.openvidu.ee.once(scriptId, () => { + processTokenAux(token); + }); + } + } else { + processTokenAux(token); } - } - - this.openvidu.wsUri = 'wss://' + url.host + '/openvidu'; - this.openvidu.httpUri = 'https://' + url.host; + }); } }