mirror of https://github.com/OpenVidu/openvidu.git
291 lines
13 KiB
JavaScript
291 lines
13 KiB
JavaScript
|
|
var MINIMAL;
|
|
var PREJOIN;
|
|
var VIDEO_MUTED;
|
|
var AUDIO_MUTED;
|
|
|
|
var SCREENSHARE_BUTTON;
|
|
var FULLSCREEN_BUTTON;
|
|
var ACTIVITIES_PANEL_BUTTON;
|
|
var RECORDING_BUTTON;
|
|
var CHAT_PANEL_BUTTON;
|
|
var DISPLAY_LOGO;
|
|
var DISPLAY_SESSION_NAME;
|
|
var DISPLAY_PARTICIPANT_NAME;
|
|
var DISPLAY_AUDIO_DETECTION;
|
|
var SETTINGS_BUTTON;
|
|
var LEAVE_BUTTON;
|
|
var PARTICIPANT_MUTE_BUTTON;
|
|
var PARTICIPANTS_PANEL_BUTTON;
|
|
var ACTIVITIES_RECORDING_ACTIVITY;
|
|
var RECORDING_ERROR;
|
|
var TOOLBAR_SETTINGS_BUTTON;
|
|
var CAPTIONS_BUTTON;
|
|
|
|
var SINGLE_TOKEN;
|
|
var SESSION_NAME;
|
|
|
|
var PARTICIPANT_NAME;
|
|
|
|
$(document).ready(() => {
|
|
|
|
var url = new URL(window.location.href);
|
|
|
|
SINGLE_TOKEN = url.searchParams.get("singleToken") === null ? false : url.searchParams.get("singleToken") === 'true';
|
|
|
|
|
|
// Directives
|
|
MINIMAL = url.searchParams.get("minimal") === null ? false : url.searchParams.get("minimal") === 'true';
|
|
PARTICIPANT_NAME = url.searchParams.get("participantName") || 'TEST_USER';
|
|
PREJOIN = url.searchParams.get("prejoin") === null ? true : url.searchParams.get("prejoin") === 'true';
|
|
VIDEO_MUTED = url.searchParams.get("videoMuted") === null ? false : url.searchParams.get("videoMuted") === 'true';
|
|
AUDIO_MUTED = url.searchParams.get("audioMuted") === null ? false : url.searchParams.get("audioMuted") === 'true';
|
|
SCREENSHARE_BUTTON = url.searchParams.get("screenshareBtn") === null ? true : url.searchParams.get("screenshareBtn") === 'true';
|
|
RECORDING_BUTTON = url.searchParams.get("recordingBtn") === null ? true : url.searchParams.get("recordingBtn") === 'true';
|
|
FULLSCREEN_BUTTON = url.searchParams.get("fullscreenBtn") === null ? true : url.searchParams.get("fullscreenBtn") === 'true';
|
|
TOOLBAR_SETTINGS_BUTTON = url.searchParams.get("toolbarSettingsBtn") === null ? true : url.searchParams.get("toolbarSettingsBtn") === 'true';
|
|
CAPTIONS_BUTTON = url.searchParams.get("toolbarCaptionsBtn") === null ? true : url.searchParams.get("toolbarCaptionsBtn") === 'true';
|
|
|
|
LEAVE_BUTTON = url.searchParams.get("leaveBtn") === null ? true : url.searchParams.get("leaveBtn") === 'true';
|
|
ACTIVITIES_PANEL_BUTTON = url.searchParams.get("activitiesPanelBtn") === null ? true : url.searchParams.get("activitiesPanelBtn") === 'true';
|
|
CHAT_PANEL_BUTTON = url.searchParams.get("chatPanelBtn") === null ? true : url.searchParams.get("chatPanelBtn") === 'true';
|
|
PARTICIPANTS_PANEL_BUTTON = url.searchParams.get("participantsPanelBtn") === null ? true : url.searchParams.get("participantsPanelBtn") === 'true';
|
|
ACTIVITIES_RECORDING_ACTIVITY = url.searchParams.get("activitiesPanelRecordingActivity") === null ? true : url.searchParams.get("activitiesPanelRecordingActivity") === 'true';
|
|
if(url.searchParams.get("recordingError") !== null) {
|
|
RECORDING_ERROR = url.searchParams.get("recordingError");
|
|
}
|
|
|
|
DISPLAY_LOGO = url.searchParams.get("displayLogo") === null ? true : url.searchParams.get("displayLogo") === 'true';
|
|
DISPLAY_SESSION_NAME = url.searchParams.get("displaySessionName") === null ? true : url.searchParams.get("displaySessionName") === 'true';
|
|
DISPLAY_PARTICIPANT_NAME = url.searchParams.get("displayParticipantName") === null ? true : url.searchParams.get("displayParticipantName") === 'true';
|
|
DISPLAY_AUDIO_DETECTION = url.searchParams.get("displayAudioDetection") === null ? true : url.searchParams.get("displayAudioDetection") === 'true';
|
|
SETTINGS_BUTTON = url.searchParams.get("settingsBtn") === null ? true : url.searchParams.get("settingsBtn") === 'true';
|
|
PARTICIPANT_MUTE_BUTTON = url.searchParams.get("participantMuteBtn") === null ? true : url.searchParams.get("participantMuteBtn") === 'true';
|
|
|
|
|
|
SESSION_NAME = url.searchParams.get("sessionName") === null ? `E2ESession${Math.floor(Date.now())}` : url.searchParams.get("sessionName");
|
|
|
|
var webComponent = document.querySelector('openvidu-webcomponent');
|
|
|
|
webComponent.addEventListener('onJoinButtonClicked', (event) => appendElement('onJoinButtonClicked'));
|
|
webComponent.addEventListener('onToolbarLeaveButtonClicked', (event) => appendElement('onToolbarLeaveButtonClicked'));
|
|
webComponent.addEventListener('onToolbarCameraButtonClicked', (event) => appendElement('onToolbarCameraButtonClicked'));
|
|
webComponent.addEventListener('onToolbarMicrophoneButtonClicked', (event) => appendElement('onToolbarMicrophoneButtonClicked'));
|
|
webComponent.addEventListener('onToolbarScreenshareButtonClicked', (event) => appendElement('onToolbarScreenshareButtonClicked'));
|
|
webComponent.addEventListener('onToolbarParticipantsPanelButtonClicked', (event) => appendElement('onToolbarParticipantsPanelButtonClicked'));
|
|
webComponent.addEventListener('onToolbarChatPanelButtonClicked', (event) => appendElement('onToolbarChatPanelButtonClicked'));
|
|
webComponent.addEventListener('onToolbarActivitiesPanelButtonClicked', (event) => appendElement('onToolbarActivitiesPanelButtonClicked'));
|
|
webComponent.addEventListener('onToolbarFullscreenButtonClicked', (event) => appendElement('onToolbarFullscreenButtonClicked'));
|
|
|
|
webComponent.addEventListener('onToolbarStartRecordingClicked', async (event) => {
|
|
appendElement('onToolbarStartRecordingClicked');
|
|
// Can't test the recording
|
|
// RECORDING_ID = await startRecording(SESSION_NAME);
|
|
|
|
});
|
|
// Can't test the recording
|
|
// webComponent.addEventListener('onToolbarStopRecordingClicked', async (event) => {
|
|
// appendElement('onToolbarStopRecordingClicked');
|
|
// await stopRecording(RECORDING_ID);
|
|
// });
|
|
|
|
webComponent.addEventListener('onActivitiesPanelStartRecordingClicked', async (event) => {
|
|
appendElement('onActivitiesPanelStartRecordingClicked');
|
|
// RECORDING_ID = await startRecording(SESSION_NAME);
|
|
});
|
|
|
|
// Can't test the recording
|
|
// webComponent.addEventListener('onActivitiesPanelStopRecordingClicked', async (event) => {
|
|
// appendElement('onActivitiesPanelStopRecordingClicked');
|
|
// await stopRecording(RECORDING_ID);
|
|
// });
|
|
|
|
webComponent.addEventListener('onActivitiesPanelDeleteRecordingClicked', (event) => appendElement('onActivitiesPanelDeleteRecordingClicked'));
|
|
|
|
webComponent.addEventListener('onSessionCreated', (event) => {
|
|
var session = event.detail;
|
|
appendElement('onSessionCreated');
|
|
|
|
|
|
// You can see the session documentation here
|
|
// https://docs.openvidu.io/en/stable/api/openvidu-browser/classes/session.html
|
|
|
|
session.on('connectionCreated', (e) => {
|
|
var user = JSON.parse(e.connection.data).clientData;
|
|
appendElement(`${user}-connectionCreated`);
|
|
});
|
|
|
|
session.on('sessionDisconnected', (e) => {
|
|
var user = JSON.parse(e.target.connection.data).clientData;
|
|
appendElement(user + '-sessionDisconnected');
|
|
});
|
|
});
|
|
|
|
webComponent.addEventListener('onParticipantCreated', (event) => {
|
|
var participant = event.detail;
|
|
appendElement(`${participant.nickname}-onParticipantCreated`);
|
|
|
|
});
|
|
|
|
// webComponent.addEventListener('error', (event) => {
|
|
// console.log('Error event', event.detail);
|
|
// });
|
|
|
|
joinSession(SESSION_NAME, PARTICIPANT_NAME);
|
|
});
|
|
|
|
|
|
function appendElement(id) {
|
|
var eventsDiv = document.getElementById('events');
|
|
var element = document.createElement('div');
|
|
element.setAttribute("id", id);
|
|
element.setAttribute("style", "height: 1px;");
|
|
eventsDiv.appendChild(element);
|
|
}
|
|
|
|
async function joinSession(sessionName, participantName) {
|
|
var webComponent = document.querySelector('openvidu-webcomponent');
|
|
var tokens;
|
|
if (SINGLE_TOKEN){
|
|
|
|
tokens = await getToken(sessionName);
|
|
} else {
|
|
tokens = {webcam: await getToken(sessionName), screen: await getToken(sessionName)};
|
|
|
|
}
|
|
|
|
webComponent.minimal = MINIMAL;
|
|
webComponent.prejoin = PREJOIN;
|
|
webComponent.videoMuted = VIDEO_MUTED;
|
|
webComponent.audioMuted = AUDIO_MUTED;
|
|
webComponent.toolbarScreenshareButton = SCREENSHARE_BUTTON;
|
|
|
|
webComponent.toolbarFullscreenButton = FULLSCREEN_BUTTON;
|
|
webComponent.toolbarSettingsButton = TOOLBAR_SETTINGS_BUTTON;
|
|
webComponent.toolbarCaptionsButton = CAPTIONS_BUTTON;
|
|
webComponent.toolbarLeaveButton = LEAVE_BUTTON;
|
|
webComponent.toolbarRecordingButton = RECORDING_BUTTON;
|
|
webComponent.toolbarActivitiesPanelButton = ACTIVITIES_PANEL_BUTTON;
|
|
webComponent.toolbarChatPanelButton = CHAT_PANEL_BUTTON;
|
|
webComponent.toolbarParticipantsPanelButton = PARTICIPANTS_PANEL_BUTTON;
|
|
webComponent.toolbarDisplayLogo = DISPLAY_LOGO;
|
|
webComponent.toolbarDisplaySessionName = DISPLAY_SESSION_NAME;
|
|
webComponent.streamDisplayParticipantName = DISPLAY_PARTICIPANT_NAME;
|
|
webComponent.streamDisplayAudioDetection = DISPLAY_AUDIO_DETECTION;
|
|
webComponent.streamSettingsButton = SETTINGS_BUTTON;
|
|
webComponent.participantPanelItemMuteButton = PARTICIPANT_MUTE_BUTTON;
|
|
|
|
webComponent.recordingActivityRecordingsList = [{status: 'ready'}];
|
|
webComponent.activitiesPanelRecordingActivity = ACTIVITIES_RECORDING_ACTIVITY;
|
|
webComponent.recordingActivityRecordingError = RECORDING_ERROR;
|
|
|
|
webComponent.participantName = participantName;
|
|
webComponent.tokens = tokens;
|
|
}
|
|
|
|
/**
|
|
* --------------------------
|
|
* SERVER-SIDE RESPONSIBILITY
|
|
* --------------------------
|
|
* These methods retrieve the mandatory user token from OpenVidu Server.
|
|
* This behavior MUST BE IN YOUR SERVER-SIDE IN PRODUCTION (by using
|
|
* the API REST, openvidu-java-client or openvidu-node-client):
|
|
* 1) Initialize a session in OpenVidu Server (POST /api/sessions)
|
|
* 2) Generate a token in OpenVidu Server (POST /api/tokens)
|
|
* 3) Configure OpenVidu Web Component in your client side with the token
|
|
*/
|
|
|
|
var OPENVIDU_SERVER_URL = "http://localhost:4443" ;
|
|
var OPENVIDU_SERVER_SECRET = 'MY_SECRET';
|
|
|
|
function getToken(sessionName) {
|
|
return createSession(sessionName).then((sessionId) => createToken(sessionId));
|
|
}
|
|
|
|
function createSession(sessionName) { // See https://docs.openvidu.io/en/stable/reference-docs/REST-API/#post-apisessions
|
|
return new Promise((resolve, reject) => {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: OPENVIDU_SERVER_URL + '/openvidu/api/sessions',
|
|
data: JSON.stringify({ customSessionId: sessionName }),
|
|
headers: {
|
|
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
|
|
'Content-Type': 'application/json',
|
|
},
|
|
success: (response) => resolve(response.id),
|
|
error: (error) => {
|
|
if (error.status === 409) {
|
|
resolve(sessionName);
|
|
} else {
|
|
console.warn('No connection to OpenVidu Server. This may be a certificate error at ' + OPENVIDU_SERVER_URL);
|
|
if (
|
|
window.confirm(
|
|
'No connection to OpenVidu Server. This may be a certificate error at "' +
|
|
OPENVIDU_SERVER_URL +
|
|
'"\n\nClick OK to navigate and accept it. ' +
|
|
'If no certificate warning is shown, then check that your OpenVidu Server is up and running at "' +
|
|
OPENVIDU_SERVER_URL +
|
|
'"',
|
|
)
|
|
) {
|
|
location.assign(OPENVIDU_SERVER_URL + '/openvidu/accept-certificate');
|
|
}
|
|
}
|
|
},
|
|
});
|
|
});
|
|
}
|
|
|
|
function createToken(sessionId) {
|
|
// See https://docs.openvidu.io/en/stable/reference-docs/REST-API/#post-apitokens
|
|
return new Promise((resolve, reject) => {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: `${OPENVIDU_SERVER_URL}/openvidu/api/sessions/${sessionId}/connection`,
|
|
data: JSON.stringify({ session: sessionId, role: 'MODERATOR' }),
|
|
headers: {
|
|
Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
|
|
'Content-Type': 'application/json',
|
|
},
|
|
success: (response) => resolve(response.token),
|
|
error: (error) => reject(error),
|
|
});
|
|
});
|
|
}
|
|
|
|
// function startRecording(sessionId) {
|
|
// return new Promise((resolve, reject) => {
|
|
// $.ajax({
|
|
// type: 'POST',
|
|
// url: `${OPENVIDU_SERVER_URL}/openvidu/api/recordings/start`,
|
|
// data: JSON.stringify({ session: sessionId }),
|
|
// headers: {
|
|
// Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
|
|
// 'Content-Type': 'application/json',
|
|
// },
|
|
// success: (response) => {console.log(response); resolve(response.id)},
|
|
// error: (error) => {
|
|
// reject(error)
|
|
// },
|
|
// });
|
|
// });
|
|
|
|
// }
|
|
|
|
// function stopRecording(recordingId) {
|
|
// return new Promise((resolve, reject) => {
|
|
// $.ajax({
|
|
// type: 'POST',
|
|
// url: `${OPENVIDU_SERVER_URL}/openvidu/api/recordings/stop/${recordingId}`,
|
|
// headers: {
|
|
// Authorization: 'Basic ' + btoa('OPENVIDUAPP:' + OPENVIDU_SERVER_SECRET),
|
|
// 'Content-Type': 'application/json',
|
|
// },
|
|
// success: (response) => resolve(response),
|
|
// error: (error) => {
|
|
// reject(error)
|
|
// },
|
|
// });
|
|
// });
|
|
// }
|