From 29e41c722778affb6a9924408ee606e0fd7c963f Mon Sep 17 00:00:00 2001 From: Enrico Schwendig Date: Thu, 2 Mar 2023 18:48:32 +0100 Subject: [PATCH] Allow Element Call to be started without audio / video interface (#924) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * config: add feature in `config.json` * groupCall: adjust connection state in feed if allowCallWithoutVideoAndAudio * matrix-js-sdk: update version for allowCallWithoutVideoAndAudio - I modified the SDK so that mute unmute work without media and check device permission inside the SDK - allowCallWithoutVideoAndAudio is only checked at one point outside the SDK * docu: add join group call without media docu in READMe --------- Co-authored-by: Robin Townsend Co-authored-by: Šimon Brandner --- README.md | 16 ++++++++++++ package.json | 2 +- src/config/ConfigOptions.ts | 8 ++++++ src/matrix-utils.ts | 18 ++++++++------ src/room/InCallView.tsx | 49 +++++++++++++++++++++++-------------- src/room/useGroupCall.ts | 18 +++++++++++--- yarn.lock | 16 ++++++------ 7 files changed, 89 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index cd4b65d..511c7dc 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,22 @@ Element Call requires a homeserver with registration enabled without any 3pid or Therefore, to use a self-hosted homeserver, this is recommended to be a new server where any user account created has not joined any normal rooms anywhere in the Matrix federated network. The homeserver used can be setup to disable federation, so as to prevent spam registrations (if you keep registrations open) and to ensure Element Call continues to work in case any user decides to log in to their Element Call account using the standard Element app and joins normal rooms that Element Call cannot handle. +### Features + +#### Allow joining group calls without a camera and a microphone + +You can allow joining a group call without video and audio enabling this feature in your `config.json`: + +```json +{ + ... + + "features": { + "feature_group_calls_without_video_and_audio": true + } +} +``` + ## Development Element Call is built against [matrix-js-sdk](https://github.com/matrix-org/matrix-js-sdk/pull/2553). To get started, clone, install, and link the package: diff --git a/package.json b/package.json index 4242b19..94dadc0 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "i18next-browser-languagedetector": "^6.1.8", "i18next-http-backend": "^1.4.4", "lodash": "^4.17.21", - "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#64197bf4db6486d77708125d7fb2e8d7fe001f14", + "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#e782a2afa33032798eba7e92d2b3f28f9baa0564", "matrix-widget-api": "^1.0.0", "mermaid": "^8.13.8", "normalize.css": "^8.0.1", diff --git a/src/config/ConfigOptions.ts b/src/config/ConfigOptions.ts index e46ffec..5899d45 100644 --- a/src/config/ConfigOptions.ts +++ b/src/config/ConfigOptions.ts @@ -44,6 +44,14 @@ export interface ConfigOptions { server_name: string; }; }; + + /** + * Allow to join a group calls without audio and video. + * TEMPORARY: Is a feature that's not proved and experimental + */ + features?: { + feature_group_calls_without_video_and_audio: boolean; + }; } // Overrides members from ConfigOptions that are always provided by the diff --git a/src/matrix-utils.ts b/src/matrix-utils.ts index fa3199b..8cec21d 100644 --- a/src/matrix-utils.ts +++ b/src/matrix-utils.ts @@ -92,10 +92,14 @@ export async function initClient( indexedDB = window.indexedDB; } catch (e) {} - const storeOpts = {} as ICreateClientOpts; + const baseOpts = { + fallbackICEServerAllowed: fallbackICEServerAllowed, + isVoipWithNoMediaAllowed: + Config.get().features?.feature_group_calls_without_video_and_audio, + } as ICreateClientOpts; if (indexedDB && localStorage) { - storeOpts.store = new IndexedDBStore({ + baseOpts.store = new IndexedDBStore({ indexedDB: window.indexedDB, localStorage, dbName: SYNC_STORE_NAME, @@ -107,7 +111,7 @@ export async function initClient( : () => new IndexedDBWorker(), }); } else if (localStorage) { - storeOpts.store = new MemoryStore({ localStorage }); + baseOpts.store = new MemoryStore({ localStorage }); } // Check whether we have crypto data store. If we are restoring a session @@ -139,14 +143,14 @@ export async function initClient( } if (indexedDB) { - storeOpts.cryptoStore = new IndexedDBCryptoStore( + baseOpts.cryptoStore = new IndexedDBCryptoStore( indexedDB, CRYPTO_STORE_NAME ); } else if (localStorage) { - storeOpts.cryptoStore = new LocalStorageCryptoStore(localStorage); + baseOpts.cryptoStore = new LocalStorageCryptoStore(localStorage); } else { - storeOpts.cryptoStore = new MemoryCryptoStore(); + baseOpts.cryptoStore = new MemoryCryptoStore(); } // XXX: we read from the URL params in RoomPage too: @@ -160,7 +164,7 @@ export async function initClient( } const client = createClient({ - ...storeOpts, + ...baseOpts, ...clientOptions, useAuthorizationHeader: true, // Use a relatively low timeout for API calls: this is a realtime app diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx index 48b1cbf..1ed1be3 100644 --- a/src/room/InCallView.tsx +++ b/src/room/InCallView.tsx @@ -372,27 +372,36 @@ export function InCallView({ if (noControls) { footer = null; - } else if (reducedControls) { - footer = ( -
- - - -
- ); } else { - footer = ( -
- - - {canScreenshare && !hideScreensharing && !isSafari && ( + const buttons: JSX.Element[] = []; + + buttons.push( + , + + ); + + if (!reducedControls) { + if (canScreenshare && !hideScreensharing && !isSafari) { + buttons.push( - )} - {!maximisedParticipant && ( + ); + } + if (!maximisedParticipant) { + buttons.push( - )} - -
- ); + ); + } + } + + buttons.push(); + footer =
{buttons}
; } return ( diff --git a/src/room/useGroupCall.ts b/src/room/useGroupCall.ts index 37484b4..60f2d67 100644 --- a/src/room/useGroupCall.ts +++ b/src/room/useGroupCall.ts @@ -98,12 +98,24 @@ function getParticipants( (f) => f.userId === member.userId && f.deviceId === deviceId ); - participantInfoMap.set(deviceId, { - connectionState: feed + let connectionState: ConnectionState; + // If we allow calls without media, we have no feeds and cannot read the connection status from them. + // @TODO: The connection state should generally not be determined by the feed. + if ( + groupCall.allowCallWithoutVideoAndAudio && + !feed && + !participant.screensharing + ) { + connectionState = ConnectionState.Connected; + } else { + connectionState = feed ? feed.connected ? ConnectionState.Connected : ConnectionState.WaitMedia - : ConnectionState.EstablishingCall, + : ConnectionState.EstablishingCall; + } + participantInfoMap.set(deviceId, { + connectionState, presenter: participant.screensharing, }); } diff --git a/yarn.lock b/yarn.lock index 7980fa2..7803544 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1821,10 +1821,10 @@ resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0" integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw== -"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.2": - version "0.1.0-alpha.2" - resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6" - integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA== +"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.3": + version "0.1.0-alpha.4" + resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.4.tgz#1b20294e0354c3dcc9c7dc810d883198a4042f04" + integrity sha512-mdaDKrw3P5ZVCpq0ioW0pV6ihviDEbS8ZH36kpt9stLKHwwDSopPogE6CkQhi0B1jn1yBUtOYi32mBV/zcOR7g== "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz": version "3.2.14" @@ -10362,12 +10362,12 @@ matrix-events-sdk@0.0.1: resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd" integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA== -"matrix-js-sdk@github:matrix-org/matrix-js-sdk#64197bf4db6486d77708125d7fb2e8d7fe001f14": - version "23.1.1" - resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/64197bf4db6486d77708125d7fb2e8d7fe001f14" +"matrix-js-sdk@github:matrix-org/matrix-js-sdk#e782a2afa33032798eba7e92d2b3f28f9baa0564": + version "23.4.0" + resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e782a2afa33032798eba7e92d2b3f28f9baa0564" dependencies: "@babel/runtime" "^7.12.5" - "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.2" + "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.3" another-json "^0.2.0" bs58 "^5.0.0" content-type "^1.0.4"