From 29553c11512c125be763db99cb8661ee8225fa9d Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 4 Jul 2023 19:21:35 +0100 Subject: [PATCH] Revert "Support for getting SFU config using OIDC" --- config/element_io_preview.json | 3 +- src/config/ConfigOptions.ts | 6 ++- src/livekit/OpenIDLoader.tsx | 96 ---------------------------------- src/livekit/openIDSFU.ts | 54 ------------------- src/livekit/useLiveKit.ts | 28 ++++++++-- src/room/GroupCallView.tsx | 36 ++++--------- src/room/InCallView.tsx | 17 +++--- 7 files changed, 51 insertions(+), 189 deletions(-) delete mode 100644 src/livekit/OpenIDLoader.tsx delete mode 100644 src/livekit/openIDSFU.ts diff --git a/config/element_io_preview.json b/config/element_io_preview.json index cb6fc08..30c2cc8 100644 --- a/config/element_io_preview.json +++ b/config/element_io_preview.json @@ -6,7 +6,8 @@ } }, "livekit": { - "livekit_service_url": "https://lk-jwt-service.lab.element.dev" + "server_url": "wss://sfu.call.element.dev", + "jwt_service_url": "https://voip-sip-poc.element.io/lk/jwt_service" }, "posthog": { "api_key": "phc_rXGHx9vDmyEvyRxPziYtdVIv0ahEv8A9uLWFcCi1WcU", diff --git a/src/config/ConfigOptions.ts b/src/config/ConfigOptions.ts index f878ec5..1cee00f 100644 --- a/src/config/ConfigOptions.ts +++ b/src/config/ConfigOptions.ts @@ -55,8 +55,10 @@ export interface ConfigOptions { // Describes the LiveKit configuration to be used. livekit?: { - // The link to the service that returns a livekit url and token to use it - livekit_service_url: string; + // The LiveKit server URL to connect to. + server_url: string; + // The link to the service that generates JWT tokens to join LiveKit rooms. + jwt_service_url: string; }; /** diff --git a/src/livekit/OpenIDLoader.tsx b/src/livekit/OpenIDLoader.tsx deleted file mode 100644 index 9e68d31..0000000 --- a/src/livekit/OpenIDLoader.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/* -Copyright 2023 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. -*/ - -import { - ReactNode, - createContext, - useContext, - useEffect, - useState, -} from "react"; -import { logger } from "matrix-js-sdk/src/logger"; - -import { - OpenIDClientParts, - SFUConfig, - getSFUConfigWithOpenID, -} from "./openIDSFU"; -import { ErrorView, LoadingView } from "../FullScreenView"; - -interface Props { - client: OpenIDClientParts; - livekitServiceURL: string; - roomName: string; - children: ReactNode; -} - -const SFUConfigContext = createContext(undefined); - -export const useSFUConfig = () => useContext(SFUConfigContext); - -export function OpenIDLoader({ - client, - livekitServiceURL, - roomName, - children, -}: Props) { - const [state, setState] = useState< - SFUConfigLoading | SFUConfigLoaded | SFUConfigFailed - >({ kind: "loading" }); - - useEffect(() => { - (async () => { - try { - const result = await getSFUConfigWithOpenID( - client, - livekitServiceURL, - roomName - ); - setState({ kind: "loaded", sfuConfig: result }); - } catch (e) { - logger.error("Failed to fetch SFU config: ", e); - setState({ kind: "failed", error: e }); - } - })(); - }, [client, livekitServiceURL, roomName]); - - switch (state.kind) { - case "loading": - return ; - case "failed": - return ; - case "loaded": - return ( - - {children} - - ); - } -} - -type SFUConfigLoading = { - kind: "loading"; -}; - -type SFUConfigLoaded = { - kind: "loaded"; - sfuConfig: SFUConfig; -}; - -type SFUConfigFailed = { - kind: "failed"; - error: Error; -}; diff --git a/src/livekit/openIDSFU.ts b/src/livekit/openIDSFU.ts deleted file mode 100644 index 89a5d4f..0000000 --- a/src/livekit/openIDSFU.ts +++ /dev/null @@ -1,54 +0,0 @@ -/* -Copyright 2023 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. -*/ - -import { MatrixClient } from "matrix-js-sdk"; -import { logger } from "matrix-js-sdk/src/logger"; - -export interface SFUConfig { - url: string; - jwt: string; -} - -// The bits we need from MatrixClient -export type OpenIDClientParts = Pick< - MatrixClient, - "getOpenIdToken" | "getDeviceId" ->; - -export async function getSFUConfigWithOpenID( - client: OpenIDClientParts, - livekitServiceURL: string, - roomName: string -): Promise { - const openIdToken = await client.getOpenIdToken(); - logger.debug("Got openID token", openIdToken); - - const res = await fetch(livekitServiceURL + "/sfu/get", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - room: roomName, - openid_token: openIdToken, - device_id: client.getDeviceId(), - }), - }); - if (!res.ok) { - throw new Error("SFO Config fetch failed with status code " + res.status); - } - return await res.json(); -} diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts index c35f4f4..2276740 100644 --- a/src/livekit/useLiveKit.ts +++ b/src/livekit/useLiveKit.ts @@ -1,9 +1,8 @@ import { Room, RoomOptions } from "livekit-client"; -import { useLiveKitRoom } from "@livekit/components-react"; +import { useLiveKitRoom, useToken } from "@livekit/components-react"; import { useMemo } from "react"; import { defaultLiveKitOptions } from "./options"; -import { SFUConfig } from "./openIDSFU"; export type UserChoices = { audio?: DeviceChoices; @@ -15,10 +14,29 @@ export type DeviceChoices = { enabled: boolean; }; +export type LiveKitConfig = { + sfuUrl: string; + jwtUrl: string; + roomName: string; + userDisplayName: string; + userIdentity: string; +}; + export function useLiveKit( userChoices: UserChoices, - sfuConfig: SFUConfig + config: LiveKitConfig ): Room | undefined { + const tokenOptions = useMemo( + () => ({ + userInfo: { + name: config.userDisplayName, + identity: config.userIdentity, + }, + }), + [config.userDisplayName, config.userIdentity] + ); + const token = useToken(config.jwtUrl, config.roomName, tokenOptions); + const roomOptions = useMemo((): RoomOptions => { const options = defaultLiveKitOptions; options.videoCaptureDefaults = { @@ -33,8 +51,8 @@ export function useLiveKit( }, [userChoices.video, userChoices.audio]); const { room } = useLiveKitRoom({ - token: sfuConfig.jwt, - serverUrl: sfuConfig.url, + token, + serverUrl: config.sfuUrl, audio: userChoices.audio?.enabled ?? false, video: userChoices.video?.enabled ?? false, options: roomOptions, diff --git a/src/room/GroupCallView.tsx b/src/room/GroupCallView.tsx index 3532d73..76a4c41 100644 --- a/src/room/GroupCallView.tsx +++ b/src/room/GroupCallView.tsx @@ -28,15 +28,13 @@ import { useGroupCall } from "./useGroupCall"; import { ErrorView, FullScreenView } from "../FullScreenView"; import { LobbyView } from "./LobbyView"; import { MatrixInfo } from "./VideoPreview"; +import { ActiveCall } from "./InCallView"; import { CallEndedView } from "./CallEndedView"; import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler"; import { PosthogAnalytics } from "../analytics/PosthogAnalytics"; import { useProfile } from "../profile/useProfile"; import { UserChoices } from "../livekit/useLiveKit"; import { findDeviceByName } from "../media-utils"; -import { OpenIDLoader } from "../livekit/OpenIDLoader"; -import { ActiveCall } from "./InCallView"; -import { Config } from "../config/Config"; declare global { interface Window { @@ -220,33 +218,21 @@ export function GroupCallView({ undefined ); - const lkServiceURL = Config.get().livekit?.livekit_service_url; - - if (!lkServiceURL) { - return ; - } - if (error) { return ; } else if (state === GroupCallState.Entered && userChoices) { return ( - - - + participants={participants} + onLeave={onLeave} + unencryptedEventsFromUsers={unencryptedEventsFromUsers} + hideHeader={hideHeader} + matrixInfo={matrixInfo} + userChoices={userChoices} + otelGroupCallMembership={otelGroupCallMembership} + /> ); } else if (left) { // The call ended view is shown for two reasons: prompting guests to create diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 98a3a63..e3c7e94 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -72,6 +72,7 @@ import { MatrixInfo } from "./VideoPreview"; import { useJoinRule } from "./useJoinRule"; import { ParticipantInfo } from "./useGroupCall"; import { ItemData, TileContent } from "../video-grid/VideoTile"; +import { Config } from "../config/Config"; import { NewVideoGrid } from "../video-grid/NewVideoGrid"; import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership"; import { SettingsModal } from "../settings/SettingsModal"; @@ -83,7 +84,6 @@ import { UserChoices, useLiveKit } from "../livekit/useLiveKit"; import { useMediaDevices } from "../livekit/useMediaDevices"; import { useFullscreen } from "./useFullscreen"; import { useLayoutStates } from "../video-grid/Layout"; -import { useSFUConfig } from "../livekit/OpenIDLoader"; const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {}); // There is currently a bug in Safari our our code with cloning and sending MediaStreams @@ -91,13 +91,18 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {}); // For now we can disable screensharing in Safari. const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); -export interface ActiveCallProps extends Omit { +interface ActiveCallProps extends Omit { userChoices: UserChoices; } export function ActiveCall(props: ActiveCallProps) { - const sfuConfig = useSFUConfig(); - const livekitRoom = useLiveKit(props.userChoices, sfuConfig); + const livekitRoom = useLiveKit(props.userChoices, { + sfuUrl: Config.get().livekit!.server_url, + jwtUrl: `${Config.get().livekit!.jwt_service_url}/token`, + roomName: props.matrixInfo.roomName, + userDisplayName: props.matrixInfo.displayName, + userIdentity: `${props.client.getUserId()}:${props.client.getDeviceId()}`, + }); return ( livekitRoom && ( @@ -108,7 +113,7 @@ export function ActiveCall(props: ActiveCallProps) { ); } -export interface InCallViewProps { +interface Props { client: MatrixClient; groupCall: GroupCall; livekitRoom: Room; @@ -130,7 +135,7 @@ export function InCallView({ hideHeader, matrixInfo, otelGroupCallMembership, -}: InCallViewProps) { +}: Props) { const { t } = useTranslation(); usePreventScroll();