From a7d50bd52cff392684ad3df1a9e802db4e235c48 Mon Sep 17 00:00:00 2001 From: Pedro Rodriguez Date: Wed, 1 Jul 2020 12:33:02 +0200 Subject: [PATCH] Centralize the way we get configuration flags in BasicExample (#1607) --- extras/basic_example/public/script.js | 142 +++++++++++++++----------- 1 file changed, 81 insertions(+), 61 deletions(-) diff --git a/extras/basic_example/public/script.js b/extras/basic_example/public/script.js index 361881d8ed..2c5b5dbb67 100644 --- a/extras/basic_example/public/script.js +++ b/extras/basic_example/public/script.js @@ -5,17 +5,39 @@ /* eslint-disable no-param-reassign, no-console */ const serverUrl = '/'; -window.localStream = undefined; -window.room = undefined; -window.recording = false; -window.recordingId = ''; +let localStream; +let room; +let recording = false; +let recordingId = ''; +const configFlags = { + noStart: false, // disable start button when only subscribe + forceStart: false, // force start button in all cases + screen: false, // screensharinug + room: 'basicExampleRoom', // room name + singlePC: false, + type: 'erizo', // room type + onlyAudio: false, + mediaConfiguration: 'default', + onlySubscribe: false, + onlyPublish: false, + autoSubscribe: false, + offerFromErizo: false, + simulcast: false, +}; const getParameterByName = (name) => { // eslint-disable-next-line name = name.replace(/[\[]/, '\\\[').replace(/[\]]/, '\\\]'); const regex = new RegExp(`[\\?&]${name}=([^&#]*)`); const results = regex.exec(location.search); - return results == null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); + return results == null ? false : decodeURIComponent(results[1].replace(/\+/g, ' ')); +}; + +const fillInConfigFlagsFromParameters = (config) => { + Object.keys(config).forEach((key) => { + config[key] = getParameterByName(key); + }); + console.log('Flags parsed, configuration is ', config); }; // eslint-disable-next-line no-unused-vars @@ -26,16 +48,18 @@ const testConnection = () => { // eslint-disable-next-line no-unused-vars function startRecording() { - if (window.room !== undefined) { - if (!window.recording) { - window.room.startRecording(window.localStream, (id) => { - window.recording = true; - window.recordingId = id; + if (room !== undefined) { + if (!recording) { + room.startRecording(localStream, (id) => { + recording = true; + recordingId = id; + window.recordingId = recordingId; }); } else { - window.room.stopRecording(window.recordingId); - window.recording = false; + room.stopRecording(recordingId); + recording = false; } + window.recording = recording; } } @@ -43,13 +67,13 @@ let slideShowMode = false; // eslint-disable-next-line no-unused-vars function toggleSlideShowMode() { - const streams = window.room.remoteStreams; + const streams = room.remoteStreams; const cb = (evt) => { console.log('SlideShowMode changed', evt); }; slideShowMode = !slideShowMode; streams.forEach((stream) => { - if (window.localStream.getID() !== stream.getID()) { + if (localStream.getID() !== stream.getID()) { console.log('Updating config'); stream.updateConfiguration({ slideShowMode }, cb); } @@ -61,31 +85,22 @@ const startBasicExample = () => { document.getElementById('slideShowMode').disabled = false; document.getElementById('startWarning').hidden = true; document.getElementById('startButton').hidden = true; - window.recording = false; - const screen = getParameterByName('screen'); - const roomName = getParameterByName('room') || 'basicExampleRoom'; - const singlePC = getParameterByName('singlePC') || false; - const roomType = getParameterByName('type') || 'erizo'; - const audioOnly = getParameterByName('onlyAudio') || false; - const mediaConfiguration = getParameterByName('mediaConfiguration') || 'default'; - const onlySubscribe = getParameterByName('onlySubscribe'); - const onlyPublish = getParameterByName('onlyPublish'); - const autoSubscribe = getParameterByName('autoSubscribe'); - const offerFromErizo = getParameterByName('offerFromErizo'); - console.log('Selected Room', roomName, 'of type', roomType); + recording = false; + console.log('Selected Room', configFlags.room, 'of type', configFlags.type); const config = { audio: true, - video: !audioOnly, + video: !configFlags.onlyAudio, data: true, - screen, + screen: configFlags.screen, attributes: {} }; // If we want screen sharing we have to put our Chrome extension id. // The default one only works in our Lynckia test servers. // If we are not using chrome, the creation of the stream will fail regardless. - if (screen) { + if (configFlags.screen) { config.extensionId = 'okeephmleflklcdebijnponpabbmmgeo'; } Erizo.Logger.setLogLevel(Erizo.Logger.INFO); - window.localStream = Erizo.Stream(config); + localStream = Erizo.Stream(config); + window.localStream = localStream; const createToken = (roomData, callback) => { const req = new XMLHttpRequest(); const url = `${serverUrl}createToken/`; @@ -103,20 +118,21 @@ const startBasicExample = () => { const roomData = { username: `user ${parseInt(Math.random() * 100, 10)}`, role: 'presenter', - room: roomName, - type: roomType, - mediaConfiguration }; + room: configFlags.room, + type: configFlags.type, + mediaConfiguration: configFlags.mediaConfiguration }; createToken(roomData, (response) => { const token = response; console.log(token); - window.room = Erizo.Room({ token }); + room = Erizo.Room({ token }); + window.room = room; const subscribeToStreams = (streams) => { - if (autoSubscribe) { + if (configFlags.autoSubscribe) { return; } - if (onlyPublish) { + if (configFlags.onlyPublish) { return; } const cb = (evt) => { @@ -124,31 +140,30 @@ const startBasicExample = () => { }; streams.forEach((stream) => { - if (window.localStream.getID() !== stream.getID()) { - window.room.subscribe(stream, { slideShowMode, metadata: { type: 'subscriber' }, offerFromErizo }); + if (localStream.getID() !== stream.getID()) { + room.subscribe(stream, { slideShowMode, metadata: { type: 'subscriber' }, offerFromErizo: configFlags.offerFromErizo }); stream.addEventListener('bandwidth-alert', cb); } }); }; - window.room.addEventListener('room-connected', (roomEvent) => { + room.addEventListener('room-connected', (roomEvent) => { const options = { metadata: { type: 'publisher' } }; - const enableSimulcast = getParameterByName('simulcast'); - if (enableSimulcast) options.simulcast = { numSpatialLayers: 2 }; + if (configFlags.simulcast) options.simulcast = { numSpatialLayers: 2 }; subscribeToStreams(roomEvent.streams); - if (!onlySubscribe) { - window.room.publish(window.localStream, options); + if (!configFlags.onlySubscribe) { + room.publish(localStream, options); } - window.room.addEventListener('quality-level', (qualityEvt) => { + room.addEventListener('quality-level', (qualityEvt) => { console.log(`New Quality Event, connection quality: ${qualityEvt.message}`); }); - if (autoSubscribe) { - window.room.autoSubscribe({ '/attributes/type': 'publisher' }, {}, { audio: true, video: true, data: false }, () => {}); + if (configFlags.autoSubscribe) { + room.autoSubscribe({ '/attributes/type': 'publisher' }, {}, { audio: true, video: true, data: false }, () => {}); } }); - window.room.addEventListener('stream-subscribed', (streamEvent) => { + room.addEventListener('stream-subscribed', (streamEvent) => { const stream = streamEvent.stream; const div = document.createElement('div'); div.setAttribute('style', 'width: 320px; height: 240px;float:left;'); @@ -158,17 +173,17 @@ const startBasicExample = () => { stream.show(`test${stream.getID()}`); }); - window.room.addEventListener('stream-added', (streamEvent) => { + room.addEventListener('stream-added', (streamEvent) => { const streams = []; streams.push(streamEvent.stream); - if (window.localStream) { - window.localStream.setAttributes({ type: 'publisher' }); + if (localStream) { + localStream.setAttributes({ type: 'publisher' }); } subscribeToStreams(streams); document.getElementById('recordButton').disabled = false; }); - window.room.addEventListener('stream-removed', (streamEvent) => { + room.addEventListener('stream-removed', (streamEvent) => { // Remove stream from DOM const stream = streamEvent.stream; if (stream.elementID !== undefined) { @@ -177,31 +192,36 @@ const startBasicExample = () => { } }); - window.room.addEventListener('stream-failed', () => { + room.addEventListener('stream-failed', () => { console.log('Stream Failed, act accordingly'); }); - if (onlySubscribe) { - window.room.connect({ singlePC }); + if (configFlags.onlySubscribe) { + room.connect({ singlePC: configFlags.singlePC }); } else { const div = document.createElement('div'); div.setAttribute('style', 'width: 320px; height: 240px; float:left'); div.setAttribute('id', 'myVideo'); document.getElementById('videoContainer').appendChild(div); - window.localStream.addEventListener('access-accepted', () => { - window.room.connect({ singlePC }); - window.localStream.show('myVideo'); + localStream.addEventListener('access-accepted', () => { + room.connect({ singlePC: configFlags.singlePC }); + localStream.show('myVideo'); }); - window.localStream.init(); + localStream.init(); } }); }; window.onload = () => { - const onlySubscribe = getParameterByName('onlySubscribe'); - const bypassStartButton = getParameterByName('noStart'); - if (!onlySubscribe || bypassStartButton) { + fillInConfigFlagsFromParameters(configFlags); + window.configFlags = configFlags; + + const shouldSkipButton = + !configFlags.forceStart && + (!configFlags.onlySubscribe || configFlags.noStart); + + if (shouldSkipButton) { startBasicExample(); } else { document.getElementById('startButton').disabled = false;