openvidu-browser: automate the URL polyfill import if IE

pull/255/head
pabloFuente 2019-05-10 13:24:07 +02:00
parent 8f25b937e2
commit 4e1a080232
2 changed files with 97 additions and 49 deletions

View File

@ -29,6 +29,7 @@ import { VideoInsertMode } from '../OpenViduInternal/Enums/VideoInsertMode';
import * as screenSharingAuto from '../OpenViduInternal/ScreenSharing/Screen-Capturing-Auto'; import * as screenSharingAuto from '../OpenViduInternal/ScreenSharing/Screen-Capturing-Auto';
import * as screenSharing from '../OpenViduInternal/ScreenSharing/Screen-Capturing'; import * as screenSharing from '../OpenViduInternal/ScreenSharing/Screen-Capturing';
import EventEmitter = require('wolfy87-eventemitter');
import RpcBuilder = require('../OpenViduInternal/KurentoUtils/kurento-jsonrpc'); import RpcBuilder = require('../OpenViduInternal/KurentoUtils/kurento-jsonrpc');
import platform = require('platform'); import platform = require('platform');
platform['isIonicIos'] = (platform.product === 'iPhone' || platform.product === 'iPad') && platform.ua!!.indexOf('Safari') === -1; platform['isIonicIos'] = (platform.product === 'iPhone' || platform.product === 'iPad') && platform.ua!!.indexOf('Safari') === -1;
@ -93,6 +94,10 @@ export class OpenVidu {
* @hidden * @hidden
*/ */
libraryVersion: string; libraryVersion: string;
/**
* @hidden
*/
ee = new EventEmitter()
constructor() { constructor() {
this.libraryVersion = packageJson.version; this.libraryVersion = packageJson.version;
@ -101,7 +106,9 @@ export class OpenVidu {
console.info("openvidu-browser version: " + this.libraryVersion); console.info("openvidu-browser version: " + this.libraryVersion);
if (platform['isInternetExplorer']) { if (platform['isInternetExplorer']) {
console.info("Detected IE Explorer " + platform.version);
this.importIEAdapterJS(); this.importIEAdapterJS();
this.importURLLibrary();
} }
if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') { if (platform.os!!.family === 'iOS' || platform.os!!.family === 'Android') {
@ -763,16 +770,33 @@ export class OpenVidu {
private importIEAdapterJS(): void { private importIEAdapterJS(): void {
const moduleSpecifier = 'https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.min.js'; const moduleSpecifier = 'https://cdn.temasys.io/adapterjs/0.15.x/adapter.screenshare.min.js';
//Create a script tag
var script = document.createElement('script'); var script = document.createElement('script');
// Assign a URL to the script element
script.src = moduleSpecifier; script.src = moduleSpecifier;
// Get the first script tag on the page (we'll insert our new one before it)
var ref = document.querySelector('script'); var ref = document.querySelector('script');
// Insert the new node before the reference node
if (ref && ref.parentNode) { if (ref && ref.parentNode) {
ref.parentNode.insertBefore(script, ref); 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");
} }
} }

View File

@ -143,9 +143,9 @@ export class Session implements EventDispatcher {
* *
*/ */
connect(token: string, metadata?: any): Promise<any> { connect(token: string, metadata?: any): Promise<any> {
return new Promise((resolve, reject) => { return new Promise(async (resolve, reject) => {
this.processToken(token); await this.processToken(token);
if (this.openvidu.checkSystemRequirements()) { if (this.openvidu.checkSystemRequirements()) {
// Early configuration to deactivate automatic subscription to streams // Early configuration to deactivate automatic subscription to streams
@ -1143,50 +1143,74 @@ export class Session implements EventDispatcher {
}); });
} }
private processToken(token: string): void { private async processToken(token: string): Promise<void> {
const url = new URL(token); return new Promise<void>((resolve, reject) => {
this.sessionId = <string>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) { const processTokenAux: Function = token => {
this.openvidu.secret = secret; const url = new URL(token);
} this.sessionId = <string>url.searchParams.get('sessionId');
if (!!recorder) { const secret = url.searchParams.get('secret');
this.openvidu.recorder = true; const recorder = url.searchParams.get('recorder');
} const turnUsername = url.searchParams.get('turnUsername');
if (!!turnUsername && !!turnCredential) { const turnCredential = url.searchParams.get('turnCredential');
const stunUrl = 'stun:' + url.hostname + ':3478'; const role = url.searchParams.get('role');
const turnUrl1 = 'turn:' + url.hostname + ':3478'; const webrtcStatsInterval = url.searchParams.get('webrtcStatsInterval');
const turnUrl2 = turnUrl1 + '?transport=tcp'; const openviduServerVersion = url.searchParams.get('version');
this.openvidu.iceServers = [
{ urls: [stunUrl] }, if (!!secret) {
{ urls: [turnUrl1, turnUrl2], username: turnUsername, credential: turnCredential } this.openvidu.secret = secret;
]; }
console.log('TURN temp credentials [' + turnUsername + ':' + turnCredential + ']'); if (!!recorder) {
} this.openvidu.recorder = true;
if (!!role) { }
this.openvidu.role = role; if (!!turnUsername && !!turnCredential) {
} const stunUrl = 'stun:' + url.hostname + ':3478';
if (!!webrtcStatsInterval) { const turnUrl1 = 'turn:' + url.hostname + ':3478';
this.openvidu.webrtcStatsInterval = +webrtcStatsInterval; const turnUrl2 = turnUrl1 + '?transport=tcp';
} this.openvidu.iceServers = [
if (!!openviduServerVersion) { { urls: [stunUrl] },
console.info("openvidu-server version: " + openviduServerVersion); { urls: [turnUrl1, turnUrl2], username: turnUsername, credential: turnCredential }
if (openviduServerVersion !== this.openvidu.libraryVersion) { ];
console.error('OpenVidu Server (' + openviduServerVersion + console.log('TURN temp credentials [' + turnUsername + ':' + turnCredential + ']');
') and OpenVidu Browser (' + this.openvidu.libraryVersion + }
') versions do NOT match. There may be incompatibilities') 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;
} }
} }