Skip to content

Commit

Permalink
Centralize the way we get configuration flags in BasicExample (#1607)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lodoyun
lodoyun authored Jul 1, 2020
1 parent fea9fd3 commit a7d50bd
Showing 1 changed file with 81 additions and 61 deletions.
142 changes: 81 additions & 61 deletions extras/basic_example/public/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,30 +48,32 @@ 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;
}
}

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);
}
Expand All @@ -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/`;
Expand All @@ -103,52 +118,52 @@ 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) => {
console.log('Bandwidth Alert', evt.msg, evt.bandwidth);
};

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;');
Expand All @@ -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) {
Expand All @@ -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;
Expand Down

0 comments on commit a7d50bd

Please sign in to comment.