Moonlight Web

An unofficial Moonlight Client allowing you to stream your pc to the Web. It hosts Web Server which will forward Sunshine traffic to a Browser using the WebRTC Api.

Overview

• Images
• Limitations
• Installation
• Setup
  • Streaming over the Internet
  • Configuring https
  • Proxying via Apache 2
• Config
• Building

Images

Host List

Games List

Streaming

Limitations

• Controllers only work when in a Secure Context because of the Gamepad Api
  • How to configure a Secure Context / https

Installation

1. Install Sunshine

2. Download the compressed archive for your platform and uncompress it or build it yourself

3. Run the "web-server" executable

4. Change your access credentials in the newly generated server/config.json (all changes require a restart)

5. Go to localhost:8080 and view the web interface. You can also the change bind address.

Setup

Add your pc:

1. Add a new pc () with the address as localhost and leave the port empty (if you've got the default port)

2. Pair your pc by clicking on the host () and entering the code in sunshine

3. Launch an app

Streaming over the Internet

When in a local network the WebRTC Peers will negotatiate without any problems. However when you want to play over the internet without being in the same network as Moonlight Web, you'll have to configure it and forward ports.

1. Set the bind address to the one of your network and forward the web server port (default is 8080, http is 80, https is 443)

{
    ..
    "bind_address": "192.168.1.1:80"
    ..
}

There are two ways to make the WebRTC Peers negotiate:

1. The most reliable and recommended way is to use a turn server
2. Forward the ports directly (this might not work in every network if the firewall is very strict: e.g. udp blocked, the NAT is very strict)

Configure a turn server

1. Host and configure your turn server like coturn or use other services to host one for you.

2. Add your turn server to your WebRTC Ice Server list

{
    ..
    "webrtc_ice_servers": [
        {
            "urls": [
                    "stun:l.google.com:19302",
                    "stun:stun.l.google.com:19302",
                    "stun:stun1.l.google.com:19302",
                    "stun:stun2.l.google.com:19302",
                    "stun:stun3.l.google.com:19302",
                    "stun:stun4.l.google.com:19302",
            ]
        },
        {
            "urls": [
                    // Your turn server
                    "turn:yourip.com:3478?transport=udp",
                    "turn:yourip.com:3478?transport=tcp",
                    "turn:yourip.com:5349?transport=tcp"
                    // Some (business) firewalls might be very strict and only allow tcp on port 443 for turn connections
                    "turn:yourip.com:443?transport=tcp"
            ],
            "username": "your username",
            "credential": "your credential"
        }
    ]
    ..
}

Port forward

1. Set the port range used by the WebRTC Peer to a fixed range in the config

{
    ..
    "webrtc_port_range": {
        "min": 40000,
        "max": 40010
    }
    ..
}

2. Forward the port range specified in the previous step as udp. If you're using Windows Defender make sure to allow NAT Traversal. Important: If your firewall blocks udp connections this won't work and you need to host a turn server

3. Configure WebRTC Nat 1 To 1 to advertise your public ip (Optional: WebRTC stun servers can usually automatically detect them):

{
    ..
    "webrtc_nat_1to1": {
        "ice_candidate_type": "host",
        "ips": [
            "74.125.224.72"
        ]
    }
    ..
}

It might be helpful to look what kind of nat your pc is behind:

• Nat Checker

Configuring https

You can configure https directly with the Moonlight Web Server.

1. You'll need a private key and a certificate.

You can generate a self signed certificate with this python script moonlight-web/web-server/generate_certificate.py:

pip install pyOpenSSL
python ./moonlight-web/web-server/generate_certificate.py

2. Copy the files server/key.pem and server/cert.pem into your server directory.

3. Modify the config to enable https using the certificates

{
    ..
    "certificate": {
        "private_key_pem": "./server/key.pem",
        "certificate_pem": "./server/cert.pem"
    }
    ..
}

Proxying via Apache 2

It's possible to proxy the Moonlight Website using Apache 2.

Note: When you want to use https, the Moonlight Website should use http so that Apache 2 will handle all the https encryption.

1. Enable the modules mod_proxy, mod_proxy_wstunnel

sudo a2enmod mod_proxy mod_proxy_wstunnel

2. Create a new file under /etc/apache2/conf-available/moonlight-web.conf with the content:

# Example subpath "/moonlight" -> To connect you'd go to "http://yourip.com/moonlight/"
Define MOONLIGHT_SUBPATH /moonlight
# The address and port of your Moonlight Web server
Define MOONLIGHT_STREAMER YOUR_LOCAL_IP:YOUR_PORT

ProxyPreserveHost on
        
# Important: This WebSocket will help negotiate the WebRTC Peers
<Location ${MOONLIGHT_SUBPATH}/api/host/stream>
        ProxyPass ws://${MOONLIGHT_STREAMER}/api/host/stream
        ProxyPassReverse ws://${MOONLIGHT_STREAMER}/api/host/stream
</Location>

ProxyPass ${MOONLIGHT_SUBPATH}/ http://${MOONLIGHT_STREAMER}/
ProxyPassReverse ${MOONLIGHT_SUBPATH}/ http://${MOONLIGHT_STREAMER}/

3. Enable the created config file

sudo a2enconf moonlight-web

4. Change config to include the prefixed path

{
    ..
    "web_path_prefix": "/moonlight"
    ..
}

5. Use https with a certificate (Optional)

Config

The config file is under server/config.json relative to the executable. Here are the most important settings for configuring Moonlight Web.

For a full list of values look into the Rust Config module.

Credentials

The credentials the Website will prompt you to enter.

{
    ..
    "credentials": "default"
    ..
}

Bind Address

The address and port the website will run on

{
    ..
    "bind_address": "127.0.0.1:8080"
    ..
}

Https Certificates

If enabled the web server will use https with the provided certificate data

{
    ..
    "certificate": {
        "private_key_pem": "./server/key.pem",
        "certificate_pem": "./server/cert.pem"
    }
    ..
}

WebRTC Port Range

This will set the port range on the web server used to communicate when using WebRTC

{
    ..
    "webrtc_port_range": {
        "min": 40000,
        "max": 40010
    }
    ..
}

WebRTC Ice Servers

A list of ice servers for webrtc to use.

{
    ..
    "webrtc_ice_servers": [
        {
            "urls": [
                    "stun:l.google.com:19302",
                    "stun:stun.l.google.com:19302",
                    "stun:stun1.l.google.com:19302",
                    "stun:stun2.l.google.com:19302",
                    "stun:stun3.l.google.com:19302",
                    "stun:stun4.l.google.com:19302",
            ]
        }
    ]
    ..
}

WebRTC Nat 1 to 1 ips

This will advertise the ip as an ice candidate on the web server. It's recommended to set this but stun servers should figure out the public ip.

• host -> This is the ip address of the server and the client can connect to
• srflx -> This is the public ip address of this server, like an ice candidate added from a stun server.

{
    ..
    "webrtc_nat_1to1": {
        "ice_candidate_type": "host", // "srflx" or "host"
        "ips": [
            "74.125.224.72"
        ]
    }
    ..
}

WebRTC Network Types

This will set the network types allowed by webrtc.
Allowed values:

• udp4: All udp with ipv4
• udp6: All udp with ipv6
• tcp4: All tcp with ipv4
• tcp6: All tcp with ipv6

{
    ..
    "webrtc_network_types": [
        "udp4",
        "udp6",
    ]
    ..
}

Web Path Prefix

This is useful when rerouting the web page using services like Apache 2. Will always append the prefix to all requests made by the website.

{
    ..
    "web_path_prefix": "/moonlight"
    ..
}

Building

Make sure you've cloned this repo with all it's submodules

git clone --recursive https://github.com/MrCreativ3001/moonlight-web-stream.git

A Rust nightly installation is required.

There are 2 ways to build Moonlight Web:

• Build it on your system

  When you want to build it on your system take a look at how to compile the crates:

  • moonlight common sys
  • moonlight web

• Compile using Cargo Cross

  After you've got a successful installation of cross just run the command in the project root directory

  cross build --release --target YOUR_TARGET

  Note: windows only has the gnu target x86_64-pc-windows-gnu

Crate: Moonlight Common Sys

moonlight-common-sys are rust bindings to the cpp moonlight-common-c library.

Requires:

• A CMake installation which will automatically compile the moonlight-common-c library
• openssl-sys: For information on building openssl sys go to the openssl docs

Crate: Moonlight Web

This is the main Moonlight Web project

Required:

• moonlight-common-sys
• npm

Build the executables in the root directory with (builds streamer and web-server):

cargo build --release

Build the web frontend with:

npm run install
npm run build

The build output will be in moonlight-web/dist. The dist folder needs to be called static and in the same directory as the executable.