# AGH SSM 2025 | WebRTC Lab 2

Celem labolatorium jest zapoznanie z podstawami działania przykładowego serwera multimedialnego SFU.

Plan działania:
1. Implementacja strony klienckiej prostego systemu wideokonferencyjnego.
1. Wprowadzenie do simulcastu.
1. Wpływ packet lossu na jakość transmisji.

## 0 | Przygotowanie

1. Włącz Ubuntu :)
2. Zainstaluj `npm`, przeklejając poniższy snippet do terminala

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
source ~/.bashrc
nvm install stable
nvm use stable

3. Sklonuj repo https://tinyurl.com/aghssm
> a jeśli nie działa, to https://github.com/elixir-webrtc/agh-ssm-workshop

## 1 | Aplikacja do wideokonferencji na bazie Fishjam Cloud

[Fishjam Cloud](https://fishjam.io) to platforma Software-as-a-Service do budowania aplikacji korzystających z WebRTC, udostępniająca nam SFU oraz `TypeScript`owe *klienckie* SDK do łączenia się z nim.
Użyjemy właśnie tego klienckiego SDK, by zbudować prostą aplikację do wideokonferencji w stylu Google Meet. Nasi użytkownicy będą podłączać się do jednego wspólnego pokoju.

>Zazwyczaj podczas tworzenia takiej aplikacji wykorzystuje się także *serwerowe* SDK umożliwiające zarządzanie serwerem multimedialnym (tworzenie pokoi, generowanie peer tokenów, zmianę konfiguracji itp.).
>Wprowadzimy tu jednak pewne uproszczenie -- wykorzystamy udostępniane przez Fishjam Cloud [RESTowe API do developmentu/testowania](https://docs.fishjam.io/room-manager), które pozwala w prosty sposób tworzyć peer tokeny wywołując jeden request HTTP.

0. W sklonowanym repo:
- otwórz folder `lab2/`,
- usuń `package-lock.json`,
- pobierz i zainstaluj dependencje (`npm install`),
- uruchom development serwer (`npm run dev`),
- otwórz `http://localhost:5173` w przeglądarce Chromium.

1. Otwórz `script.ts` w ulubionym edytorze i zapoznaj się z jego treścią
2. Wykorzystując komentarze w kodzie i dokumentację:
- [Fishjam Client](https://fishjam-cloud.github.io/web-client-sdk/classes/_fishjam-cloud_ts-client.FishjamClient.html),
- [navigator.mediaDevices.getUserMedia](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#syntax),
- [HTMLMediaElement (localPlayer)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement),
- [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream),

zaimplementuj brakujące części kodu, poczynając od `// TWOJA KOLEJ`.
Wykorzystaj funkcje pomocnicze :)

3. Odśwież stronę, wpisz nazwę użytkownika i wciśnij `Join room`.
Po zezwoleniu na dostęp do kamery dołączysz do pokoju z pozostałymi uczestnikami laboratorium.

## 2 | Simulcast

0. Korzystamy z chrome'a/chromium :)
1. Nie bawimy się packet-lossem i RTX na razie :)
2. Wejdź pod: https://bigfish.jellyfish.ovh
3. Po co nam simulcast - wspólny eksperyment.
4. Eksperymentuj z odbieraną jakością video. Jak zmieniają się następujące metryki i dlaczego:
1. videoBitrate
2. frameWidth, frameHeight
3. keyframesDecoded
4. pliCount
5. Prezentacja chrome://webrtc-internals strony nadającej.
6. Wejdź pod: chrome://webrtc-internals
7. Odpowiedz na następujące pytania:
1. Ile pozycji inbound-rtp widzisz?
2. Dlaczego tyle?
3. Jakie mają identyfikatory: ssrc i rid?
4. Co to oznacza? Co musi zachodzić po stronie serwera? Wskazówka: munging RTP.
8. Wejdź pod: https://source.chromium.org/chromium/chromium/src/+/main:third_party/webrtc/video/config/simulcast.cc;l=79?q=simulcast.cc
9. Ile warstw simulcastu jesteśmy w stanie uzyskać startując z bazowej rozdzielczości 1280x720px?

## 3 | Packet loss

1. Wejdź pod https://bigfish.jellyfish.ovh
2. Wybierz najwyższą jakość.
3. Ustaw różne wartości packet-lossu (%): 1, 2, 5, 10, 20, 50
4. Przy jakiej wartości stream przestaje być płynny?
5. Które statystyki na to wskazują?
6. Dla wartości packet-lossu, dla której stream przestaje być płynny zmień jakość video na najniższą.
7. Czy płynność jest lepsza?
8. Dlaczego?
9. Otwórz wireshark i przefiltruj przychodzące wideo pakiety RTP:

    udp && ip.src==65.109.153.64 && p_type==102 

10. Co obserwujesz?
11. Przełącz jakość video na najwyższą.
12. Jak zmieniły się markery?
13. Wyłącz retransmisje (RTX).
14. Powtórz całe zadanie.

<!--

sudo apt update
sudo apt install iproute2
sudo tc qdisc add dev eth0 root netem loss 1%

## 4 | Feedback :)

Dzięki za udział! Prosimy o wypełnienie [króciutkiej ankiety](https://forms.gle/tTAFfF3q9xLdSnkd7) po zajęciach