2020-03-18 22:47:56 +01:00
|
|
|
/*
|
|
|
|
Copyright 2020 New Vector Ltd.
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
|
|
|
// We have to trick webpack into loading our CSS for us.
|
|
|
|
require("./index.scss");
|
|
|
|
|
2021-06-30 14:28:31 +02:00
|
|
|
import { KJUR } from 'jsrsasign';
|
2020-09-05 05:55:50 +02:00
|
|
|
import {
|
2020-09-24 21:25:59 +02:00
|
|
|
IOpenIDCredentials,
|
2020-09-05 05:55:50 +02:00
|
|
|
IWidgetApiRequest,
|
|
|
|
VideoConferenceCapabilities,
|
2020-10-01 04:09:42 +02:00
|
|
|
WidgetApi,
|
2020-09-05 05:55:50 +02:00
|
|
|
} from "matrix-widget-api";
|
2020-10-01 04:09:42 +02:00
|
|
|
import { ElementWidgetActions } from "matrix-react-sdk/src/stores/widgets/ElementWidgetActions";
|
2020-03-18 22:47:56 +01:00
|
|
|
|
2020-09-08 10:44:11 +02:00
|
|
|
const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';
|
2020-03-18 22:47:56 +01:00
|
|
|
|
|
|
|
// Dev note: we use raw JS without many dependencies to reduce bundle size.
|
|
|
|
// We do not need all of React to render a Jitsi conference.
|
|
|
|
|
2020-07-21 12:30:28 +02:00
|
|
|
declare let JitsiMeetExternalAPI: any;
|
2020-03-18 22:47:56 +01:00
|
|
|
|
|
|
|
let inConference = false;
|
|
|
|
|
|
|
|
// Jitsi params
|
|
|
|
let jitsiDomain: string;
|
|
|
|
let conferenceId: string;
|
|
|
|
let displayName: string;
|
|
|
|
let avatarUrl: string;
|
|
|
|
let userId: string;
|
2020-09-04 12:14:52 +02:00
|
|
|
let jitsiAuth: string;
|
|
|
|
let roomId: string;
|
2020-09-24 21:25:59 +02:00
|
|
|
let openIdToken: IOpenIDCredentials;
|
2021-02-15 16:54:37 +01:00
|
|
|
let roomName: string;
|
2020-03-18 22:47:56 +01:00
|
|
|
|
|
|
|
let widgetApi: WidgetApi;
|
2020-09-16 22:39:40 +02:00
|
|
|
let meetApi: any; // JitsiMeetExternalAPI
|
2020-03-18 22:47:56 +01:00
|
|
|
|
2020-07-21 12:30:28 +02:00
|
|
|
(async function() {
|
2020-03-18 22:47:56 +01:00
|
|
|
try {
|
2021-07-16 20:37:48 +02:00
|
|
|
// The widget's options are encoded into the fragment to avoid leaking info to the server.
|
|
|
|
const widgetQuery = new URLSearchParams(window.location.hash.substring(1));
|
|
|
|
// The widget spec on the other hand requires the widgetId and parentUrl to show up in the regular query string.
|
|
|
|
const realQuery = new URLSearchParams(window.location.search.substring(1));
|
2020-03-18 22:47:56 +01:00
|
|
|
const qsParam = (name: string, optional = false): string => {
|
2021-07-16 20:37:48 +02:00
|
|
|
const vals = widgetQuery.has(name) ? widgetQuery.getAll(name) : realQuery.getAll(name);
|
|
|
|
if (!optional && vals.length !== 1) {
|
2020-03-18 22:47:56 +01:00
|
|
|
throw new Error(`Expected singular ${name} in query string`);
|
|
|
|
}
|
2021-07-16 20:37:48 +02:00
|
|
|
return <string>vals[0];
|
2020-03-18 22:47:56 +01:00
|
|
|
};
|
|
|
|
|
2020-04-01 12:08:53 +02:00
|
|
|
// If we have these params, expect a widget API to be available (ie. to be in an iframe
|
|
|
|
// inside a matrix client). Otherwise, assume we're on our own, eg. have been popped
|
|
|
|
// out into a browser.
|
|
|
|
const parentUrl = qsParam('parentUrl', true);
|
|
|
|
const widgetId = qsParam('widgetId', true);
|
2020-10-19 19:51:16 +02:00
|
|
|
const theme = qsParam('theme', true);
|
|
|
|
|
|
|
|
if (theme) {
|
2020-10-27 12:13:55 +01:00
|
|
|
document.body.classList.add(`theme-${theme.replace(" ", "_")}`);
|
2020-10-19 19:51:16 +02:00
|
|
|
}
|
2020-04-01 12:08:53 +02:00
|
|
|
|
2020-07-13 18:32:17 +02:00
|
|
|
// Set this up as early as possible because Element will be hitting it almost immediately.
|
2020-09-05 05:55:50 +02:00
|
|
|
let readyPromise: Promise<[void, void]>;
|
2020-04-01 12:08:53 +02:00
|
|
|
if (parentUrl && widgetId) {
|
2020-09-05 05:55:50 +02:00
|
|
|
const parentOrigin = new URL(qsParam('parentUrl')).origin;
|
|
|
|
widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
|
|
|
|
widgetApi.requestCapabilities(VideoConferenceCapabilities);
|
|
|
|
readyPromise = Promise.all([
|
2020-09-24 21:25:59 +02:00
|
|
|
new Promise<void>(resolve => {
|
2020-10-19 17:43:55 +02:00
|
|
|
widgetApi.once(`action:${ElementWidgetActions.ClientReady}`, ev => {
|
2020-09-24 21:25:59 +02:00
|
|
|
ev.preventDefault();
|
|
|
|
widgetApi.transport.reply(ev.detail, {});
|
|
|
|
resolve();
|
|
|
|
});
|
|
|
|
}),
|
|
|
|
new Promise<void>(resolve => {
|
|
|
|
widgetApi.once("ready", () => resolve());
|
|
|
|
}),
|
2020-04-01 12:08:53 +02:00
|
|
|
]);
|
2020-09-05 05:55:50 +02:00
|
|
|
widgetApi.start();
|
|
|
|
} else {
|
2020-10-15 00:16:08 +02:00
|
|
|
console.warn("No parent URL or no widget ID - assuming no widget API is available");
|
2020-04-01 12:08:53 +02:00
|
|
|
}
|
2020-03-24 16:14:59 +01:00
|
|
|
|
2020-03-18 22:47:56 +01:00
|
|
|
// Populate the Jitsi params now
|
2020-03-24 16:54:15 +01:00
|
|
|
jitsiDomain = qsParam('conferenceDomain');
|
2020-03-18 22:47:56 +01:00
|
|
|
conferenceId = qsParam('conferenceId');
|
|
|
|
displayName = qsParam('displayName', true);
|
|
|
|
avatarUrl = qsParam('avatarUrl', true); // http not mxc
|
|
|
|
userId = qsParam('userId');
|
2020-09-04 12:14:52 +02:00
|
|
|
jitsiAuth = qsParam('auth', true);
|
|
|
|
roomId = qsParam('roomId', true);
|
2021-02-15 16:54:37 +01:00
|
|
|
roomName = qsParam('roomName', true);
|
2020-03-18 22:47:56 +01:00
|
|
|
|
2020-04-01 12:08:53 +02:00
|
|
|
if (widgetApi) {
|
2020-09-22 17:01:55 +02:00
|
|
|
await readyPromise;
|
2020-04-01 12:08:53 +02:00
|
|
|
await widgetApi.setAlwaysOnScreen(false); // start off as detachable from the screen
|
2020-03-24 16:54:15 +01:00
|
|
|
|
2020-09-07 18:25:44 +02:00
|
|
|
// See https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
|
2020-09-08 10:44:11 +02:00
|
|
|
if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
|
2020-09-08 11:50:53 +02:00
|
|
|
// Request credentials, give callback to continue when received
|
2020-09-24 21:25:59 +02:00
|
|
|
openIdToken = await widgetApi.requestOpenIDConnectToken();
|
|
|
|
console.log("Got OpenID Connect token");
|
2020-09-07 17:10:19 +02:00
|
|
|
}
|
2020-09-16 22:39:40 +02:00
|
|
|
|
2020-11-25 15:16:55 +01:00
|
|
|
// TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/element-web/issues/12795)
|
2020-03-18 22:47:56 +01:00
|
|
|
|
2020-10-19 17:43:55 +02:00
|
|
|
widgetApi.on(`action:${ElementWidgetActions.HangupCall}`,
|
2020-10-01 04:51:31 +02:00
|
|
|
(ev: CustomEvent<IWidgetApiRequest>) => {
|
|
|
|
if (meetApi) meetApi.executeCommand('hangup');
|
|
|
|
widgetApi.transport.reply(ev.detail, {}); // ack
|
|
|
|
},
|
|
|
|
);
|
2021-03-04 19:00:55 +01:00
|
|
|
widgetApi.on(`action:${ElementWidgetActions.StartLiveStream}`,
|
|
|
|
(ev: CustomEvent<IWidgetApiRequest>) => {
|
|
|
|
if (meetApi) {
|
|
|
|
meetApi.executeCommand('startRecording', {
|
|
|
|
mode: 'stream',
|
|
|
|
// this looks like it should be rtmpStreamKey but we may be on too old
|
|
|
|
// a version of jitsi meet
|
|
|
|
//rtmpStreamKey: ev.detail.data.rtmpStreamKey,
|
|
|
|
youtubeStreamKey: ev.detail.data.rtmpStreamKey,
|
|
|
|
});
|
|
|
|
widgetApi.transport.reply(ev.detail, {}); // ack
|
|
|
|
} else {
|
2021-06-30 14:28:31 +02:00
|
|
|
widgetApi.transport.reply(ev.detail, { error: { message: "Conference not joined" } });
|
2021-03-04 19:00:55 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
);
|
2020-09-07 17:10:19 +02:00
|
|
|
}
|
2020-10-01 17:59:13 +02:00
|
|
|
|
|
|
|
enableJoinButton(); // always enable the button
|
2020-03-18 22:47:56 +01:00
|
|
|
} catch (e) {
|
|
|
|
console.error("Error setting up Jitsi widget", e);
|
2020-09-07 18:51:16 +02:00
|
|
|
document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
|
2020-03-18 22:47:56 +01:00
|
|
|
}
|
|
|
|
})();
|
|
|
|
|
2020-09-07 17:10:19 +02:00
|
|
|
function enableJoinButton() {
|
|
|
|
document.getElementById("joinButton").onclick = () => joinConference();
|
|
|
|
}
|
|
|
|
|
2020-03-18 22:47:56 +01:00
|
|
|
function switchVisibleContainers() {
|
|
|
|
inConference = !inConference;
|
|
|
|
document.getElementById("jitsiContainer").style.visibility = inConference ? 'unset' : 'hidden';
|
|
|
|
document.getElementById("joinButtonContainer").style.visibility = inConference ? 'hidden' : 'unset';
|
|
|
|
}
|
|
|
|
|
2020-09-04 12:14:52 +02:00
|
|
|
/**
|
|
|
|
* Create a JWT token fot jitsi openidtoken-jwt auth
|
|
|
|
*
|
2020-09-07 18:25:44 +02:00
|
|
|
* See https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification
|
2020-09-04 12:14:52 +02:00
|
|
|
*/
|
|
|
|
function createJWTToken() {
|
|
|
|
// Header
|
2021-06-30 14:28:31 +02:00
|
|
|
const header = { alg: 'HS256', typ: 'JWT' };
|
2020-09-04 12:14:52 +02:00
|
|
|
// Payload
|
|
|
|
const payload = {
|
2020-09-07 18:23:36 +02:00
|
|
|
// As per Jitsi token auth, `iss` needs to be set to something agreed between
|
|
|
|
// JWT generating side and Prosody config. Since we have no configuration for
|
|
|
|
// the widgets, we can't set one anywhere. Using the Jitsi domain here probably makes sense.
|
|
|
|
iss: jitsiDomain,
|
2020-09-04 12:14:52 +02:00
|
|
|
sub: jitsiDomain,
|
|
|
|
aud: `https://${jitsiDomain}`,
|
|
|
|
room: "*",
|
|
|
|
context: {
|
|
|
|
matrix: {
|
2020-09-24 21:25:59 +02:00
|
|
|
token: openIdToken.access_token,
|
2020-09-04 12:14:52 +02:00
|
|
|
room_id: roomId,
|
2021-01-19 18:23:23 +01:00
|
|
|
server_name: openIdToken.matrix_server_name,
|
2020-09-04 12:14:52 +02:00
|
|
|
},
|
|
|
|
user: {
|
|
|
|
avatar: avatarUrl,
|
|
|
|
name: displayName,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
// Sign JWT
|
|
|
|
// The secret string here is irrelevant, we're only using the JWT
|
|
|
|
// to transport data to Prosody in the Jitsi stack.
|
|
|
|
return KJUR.jws.JWS.sign(
|
2020-09-07 17:10:19 +02:00
|
|
|
'HS256',
|
2020-09-04 12:14:52 +02:00
|
|
|
JSON.stringify(header),
|
|
|
|
JSON.stringify(payload),
|
2020-09-07 17:10:19 +02:00
|
|
|
'notused',
|
2020-09-04 12:14:52 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-03-18 22:47:56 +01:00
|
|
|
function joinConference() { // event handler bound in HTML
|
2020-09-08 11:50:53 +02:00
|
|
|
let jwt;
|
|
|
|
if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
|
2020-10-01 04:51:31 +02:00
|
|
|
if (!openIdToken?.access_token) { // eslint-disable-line camelcase
|
2020-09-08 11:50:53 +02:00
|
|
|
// We've failing to get a token, don't try to init conference
|
|
|
|
console.warn('Expected to have an OpenID credential, cannot initialize widget.');
|
|
|
|
document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
jwt = createJWTToken();
|
|
|
|
}
|
|
|
|
|
2020-03-18 22:47:56 +01:00
|
|
|
switchVisibleContainers();
|
|
|
|
|
2020-09-08 11:52:17 +02:00
|
|
|
if (widgetApi) {
|
|
|
|
// ignored promise because we don't care if it works
|
|
|
|
// noinspection JSIgnoredPromiseFromCall
|
|
|
|
widgetApi.setAlwaysOnScreen(true);
|
|
|
|
}
|
2020-03-18 22:47:56 +01:00
|
|
|
|
2020-03-31 20:19:17 +02:00
|
|
|
console.warn(
|
|
|
|
"[Jitsi Widget] The next few errors about failing to parse URL parameters are fine if " +
|
|
|
|
"they mention 'external_api' or 'jitsi' in the stack. They're just Jitsi Meet trying to parse " +
|
|
|
|
"our fragment values and not recognizing the options.",
|
|
|
|
);
|
2020-09-04 12:14:52 +02:00
|
|
|
const options = {
|
2020-03-18 22:47:56 +01:00
|
|
|
width: "100%",
|
|
|
|
height: "100%",
|
|
|
|
parentNode: document.querySelector("#jitsiContainer"),
|
|
|
|
roomName: conferenceId,
|
|
|
|
interfaceConfigOverwrite: {
|
|
|
|
SHOW_JITSI_WATERMARK: false,
|
|
|
|
SHOW_WATERMARK_FOR_GUESTS: false,
|
|
|
|
MAIN_TOOLBAR_BUTTONS: [],
|
|
|
|
VIDEO_LAYOUT_FIT: "height",
|
|
|
|
},
|
2020-09-08 11:50:53 +02:00
|
|
|
jwt: jwt,
|
2020-09-04 12:14:52 +02:00
|
|
|
};
|
2020-09-08 11:50:53 +02:00
|
|
|
|
2020-09-16 22:39:40 +02:00
|
|
|
meetApi = new JitsiMeetExternalAPI(jitsiDomain, options);
|
2020-03-18 22:47:56 +01:00
|
|
|
if (displayName) meetApi.executeCommand("displayName", displayName);
|
|
|
|
if (avatarUrl) meetApi.executeCommand("avatarUrl", avatarUrl);
|
|
|
|
if (userId) meetApi.executeCommand("email", userId);
|
2021-02-15 16:54:37 +01:00
|
|
|
if (roomName) meetApi.executeCommand("subject", roomName);
|
2020-03-18 22:47:56 +01:00
|
|
|
|
|
|
|
meetApi.on("readyToClose", () => {
|
|
|
|
switchVisibleContainers();
|
|
|
|
|
2020-09-08 11:52:17 +02:00
|
|
|
if (widgetApi) {
|
|
|
|
// ignored promise because we don't care if it works
|
|
|
|
// noinspection JSIgnoredPromiseFromCall
|
|
|
|
widgetApi.setAlwaysOnScreen(false);
|
|
|
|
}
|
2020-03-18 22:47:56 +01:00
|
|
|
|
|
|
|
document.getElementById("jitsiContainer").innerHTML = "";
|
2020-09-16 22:39:40 +02:00
|
|
|
meetApi = null;
|
2020-03-18 22:47:56 +01:00
|
|
|
});
|
|
|
|
}
|