Dépôt des versions Chapril de Mumble-web. https://mumble.chapril.org/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Laurent Poujoulat 2e4e6610f7 Removed the "Record" toolbar button as there is no chance to see it 6 months ago
0ce7650c4d5a52a5323868f75588e1c7.svg Build 9945bc5f7 7 months ago
00fd86fe12871b707998bf7214820fdd.svg Build 9945bc5f7 7 months ago
5b70c2cbbd6e9258a632c70b03381627.png Build 9945bc5f7 7 months ago
6d73bb785aa06bf0c436ad6f7cc6262a.svg Build 9945bc5f7 7 months ago
7b86c879d50808c66816ed3338f26557.svg Build 9945bc5f7 7 months ago
7dd33815bcb23cf9a0cd851c2145e169.css Build 9945bc5f7 7 months ago
7e20ba1e3b8980a164c5f557a0470919.ico Build 9945bc5f7 7 months ago
8b61e99b17ef88afd479b3fc990e5b9d.xml Build 9945bc5f7 7 months ago
8f75583a16890ab851fc3f121fc63f89.svg Build 9945bc5f7 7 months ago
9a1869e4318916bf5e05546eda8d5c43.css Build 9945bc5f7 7 months ago
9ae3dac014f51d714254cf522602cec0.svg Build 9945bc5f7 7 months ago
9cda20ca6e5077b6999771c9a8a3cec5.css Build 9945bc5f7 7 months ago
18e00168e2eeff800227594e26818681.svg Build 9945bc5f7 7 months ago
22ecf0ecde1ae2a6281265174b7fa355.svg Build 9945bc5f7 7 months ago
33b990984178a1246982bd7dd605f350.css Build 9945bc5f7 7 months ago
50dddae19e7bf601b168f46a1303674b.svg Build 9945bc5f7 7 months ago
077f1c5bd335be073c48c340b01f58bc.svg Build 9945bc5f7 7 months ago
86d4f1d7547270ff26f08a9271e7edcb.svg Build 9945bc5f7 7 months ago
93a6487986f6662d71baf41fdeaf0196.png Build 9945bc5f7 7 months ago
195ad531e2d729dbb80bb4524be18d78.png Build 9945bc5f7 7 months ago
296b612d2847da52749549f73d0c3664.svg Build 9945bc5f7 7 months ago
972a0ac8cf8526580a216210a364cc60.svg Build 9945bc5f7 7 months ago
32785c1d21b0050be9168487542b8c3d.svg Build 9945bc5f7 7 months ago
82747b4bbd0cfe92292f74cd27f2763e.svg Build 9945bc5f7 7 months ago
9171288d67adc4805412883901d2f180.svg Build 9945bc5f7 7 months ago
80250154041d2e9f6d50a91181409f21.png Build 9945bc5f7 7 months ago
README.md Added README.md 7 months ago
a65db861eecb8dcc62ad70fec489da3f.svg Build 9945bc5f7 7 months ago
b78ed441778f2e4ce1201a75af76594e.svg Build 9945bc5f7 7 months ago
cf02aba975e911ef9823610d908b32f5.png Build 9945bc5f7 7 months ago
chapril-logo-mini-200x.png Customized favicon. Added Chapril logo. 7 months ago
config.js Build 9945bc5f7 7 months ago
config.local.js Reinstanciated the token dialog of the mumble web interface as it is 6 months ago
d5ba30b381ebc262ba3871eaed9d7102.svg Build 9945bc5f7 7 months ago
d57d3d2918d0b72f0c24e9dc162c6c4a.svg Build 9945bc5f7 7 months ago
dbd9efebc73f884c5039cc3192a65dd8.svg Build 9945bc5f7 7 months ago
e0c171776518ab302b54ccc71e59a582.svg Build 9945bc5f7 7 months ago
e72996a6d1ed5d1d7962c27c10c08fa6.json Build 9945bc5f7 7 months ago
ec4d8b884ac39ef8494fb4aca6c6069f.svg Build 9945bc5f7 7 months ago
ee7a19054eb87597c4b8e4664823ebfd.png Build 9945bc5f7 7 months ago
f2fc230fc7d9a9b8f6f03d342f6e94b2.svg Build 9945bc5f7 7 months ago
f54b0be1d559b03ad8d945e988ec8ed4.svg Build 9945bc5f7 7 months ago
favicon-32x32.png Customized favicon. Added Chapril logo. 7 months ago
index.html Removed the "Record" toolbar button as there is no chance to see it 6 months ago
index.js Replaced the github sources button by a Chapril sources button. 7 months ago
matrix.js Build 9945bc5f7 7 months ago
theme.js Build 9945bc5f7 7 months ago

README.md

mumble-web

mumble-web is an HTML5 Mumble client for use in modern browsers.

A live demo is running here.

The Mumble protocol uses TCP for control and UDP for voice. Running in a browser, both are unavailable to this client. Instead Websockets are used for all communications.

libopus, libcelt (0.7.1) and libsamplerate, compiled to JS via emscripten, are used for audio decoding. Therefore, at the moment only the Opus and CELT Alpha codecs are supported.

Quite a few features, most noticeably all administrative functionallity, are still missing.

Installing

Download

mumble-web can either be installed directly from npm with npm install -g mumble-web or from git:

git clone https://github.com/johni0702/mumble-web
cd mumble-web
npm install
npm run build

The npm version is prebuilt and ready to use whereas the git version allows you to e.g. customize the theme before building it.

Either way you will end up with a dist folder that contains the static page.

Setup

At the time of writing this there do not seem to be any Mumble servers which natively support Websockets. To use this client with any standard mumble server, websockify must be set up (preferably on the same machine that the Mumble server is running on).

You can install websockify via your package manager apt install websockify or manually from the websockify GitHub page. Note that while some versions might function better than others, the python version generally seems to be the best.

There are two basic ways you can use websockify with mumble-web:

  • Standalone, use websockify for both, websockets and serving static files
  • Proxied, let your favorite web server serve static files and proxy websocket connections to websockify
Standalone

This is the simplest but at the same time least flexible configuration. Replace <mumbleserver> with the URI of your mumble server. If websockify is running on the same machine as mumble-server, use localhost.

websockify --cert=mycert.crt --key=mykey.key --ssl-only --ssl-target --web=path/to/dist 443 <mumbleserver>:64738
Proxied

This configuration allows you to run websockify on a machine that already has another webserver running. Replace <mumbleserver> with the URI of your mumble server. If websockify is running on the same machine as mumble-server, use localhost.

websockify --ssl-target 64737 <mumbleserver>:64738

Here are two web server configuration files (one for NGINX and one for Caddy server) which will serve the mumble-web interface at https://voice.example.com and allow the websocket to connect at wss://voice.example.com/demo (similar to the demo server). Replace <websockify> with the URI to the machine where websockify is running. If websockify is running on the same machine as your web server, use localhost.

  • NGINX configuration file
server {
        listen 443 ssl;
        server_name voice.example.com;
        ssl_certificate /etc/letsencrypt/live/voice.example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/voice.example.com/privkey.pem;

        location / {
                root /path/to/dist;
        }
        location /demo {
                proxy_pass http://<websockify>:64737;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $connection_upgrade;
        }
}

map $http_upgrade $connection_upgrade {
        default upgrade;
        '' close;
}
  • Caddy configuration file (Caddyfile)
http://voice.example.com {
  redir https://voice.example.com
}

https://voice.example.com {
  tls "/etc/letsencrypt/live/voice.example.com/fullchain.pem" "/etc/letsencrypt/live/voice.example.com/privkey.pem"
  root /path/to/dist
  proxy /demo http://<websockify>:64737 {
    websocket
  }
}

Make sure that your Mumble server is running. You may now open may now open https://voice.example.com in a web browser. You will be prompted for server details: choose either address: voice.example.com/demo with port: 443 or address: voice.example.com with port: 443/demo. You may prefill these values by appending ?address=voice.example.com/demo&port=443. Choose a username, and click Connect: you should now be able to talk and use the chat.

Here is an example of systemd service, put it in /etc/systemd/system/mumble-web.service and adapt it to your needs:

[Unit]
Description=Mumble web interface
Documentation=https://github.com/johni0702/mumble-web
Requires=network.target mumble-server.service
After=network.target mumble-server.service

[Service]
Type=simple
User=www-data
ExecStart=/usr/bin/websockify --web=/usr/lib/node_modules/mumble-web/dist --ssl-target localhost:64737 localhost:64738

[Install]
WantedBy=multi-user.target

Then

systemctl daemon-reload
systemctl start mumble-web
systemctl enable mumble-web

Configuration

The app/config.js file contains default values and descriptions for all configuration options. You can overwrite those by editing the config.local.js file within your dist folder. Make sure to back up and restore the file whenever you update to a new version.

Themes

The default theme of mumble-web tries to mimic the excellent MetroMumbleLight theme. mumble-web also includes a dark version, named MetroMumbleDark, which is heavily inspired by MetroMumble‘s dark version.

To select a theme other than the default one, append a theme=dark query parameter (where dark is the name of the theme) when accessing the mumble-web page. E.g. thisis the live demo linked above but using the dark theme (dark is an alias for MetroMumbleDark).

Custom themes can be created by deriving them from the MetroMumbleLight/Dark themes just like the MetroMumbleDark theme is derived from the MetroMumbleLight theme.

Matrix Widget

mumble-web has specific support for running as a widget in a Matrix room.

While just using the URL to a mumble-web instance in a Custom Widget should work for most cases, making full use of all supported features will require some additional trickery. Also note that audio may not be functioning properly on newer Chrome versions without these extra steps.

This assumes you are using the Riot Web or Desktop client. Other clients will probably require different steps.

  1. Type /devtools into the message box of the room and press Enter
  2. Click on Send Custom Event
  3. Click on Event in the bottom right corner (it should change to State Event)
  4. Enter im.vector.modular.widgets for Event Type
  5. Enter mumble for State Key (this value may be arbitrary but must be unique per room)
  6. For Event Content enter (make sure to replace the example values):
{
  "waitForIframeLoad": true,
  "name": "Mumble",
  "creatorUserId": "@your_user_id:your_home_server.example",
  "url": "https://voice.johni0702.de/?address=voice.johni0702.de&port=443/mumble&matrix=true&username=$matrix_display_name&theme=$theme&avatarurl=$matrix_avatar_url",
  "data": {},
  "type": "jitsi",
  "id": "mumble"
}

The $var parts of the url are intentional and will be replaced by Riot whenever a widget is loaded (i.e. they will be different for every user). The username query parameter sets the default username to the user’s Matrix display name, the theme parameter automatically uses the dark theme if it’s used in Riot, and the avatarurl will automatically download the user’s avatar on Matrix and upload it as the avatar in Mumble. Finally, the matrix=true query parameter replaces the whole Connect to Server dialog with a single Join Conference button, so make sure to remove it if you do not supply default values for all connection parameters as above. The type needs to be jitsi to allow the widget to use audio and to stay open when switching to a different room (this will hopefully change once Riot is able to ask for permission from the user by itself). The id should be the same as the State Key from step 5. See here for more information on the values of these fields. 7. Press Send

License

ISC