Skip to content

Commit

Permalink
Use webpack to build ErizoClient (#948)
Browse files Browse the repository at this point in the history
Use webpack to build ErizoClient
  • Loading branch information
lodoyun authored Jul 11, 2017
1 parent ca1bafe commit 342fb9a
Show file tree
Hide file tree
Showing 39 changed files with 620 additions and 453 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ build/
licode_config.js
extras/basic_example/node_modules
extras/basic_example/public/erizo.js
extras/basic_example/public/erizo.js.map
extras/basic_example/nuve.js
node_modules/
site
Expand Down
7 changes: 3 additions & 4 deletions erizo_controller/.gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
erizoClient/dist/erizofc.js
erizoClient/build/erizofc.js
erizoClient/dist/erizo.js
erizoClient/dist/production/
erizoClient/dist/debug/
erizoController/node_modules/
test/public/erizo.js
erizoController/ch_policies/
erizoController/ch_policies/
35 changes: 35 additions & 0 deletions erizo_controller/erizoClient/gulp/erizoFcTasks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const erizoFcTasks = (gulp, plugins, config) => {
const that = {};
if (!config.paths) {
return;
}
const erizoFcConfig = {
entry: `${config.paths.entry}ErizoFc.js`,
webpackConfig: require('../webpack.config.erizofc.js'),
debug: `${config.paths.debug}/erizofc`,
production: `${config.paths.production}/erizofc`,
};
that.bundle = () =>
gulp.src(erizoFcConfig.entry)
.pipe(plugins.webpackGulp(erizoFcConfig.webpackConfig, plugins.webpack))
.on('error', anError => console.log('An error ', anError))
.pipe(gulp.dest(erizoFcConfig.debug))
.on('error', anError => console.log('An error ', anError));

that.compile = () => {
return gulp.src(`${erizoFcConfig.debug}/**/*.js`)
.pipe(gulp.dest(erizoFcConfig.production));
}

that.dist = () =>
gulp.src(`${erizoFcConfig.production}/**/*.js`)
.pipe(gulp.dest(config.paths.spine));

that.clean = () =>
plugins.del([`${erizoFcConfig.debug}/**/*.js*`, `${erizoFcConfig.production}/**/*.js*`],
{ force: true });

return that;
};

module.exports = erizoFcTasks;
43 changes: 43 additions & 0 deletions erizo_controller/erizoClient/gulp/erizoTasks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
const erizoTasks = (gulp, plugins, config) => {
const that = {};
if (!config.paths) {
return;
}
const erizoConfig = {
entry: `${config.paths.entry}Erizo.js`,
webpackConfig: require('../webpack.config.erizo.js'),
debug: `${config.paths.debug}/erizo`,
production: `${config.paths.production}/erizo`,
};

that.bundle = () =>
gulp.src(erizoConfig.entry, { base: './' })
.pipe(plugins.webpackGulp(erizoConfig.webpackConfig, plugins.webpack))
.on('error', anError => console.log('An error ', anError))
.pipe(gulp.dest(erizoConfig.debug))
.on('error', anError => console.log('An error ', anError));

that.compile = () =>
gulp.src(`${erizoConfig.debug}/**/*.js`, { base: './' })
.pipe(plugins.sourcemaps.init())
.pipe(plugins.closureCompiler({
languageIn: 'ECMASCRIPT6',
languageOut: 'ECMASCRIPT5',
jsOutputFile: 'erizo.js',
createSourceMap: true,
}))
.pipe(plugins.sourcemaps.write('/')) // gulp-sourcemaps automatically adds the sourcemap url comment
.pipe(gulp.dest(erizoConfig.production));

that.dist = () =>
gulp.src(`${erizoConfig.production}/**/*.js*`)
.pipe(gulp.dest(config.paths.basicExample));

that.clean = () =>
plugins.del([`${erizoConfig.debug}/**/*.js*`, `${erizoConfig.production}/**/*.js*`],
{ force: true });

return that;
};

module.exports = erizoTasks;
62 changes: 62 additions & 0 deletions erizo_controller/erizoClient/gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
const gulp = require('gulp');

const plugins = {};
plugins.runSequence = require('run-sequence');
plugins.del = require('del');
plugins.sourcemaps = require('gulp-sourcemaps');

plugins.eslint = require('gulp-eslint');
plugins.closureCompiler = require('google-closure-compiler-js').gulp();

plugins.webpack = require('webpack');
plugins.webpackGulp = require('webpack-stream');


const config = {
paths: {
entry: './src/',
debug: './dist/debug',
production: './dist/production',
basicExample: '../../extras/basic_example/public/',
spine: '../../spine/',
js: './src/**/*.js',
},
};

const tasks = ['clean', 'bundle', 'compile', 'dist'];
const targets = ['erizo', 'erizofc'];
const allTasks = ['lint'];


const taskFunctions = {};
taskFunctions.erizo = require('./gulp/erizoTasks.js')(gulp, plugins, config);
taskFunctions.erizofc = require('./gulp/erizoFcTasks.js')(gulp, plugins, config);

targets.forEach(
(target) => {
tasks.forEach(
(task) => {
const taskName = `${task}_${target}`;
allTasks.push(taskName);
gulp.task(taskName, () => {
return taskFunctions[target][task]()
});
});
});

gulp.task('lint', () => {
return gulp.src(config.paths.js)
.pipe(plugins.eslint());
});

gulp.task('watch', () => {
const watcher = gulp.watch('src/**/*.js');
watcher.on('change', (event) => {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
plugins.runSequence('default');
});
});

gulp.task('default', () => {
plugins.runSequence(...allTasks);
});
110 changes: 58 additions & 52 deletions erizo_controller/erizoClient/src/Connection.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,16 @@
/* global L, window, chrome, navigator, Erizo*/
this.Erizo = this.Erizo || {};
/* global window, chrome, navigator*/
import ChromeStableStack from './webrtc-stacks/ChromeStableStack';
import FirefoxStack from './webrtc-stacks/FirefoxStack';
import FcStack from './webrtc-stacks/FcStack';
import Logger from './utils/Logger';

Erizo.sessionId = 103;

Erizo.Connection = (specInput) => {
let that = {};
const spec = specInput;
Erizo.sessionId += 1;

spec.sessionId = Erizo.sessionId;
let ErizoSessionId = 103;

// Check which WebRTC Stack is installed.
that.browser = Erizo.getBrowser();
if (that.browser === 'fake') {
L.Logger.warning('Publish/subscribe video/audio streams not supported in erizofc yet');
that = Erizo.FcStack(spec);
} else if (that.browser === 'mozilla') {
L.Logger.debug('Firefox Stack');
that = Erizo.FirefoxStack(spec);
} else if (that.browser === 'safari') {
L.Logger.debug('Safari using Firefox Stack');
that = Erizo.FirefoxStack(spec);
} else if (that.browser === 'chrome-stable' || that.browser === 'electron') {
L.Logger.debug('Chrome Stable Stack');
that = Erizo.ChromeStableStack(spec);
} else {
L.Logger.error('No stack available for this browser');
throw new Error('WebRTC stack not available');
}
if (!that.updateSpec) {
that.updateSpec = (newSpec, callback = () => {}) => {
L.Logger.error('Update Configuration not implemented in this browser');
callback('unimplemented');
};
}

return that;
};

Erizo.getBrowser = () => {
const getBrowser = () => {
let browser = 'none';

if (typeof module !== 'undefined' && module.exports) {
if ((typeof module !== 'undefined' && module.exports)) {
browser = 'fake';
} else if (window.navigator.userAgent.match('Firefox') !== null) {
// Firefox
Expand All @@ -59,26 +28,60 @@ Erizo.getBrowser = () => {
return browser;
};

Erizo.GetUserMedia = (config, callback = () => {}, error = () => {}) => {
const buildConnection = (specInput) => {
let that = {};
const spec = specInput;
ErizoSessionId += 1;
spec.sessionId = ErizoSessionId;

// Check which WebRTC Stack is installed.
that.browser = getBrowser();
if (that.browser === 'fake') {
Logger.warning('Publish/subscribe video/audio streams not supported in erizofc yet');
that = FcStack(spec);
} else if (that.browser === 'mozilla') {
Logger.debug('Firefox Stack');
that = FirefoxStack(spec);
} else if (that.browser === 'safari') {
Logger.debug('Safari using Firefox Stack');
that = FirefoxStack(spec);
} else if (that.browser === 'chrome-stable' || that.browser === 'electron') {
Logger.debug('Chrome Stable Stack');
that = ChromeStableStack(spec);
} else {
Logger.error('No stack available for this browser');
throw new Error('WebRTC stack not available');
}
if (!that.updateSpec) {
that.updateSpec = (newSpec, callback = () => {}) => {
Logger.error('Update Configuration not implemented in this browser');
callback('unimplemented');
};
}

return that;
};

const GetUserMedia = (config, callback = () => {}, error = () => {}) => {
let screenConfig;

const getUserMedia = (userMediaConfig, cb, errorCb) => {
navigator.mediaDevices.getUserMedia(userMediaConfig).then(cb).catch(errorCb);
};

const configureScreensharing = () => {
L.Logger.debug('Screen access requested');
switch (Erizo.getBrowser()) {
Logger.debug('Screen access requested');
switch (getBrowser()) {
case 'electron' :
L.Logger.debug('Screen sharing in Electron');
Logger.debug('Screen sharing in Electron');
screenConfig = {};
screenConfig.video = config.video || {};
screenConfig.video.mandatory = config.video.mandatory || {};
screenConfig.video.mandatory.chromeMediaSource = 'screen';
getUserMedia(screenConfig, callback, error);
break;
case 'mozilla':
L.Logger.debug('Screen sharing in Firefox');
Logger.debug('Screen sharing in Firefox');
screenConfig = {};
if (config.video !== undefined) {
screenConfig.video = config.video;
Expand All @@ -93,7 +96,7 @@ Erizo.GetUserMedia = (config, callback = () => {}, error = () => {}) => {
break;

case 'chrome-stable':
L.Logger.debug('Screen sharing in Chrome');
Logger.debug('Screen sharing in Chrome');
screenConfig = {};
if (config.desktopStreamId) {
screenConfig.video = config.video || { mandatory: {} };
Expand All @@ -107,15 +110,15 @@ Erizo.GetUserMedia = (config, callback = () => {}, error = () => {}) => {
// erizo_controller/erizoClient/extras/chrome-extension
let extensionId = 'okeephmleflklcdebijnponpabbmmgeo';
if (config.extensionId) {
L.Logger.debug(`extensionId supplied, using ${config.extensionId}`);
Logger.debug(`extensionId supplied, using ${config.extensionId}`);
extensionId = config.extensionId;
}
L.Logger.debug('Screen access on chrome stable, looking for extension');
Logger.debug('Screen access on chrome stable, looking for extension');
try {
chrome.runtime.sendMessage(extensionId, { getStream: true },
(response) => {
if (response === undefined) {
L.Logger.error('Access to screen denied');
Logger.error('Access to screen denied');
const theError = { code: 'Access to screen denied' };
error(theError);
return;
Expand All @@ -132,24 +135,27 @@ Erizo.GetUserMedia = (config, callback = () => {}, error = () => {}) => {
getUserMedia(screenConfig, callback, error);
});
} catch (e) {
L.Logger.debug('Screensharing plugin is not accessible ');
Logger.debug('Screensharing plugin is not accessible ');
const theError = { code: 'no_plugin_present' };
error(theError);
}
}
break;

default:
L.Logger.error('This browser does not support ScreenSharing');
Logger.error('This browser does not support ScreenSharing');
}
};

if (config.screen) {
configureScreensharing();
} else if (typeof module !== 'undefined' && module.exports) {
L.Logger.error('Video/audio streams not supported in erizofc yet');
Logger.error('Video/audio streams not supported in erizofc yet');
} else {
L.Logger.debug('Calling getUserMedia with config', config);
Logger.debug('Calling getUserMedia with config', config);
getUserMedia(config, callback, error);
}
};
const Connection = { GetUserMedia, buildConnection, getBrowser };

export default Connection;
19 changes: 19 additions & 0 deletions erizo_controller/erizoClient/src/Erizo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Room from './Room';
import { LicodeEvent, RoomEvent, StreamEvent } from './Events';
import Stream from './Stream';
import Logger from './utils/Logger';

require("expose-loader?adapter!../lib/adapter.js");
require("script-loader!./utils/L.Resizer.js");


const Erizo = {
Room: Room.bind(null, undefined, undefined),
LicodeEvent,
RoomEvent,
StreamEvent,
Stream: Stream.bind(null, undefined),
Logger,
};

export default Erizo;
15 changes: 15 additions & 0 deletions erizo_controller/erizoClient/src/ErizoFc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import Room from './Room';
import { LicodeEvent, RoomEvent, StreamEvent } from './Events';
import Stream from './Stream';

// Using script-loader to load global variables

const Erizo = {
Room,
LicodeEvent,
RoomEvent,
StreamEvent,
Stream
};

export default Erizo;
Loading

0 comments on commit 342fb9a

Please sign in to comment.