Allow Element Call to be started without audio / video interface (#924)

* 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 <robin@robin.town>
Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>

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:

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",

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

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

src/room/InCallView.tsx

@@ -372,27 +372,36 @@ export function InCallView({
 
   if (noControls) {
     footer = null;
-  } else if (reducedControls) {
-    footer = (
-      <div className={styles.footer}>
-        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
-        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
-        <HangupButton onPress={onLeave} />
-      </div>
-    );
   } else {
-    footer = (
+    const buttons: JSX.Element[] = [];
-      <div className={styles.footer}>
+
-        <MicButton muted={microphoneMuted} onPress={toggleMicrophoneMuted} />
+    buttons.push(
-        <VideoButton muted={localVideoMuted} onPress={toggleLocalVideoMuted} />
+      <MicButton
-        {canScreenshare && !hideScreensharing && !isSafari && (
+        key="1"
+        muted={microphoneMuted}
+        onPress={toggleMicrophoneMuted}
+      />,
+      <VideoButton
+        key="2"
+        muted={localVideoMuted}
+        onPress={toggleLocalVideoMuted}
+      />
+    );
+
+    if (!reducedControls) {
+      if (canScreenshare && !hideScreensharing && !isSafari) {
+        buttons.push(
           <ScreenshareButton
+            key="3"
             enabled={isScreensharing}
             onPress={toggleScreensharing}
           />
-        )}
+        );
-        {!maximisedParticipant && (
+      }
+      if (!maximisedParticipant) {
+        buttons.push(
           <OverflowMenu
+            key="4"
             inCall
             roomIdOrAlias={roomIdOrAlias}
             groupCall={groupCall}
@@ -400,10 +409,12 @@ export function InCallView({
             feedbackModalState={feedbackModalState}
             feedbackModalProps={feedbackModalProps}
           />
-        )}
+        );
-        <HangupButton onPress={onLeave} />
+      }
-      </div>
+    }
-    );
+
+    buttons.push(<HangupButton key="6" onPress={onLeave} />);
+    footer = <div className={styles.footer}>{buttons}</div>;
   }
 
   return (

src/room/useGroupCall.ts

@@ -98,12 +98,24 @@ function getParticipants(
         (f) => f.userId === member.userId && f.deviceId === deviceId
       );
 
-      participantInfoMap.set(deviceId, {
+      let connectionState: ConnectionState;
-        connectionState: feed
+      // 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,
       });
     }

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":
+"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.3":
-  version "0.1.0-alpha.2"
+  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.2.tgz#a09d0fea858e817da971a3c9f904632ef7b49eb6"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.4.tgz#1b20294e0354c3dcc9c7dc810d883198a4042f04"
-  integrity sha512-oVkBCh9YP7H9i4gAoQbZzswniczfo/aIptNa4dxRi4Ff9lSvUCFv6Hvzi7C+90c0/PWZLXjIDTIAWZYmwyd2fA==
+  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":
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#e782a2afa33032798eba7e92d2b3f28f9baa0564":
-  version "23.1.1"
+  version "23.4.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/64197bf4db6486d77708125d7fb2e8d7fe001f14"
+  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"