feat: Custom gst webrtc signaller, runtime GPU driver package install and more (#140)

🔥 🔥

Yes lots of commits because rebasing and all.. thankfully I know Git
just enough to have backups 😅

---------

Co-authored-by: Wanjohi <elviswanjohi47@gmail.com>
Co-authored-by: Kristian Ollikainen <DatCaptainHorse@users.noreply.github.com>
Co-authored-by: Wanjohi <71614375+wanjohiryan@users.noreply.github.com>
Co-authored-by: AquaWolf <3daquawolf@gmail.com>

apps/docs/content/2.nestri-node/3.getting-started.md

@@ -4,8 +4,20 @@
 Nestri is in a **very early-beta phase**, so errors and bugs may occur.
 ::
 
+### Step 0: Construct Your Docker Image
+Checkout your branch with the latest version of nestri and build the image `<your-nestri-image>` within git root folder:
+```bash
+docker buildx build -t <your-nestri-image>:latest -f Containerfile.runner .
+```
 
-## Step 1: Navigate to Your Game Directory
+::alert{type="info"}
+You can right now also pull the docker image from DatHorse GitHub Containter Registry with:
+```bash
+docker pull ghcr.io/datcaptainhorse/nestri-cachyos:latest
+```
+::
+
+### Step 1: Navigate to Your Game Directory
 First, change your directory to the location of your `.exe` file. For Steam games, this typically means:
 ```bash
 cd $HOME/.steam/steam/steamapps
@@ -18,28 +30,49 @@ echo "$(head /dev/urandom | LC_ALL=C tr -dc 'a-zA-Z0-9' | head -c 16)"
 ```
 This command generates a random 16-character string. Be sure to note this string carefully, as you'll need it for the next step.
 ### Step 3: Launch the Nestri Server
-With your SESSION_ID ready, insert it into the command below, replacing `<paste here>` with your actual session ID. Then, run the command to start the Nestri server:
+With your SESSION_ID ready, insert it into the command below, replacing `<your_session_id>` with your actual session ID, also replace `<relay_url>` with your relay URL and `<your-nestri-image>` with your build nestri image or nestri remote image. Then run the command to start the Nestri server:
+
+```bash
+docker run --rm -it --shm-size=1g --gpus all -e NVIDIA_DRIVER_CAPABILITIES=all --runtime=nvidia -e RELAY_URL='<relay_url>' -e NESTRI_ROOM=<your_session_id> -e RESOLUTION=1920x1080 -e FRAMERATE=60 -e NESTRI_PARAMS='--verbose=true --video-codec=h264 --video-bitrate=4000 --video-bitrate-max=6000'--name nestri -d -v "$(pwd)":/mnt/game/ <your-nestri-image>:latest
 ```
-docker run --gpus all --device=/dev/dri --name nestri -it --entrypoint /bin/bash -e SESSION_ID=<paste here> -v "$(pwd)":/game -p 8080:8080/udp --cap-add=SYS_NICE --cap-add=SYS_ADMIN ghcr.io/nestriness/nestri/server:nightly
+
+### Step 4: Get Into your container
+Get into your container to start your game:
+```bash
+sudo docker exec -it nestri bash
 ```
-> \[!TIP]
->
-> Ensure UDP port 8080 is accessible from the internet. Use `ufw allow 8080/udp` or adjust your cloud provider's security group settings accordingly.
-### Step 4: Configure the Game within the Container
-After executing the previous command, you'll be in a new shell within the container (example: `nestri@3f199ee68c01:~$`). Perform the following checks:
-1. Verify the game is mounted by executing `ls -la /game`. If not, exit and ensure you've correctly mounted the game directory as a volume.
-2. Then, start the Nestri server by running `/etc/startup.sh > /dev/null &`.
+### Step 5: Installing a Launcher
+For most games that are not DRM free you need a launcher. In this case use the umu launcher and optional mangohud:
+```bash
+pacman -S --overwrite="*" umu-launcher mangohud
+```
+
 ### Step 5: Running Your Game
-Wait for the `.X11-unix` directory to appear in `/tmp` (check with `ls -la /tmp`). Once it appears, you're ready to launch your game.
-- With Proton-GE: `nestri-proton -pr <game>.exe`
-- With Wine: `nestri-proton -wr <game>.exe`
+You have to execute your game now with nestri user. If you have a linux game just execute it with the nestri user
+```bash
+su nestri
+source /etc/nestri/envs.sh
+GAMEID=0 PROTONPATH=GE-Proton mangohud umu-run /mnt/game/<your-game.exe>
+```
+
 ### Step 6: Begin Playing
 Finally, construct the play URL with your session ID:
-```
-echo "https://nestri.io/play/$SESSION_ID"
-```
+`https://nestri.io/play/<your_session_id>`
+
 Navigate to this URL in your browser, click on the page to capture your mouse pointer, and start playing!
 
+::alert{type="info"}
+You can also use other relays/frontends depending on your choosen `<relay_url>`
+For testing you can use DatHorse Relay and Frontend:
+
+| **Placeholder**                      | **URL**   |
+| ---------------------------- | ---------- |
+| `<relay_url>`              | `https://relay.dathorse.com/`   |
+| `<frontend_url>`           | `https://nestritest.dathorse.com/play/<your_session_id>` |
+::
+
+
+
 
 <!--
 Nestri Node is easy to install using the provided installation script. Follow the steps below to get started.

apps/www/src/routes/play/[id]/index.tsx

@@ -17,7 +17,7 @@ export default component$(() => {
       video = document.createElement("video");
       video.id = "stream-video-player";
       video.style.visibility = "hidden";
-      const webrtc = new WebRTCStream("https://relay.dathorse.com", id, (mediaStream) => {
+      const webrtc = new WebRTCStream("http://localhost:8088", id, (mediaStream) => {
         if (video && mediaStream && (video as HTMLVideoElement).srcObject === null) {
           console.log("Setting mediastream");
           (video as HTMLVideoElement).srcObject = mediaStream;
@@ -26,6 +26,8 @@ export default component$(() => {
           window.hasstream = true;
           // @ts-ignore
           window.roomOfflineElement?.remove();
+          // @ts-ignore
+          window.playbtnelement?.remove();
 
           const playbtn = document.createElement("button");
           playbtn.style.position = "absolute";
@@ -81,8 +83,14 @@ export default component$(() => {
             });
           };
           document.body.append(playbtn);
+          // @ts-ignore
+          window.playbtnelement = playbtn;
         } else if (mediaStream === null) {
           console.log("MediaStream is null, Room is offline");
+          // @ts-ignore
+          window.playbtnelement?.remove();
+          // @ts-ignore
+          window.roomOfflineElement?.remove();
           // Add a message to the screen
           const offline = document.createElement("div");
           offline.style.position = "absolute";
@@ -104,6 +112,30 @@ export default component$(() => {
             const ctx = canvas.value.getContext("2d");
             if (ctx) ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
           }
+        } else if ((video as HTMLVideoElement).srcObject !== null) {
+          console.log("Setting new mediastream");
+          (video as HTMLVideoElement).srcObject = mediaStream;
+          // @ts-ignore
+          window.hasstream = true;
+          // Start video rendering
+          (video as HTMLVideoElement).play().then(() => {
+            // @ts-ignore
+            window.roomOfflineElement?.remove();
+            if (canvas.value) {
+              canvas.value.width = (video as HTMLVideoElement).videoWidth;
+              canvas.value.height = (video as HTMLVideoElement).videoHeight;
+
+              const ctx = canvas.value.getContext("2d");
+              const renderer = () => {
+                // @ts-ignore
+                if (ctx && window.hasstream) {
+                  ctx.drawImage((video as HTMLVideoElement), 0, 0);
+                  (video as HTMLVideoElement).requestVideoFrameCallback(renderer);
+                }
+              }
+              (video as HTMLVideoElement).requestVideoFrameCallback(renderer);
+            }
+          });
         }
       });
     }