diff --git a/README.md b/README.md index 8f03cba..811593d 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,18 @@ -**If you do not have specific requirements, please consider using the `webrtc` version instead: https://github.com/Johni0702/mumble-web/tree/webrtc (note that setup instructions differ significantly). -It should be near identical in features but less susceptible to performance issues. If you are having trouble with the `webrtc` version, please let us know.** - -PRs, unless webrtc-specific, should still target `master`. - # mumble-web mumble-web is an HTML5 [Mumble] client for use in modern browsers. -A live demo is running [here](https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo). +A live demo is running [here](https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo) (or [without WebRTC](https://voice.johni0702.de/?address=voice.johni0702.de&port=443/demo&webrtc=false)). 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. +Instead Websockets are used for control and WebRTC is used for voice (using Websockets as fallback if the server does not support WebRTC). -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. +In WebRTC mode (default) only the Opus codec is supported. + +In fallback mode, when WebRTC is not supported by the server, only the Opus and CELT Alpha codecs are supported. +This is accomplished with libopus, libcelt (0.7.1) and libsamplerate, compiled to JS via emscripten. +Performance is expected to be less reliable (especially on low-end devices) than in WebRTC mode and loading time will be significantly increased. Quite a few features, most noticeably all administrative functionallity, are still missing. @@ -23,7 +21,7 @@ administrative functionallity, are still missing. #### Download mumble-web can either be installed directly from npm with `npm install -g mumble-web` -or from git: +or from git (recommended because the npm version may be out of date): ``` git clone https://github.com/johni0702/mumble-web @@ -38,34 +36,14 @@ 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). +At the time of writing this there do not seem to be any Mumble servers which natively support Websockets+WebRTC. +[Grumble](https://github.com/mumble-voip/grumble) natively supports Websockets and can run mumble-web in fallback mode but not (on its own) in WebRTC mode. +To use this client with any standard mumble server in WebRTC mode, [mumble-web-proxy] 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. +Additionally you will need some web server to serve static files and terminate the secure websocket connection (mumble-web-proxy only supports insecure ones). -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 `` 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 :64738 -``` - -##### Proxied -This configuration allows you to run websockify on a machine that already has -another webserver running. Replace `` with the URI of your mumble server. If `websockify` is running on the same machine as `mumble-server`, use `localhost`. - -``` -websockify --ssl-target 64737 :64738 -``` - -Here are two web server configuration files (one for [NGINX](https://www.nginx.com/) and one for [Caddy server](https://caddyserver.com/)) 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 `` with the URI to the machine where `websockify` is running. If `websockify` is running on the same machine as your web server, use `localhost`. +Here are two web server configuration files (one for [NGINX](https://www.nginx.com/) and one for [Caddy server](https://caddyserver.com/)) 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 `` with the host name of the machine where `mumble-web-proxy` is running. If `mumble-web-proxy` is running on the same machine as your web server, use `localhost`. * NGINX configuration file ```Nginx @@ -79,7 +57,7 @@ server { root /path/to/dist; } location /demo { - proxy_pass http://:64737; + proxy_pass http://:64737; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; @@ -101,12 +79,19 @@ http://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://:64737 { + proxy /demo http://:64737 { websocket } } ``` +To run `mumble-web-proxy`, execute the following command. Replace `` with the host name of your Mumble server (the one you connect to using the normal Mumble client). +Note that even if your Mumble server is running on the same machine as your `mumble-web-proxy`, you should use the external name because (by default, for disabling see its README) `mumble-web-proxy` will try to verify the certificate provided by the Mumble server and fail if it does not match the given host name. +``` +mumble-web-proxy --listen-ws 64737 --server :64738 +``` +If your mumble-web-proxy is running behind a NAT or firewall, take note of the respective section in its README. + Make sure that your Mumble server is running. You 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: @@ -180,6 +165,6 @@ See [here](https://docs.google.com/document/d/1uPF7XWY_dXTKVKV7jZQ2KmsI19wn9-kFR ISC [Mumble]: https://wiki.mumble.info/wiki/Main_Page -[websockify GitHub page]: https://github.com/novnc/websockify +[mumble-web-proxy]: https://github.com/johni0702/mumble-web-proxy [MetroMumble]: https://github.com/xPoke/MetroMumble [Matrix]: https://matrix.org diff --git a/app/config.js b/app/config.js index d0847f4..32b057f 100644 --- a/app/config.js +++ b/app/config.js @@ -32,10 +32,13 @@ window.mumbleWebConfig = { 'token': '', 'username': '', 'password': '', + 'webrtc': 'auto', // whether to enable (true), disable (false) or auto-detect ('auto') WebRTC support 'joinDialog': false, // replace whole dialog with single "Join Conference" button 'matrix': false, // enable Matrix Widget support (mostly auto-detected; implies 'joinDialog') 'avatarurl': '', // download and set the user's Mumble avatar to the image at this URL // General - 'theme': 'MetroMumbleLight' + 'theme': 'MetroMumbleLight', + 'startMute': false, + 'startDeaf': false } } diff --git a/app/index.html b/app/index.html index 349addf..048ffd3 100644 --- a/app/index.html +++ b/app/index.html @@ -2,6 +2,7 @@ + @@ -77,6 +78,22 @@ + +
+
+ Add channel +
+
+ + + + + +
Channel
+ +
+
+
@@ -412,7 +429,7 @@ class="join"> Join Channel -
  • Add
    • @@ -420,7 +437,7 @@ class="edit"> Edit -
  • Remove
    • @@ -462,40 +479,52 @@
    - - + Switch Orientation + Switch Orientation + rel="connect" src="/svg/applications-internet.svg" + title="Connect to Server" alt="Connection"> + css: { disabled: !thisUser() }" + title="Information" alt="Information">
    + rel="mute" src="/svg/audio-input-microphone.svg" + title="Mute" alt="Mute"> + rel="unmute" src="/svg/audio-input-microphone-muted.svg" + title="Unmute" alt="Unmute"> + rel="deaf" src="/svg/audio-output.svg" + title="Deafen" alt="Deafen"> + rel="undeaf" src="/svg/audio-output-deafened.svg" + title="Undeafen" alt="Undeafen"> + rel="record" src="/svg/media-record.svg" + title="Record" alt="Record">
    + rel="comment" src="/svg/toolbar-comment.svg" + title="Comment" alt="Comment">
    + rel="settings" src="/svg/config_basic.svg" + title="Settings" alt="Settings">
    + rel="Source Code" src="/svg/source-code.svg" + title="Open Soure Code" alt="Open Source Code">