mirror of github.com/vector-im/element-call with some private sauce
Find a file
Robin Townsend f1ee3604de Make Element Call work in Firefox's resist fingerprinting mode
This one is gonna take some explaining:

When in resist fingerprinting mode, Firefox exhibits some funny behavior: when we ask for the the list of media devices, it gives us fake device IDs. But when the js-sdk requests a stream for any of those devices, Firefox associates the stream with the real device ID.

Now, in order to get the names of devices included in their metadata when you query the device list, you need to be holding a stream. For this reason, useMediaHandler was set up to reload the device list whenever matrix-js-sdk got a new local stream. But because of the inconsistency in device IDs, it would enter an infinite cycle telling matrix-js-sdk to request a stream for the fake device ID, but with matrix-js-sdk always responding with the real device ID.

I already wasn't happy with useMediaHandler's use of @ts-ignore comments to inspect private js-sdk fields, and in the meantime we've come up with a simpler function for requesting device names, so I decided to refactor useMediaHandler to use it instead. Importantly, it doesn't break in resist fingerprinting mode.

This created a new UX issue though: now, when on the lobby screen, useMediaHandler would request microphone access so it could get device names, followed immediately by a *second* pop-up for the lobby screen to request camera access. That's 1 pop-up too many, so I changed useMediaHandler to only request device names when a component is mounted that actually wants to show them. Currently, the settings modal is the only such component, and users normally only open it *after* granting full audio/video access, so this solution works out quite nicely.
2023-05-15 23:13:18 -04:00
.github Remove NODE_OPTIONS from GHA commands, as defaulted in package.json now. 2023-05-03 12:57:03 +01:00
.storybook Remove dependency on matrix-react-sdk 2022-04-07 14:22:36 -07:00
.vscode Apply Prettier to the entire project 2022-12-09 14:34:25 -05:00
config Don't pass null / undefined as attribute value 2023-04-03 17:41:40 +01:00
public Update translation files 2023-05-14 00:34:03 +00:00
scripts Fix my lazy regexing 2023-04-06 17:59:48 +01:00
src Make Element Call work in Firefox's resist fingerprinting mode 2023-05-15 23:13:18 -04:00
test Fix tests 2023-05-14 01:32:11 -04:00
.dockerignore Add CI 2021-12-20 16:59:39 +00:00
.env.example Make sample config just have the HS config 2022-12-20 18:13:08 +00:00
.eslintrc.cjs Apply Prettier to the entire project 2022-12-09 14:34:25 -05:00
.gitignore Add coverage reports to .gitignore 2023-02-15 15:13:39 -05:00
.postcssrc.json Add automatic css prefixing 2021-10-14 17:41:59 -07:00
.prettierignore Add prettier support 2022-05-03 14:24:04 +01:00
.prettierrc.json Add prettier support 2022-05-03 14:24:04 +01:00
babel.config.cjs Add jest 2022-10-26 13:21:06 +02:00
CONTRIBUTING.md Apply Prettier to the entire project 2022-12-09 14:34:25 -05:00
demo.jpg Add a demo screenshot to the README 2023-01-20 10:51:28 -05:00
Dockerfile Upload source maps to sentry (#810) 2023-01-03 10:48:48 +00:00
i18next-parser.config.js Apply Prettier to the entire project 2022-12-09 14:34:25 -05:00
LICENSE Add LICENSE 2021-07-16 14:31:42 -07:00
package.json Update matrix-js-sdk 2023-05-15 11:04:57 -04:00
README.md Update README.md (#953) 2023-03-10 14:42:24 +01:00
tsconfig.json Apply Prettier to the entire project 2022-12-09 14:34:25 -05:00
vite.config.js Upload source maps to sentry (#810) 2023-01-03 10:48:48 +00:00
yarn.lock Update matrix-js-sdk 2023-05-15 11:04:57 -04:00

Element Call

Chat Translate

Full mesh group calls powered by Matrix, implementing MatrixRTC.

A demo of Element Call with six people

To try it out, visit our hosted version at call.element.io. You can also find the latest development version continuously deployed to element-call.netlify.app.

Host it yourself

Until prebuilt tarballs are available, you'll need to build Element Call from source. First, clone and install the package:

git clone https://github.com/vector-im/element-call.git
cd element-call
yarn
yarn build

If all went well, you can now find the build output under dist as a series of static files. These can be hosted using any web server of your choice.

You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default, but you can change this in the config file). This goes in public/config.json - you can use the sample as a starting point:

cp config/config.sample.json public/config.json
# edit public/config.json

Because Element Call uses client-side routing, your server must be able to route any requests to non-existing paths back to /index.html. For example, in Nginx you can achieve this with the try_files directive:

server {
    ...
    location / {
        ...
        try_files $uri /$uri /index.html;
    }
}

By default, the app expects you to have a Matrix homeserver (such as Synapse) installed locally and running on port 8008. If you wish to use a homeserver on a different URL or one that is hosted on a different server, you can add a config file as above, and include the homeserver URL that you'd like to use.

Element Call requires a homeserver with registration enabled without any 3pid or token requirements, if you want it to be used by unregistered users. Furthermore, it is not recommended to use it with an existing homeserver where user accounts have joined normal rooms, as it may not be able to handle those yet and it may behave unreliably.

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:

{
  ...

  "features": {
    "feature_group_calls_without_video_and_audio": true
  }
}

Development

Element Call is built against matrix-js-sdk. To get started, clone, install, and link the package:

git clone https://github.com/matrix-org/matrix-js-sdk.git
cd matrix-js-sdk
yarn
yarn link

Next, we can set up this project:

git clone https://github.com/vector-im/element-call.git
cd element-call
yarn
yarn link matrix-js-sdk

You're now ready to launch the development server:

yarn dev

Configuration

There are currently two different config files. .env holds variables that are used at build time, while public/config.json holds variables that are used at runtime. Documentation and default values for public/config.json can be found in ConfigOptions.ts.

Translation

If you'd like to help translate Element Call, head over to translate.element.io. You're also encouraged to join the Element Translators space to discuss and coordinate translation efforts.