Robin 3a754479dc Add simple global controls to put the call in picture-in-picture mode (#2573)
* Stop sharing state observables when the view model is destroyed

By default, observables running with shareReplay will continue running forever even if there are no subscribers. We need to stop them when the view model is destroyed to avoid memory leaks and other unintuitive behavior.

* Hydrate the call view model in a less hacky way

This ensures that only a single view model is created per call, unlike the previous solution which would create extra view models in strict mode which it was unable to dispose of. The other way was invalid because React gives us no way to reliably dispose of a resource created in the render phase. This is essentially a memory leak fix.

* Add simple global controls to put the call in picture-in-picture mode

Our web and mobile apps (will) all support putting calls into a picture-in-picture mode. However, it'd be nice to have a way of doing this that's more explicit than a breakpoint, because PiP views could in theory get fairly large. Specifically, on mobile, we want a way to do this that can tell you whether the call is ongoing, and that works even without the widget API (because we support SPA calls in the Element X apps…)

To this end, I've created a simple global "controls" API on the window. Right now it only has methods for controlling the picture-in-picture state, but in theory we can expand it to also control mute states, which is current possible via the widget API only.

* Fix footer appearing in large PiP views

* Add a method for whether you can enter picture-in-picture mode

* Have the controls emit booleans directly
2024-08-27 13:47:20 +02:00
2023-10-11 10:42:04 -04:00
2024-07-24 13:00:13 +02:00
2023-04-06 17:59:48 +01:00
2021-12-20 16:59:39 +00:00
2023-08-28 17:14:40 -04:00
2021-10-14 17:41:59 -07:00
2022-05-03 14:24:04 +01:00
2022-05-03 14:24:04 +01:00
2023-06-30 18:46:10 -04:00
2023-01-20 10:51:28 -05:00
2023-01-03 10:48:48 +00:00
2021-07-16 14:31:42 -07:00
2024-08-01 16:41:19 -04:00
2023-12-18 16:59:48 -05:00
2024-02-15 22:34:59 -05:00

Element Call

Chat Localazy

Group calls with WebRTC that leverage Matrix and an open-source WebRTC toolkit from LiveKit.

For prior version of the Element Call that relied solely on full-mesh logic, check full-mesh branch.

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 call.element.dev.

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/element-hq/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 that can be configured with custom routes (see below).

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.

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.

If you're using Synapse, you'll need to additionally add the following to homeserver.yaml or Element Call won't work:

experimental_features:
    msc3266_enabled: true

MSC3266 allows to request a room summary of rooms you are not joined. The summary contains the room join rules. We need that to decide if the user gets prompted with the option to knock ("ask to join"), a cannot join error or the join view.

Element Call requires a Livekit SFU behind a Livekit jwt service to work. The url to the Livekit jwt service can either be configured in the config of Element Call (fallback/legacy configuration) or be configured by your homeserver via the .well-known. This is the recommended method.

The configuration is a list of Foci configs:

"org.matrix.msc4143.rtc_foci": [
    {
        "type": "livekit",
        "livekit_service_url": "https://someurl.com"
    },
     {
        "type": "livekit",
        "livekit_service_url": "https://livekit2.com"
    },
    {
        "type": "another_foci",
        "props_for_another_foci": "val"
    },
]

Translation

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

Development

Frontend

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/element-hq/element-call.git
cd element-call
yarn
yarn link matrix-js-sdk

You're now ready to launch the development server:

yarn dev

Backend

A docker compose file is provided to start a LiveKit server and auth service for development. These use a test 'secret' published in this repository, so this must be used only for local development and never be exposed to the public Internet.

To use it, add a SFU parameter in your local config ./public/config.json: (Be aware, that this is only the fallback Livekit SFU. If the homeserver advertises one in the client well-known, this will not be used.)

"livekit": {
  "livekit_service_url": "http://localhost:7881"
},

Run backend components:

yarn backend

Add a new translation key

To add a new translation key you can do these steps:

  1. Add the new key entry to the code where the new key is used: t("some_new_key")
  2. Run yarn i18n to extract the new key and update the translation files. This will add a skeleton entry to the public/locales/en-GB/app.json file:
    {
        ...
        "some_new_key": "",
        ...
    }
    
  3. Update the skeleton entry in the public/locales/en-GB/app.json file with the English translation:
    {
        ...
        "some_new_key": "Some new key",
        ...
    }
    

Documentation

Usage and other technical details about the project can be found here:

Docs

Description
No description provided
Readme 16 MiB