# AGH SSM 2025 | WebRTC Lab 2

Celem laboratorium 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

[Fishjam](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 RESTowe API do developmentu/testowania, które pozwala w prosty sposób tworzyć peer tokeny wywołując jeden request HTTP.

0. W sklonowanym repo:
- otwórz folder `lab2/`,
- 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://bigfish.jellyfish.ovh/docs/classes/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, packet loss

### 2.1 | Simulcast

0. Korzystamy z chrome'a/chromium :)
1. Wejdź pod https://bigfish.jellyfish.ovh
2. Eksperymentuj z odbieraną jakością video. Jak zmieniają się następujące metryki i dlaczego:
1. videoBitrate
2. frameWidth, frameHeight
3. keyframesDecoded
4. pliCount
3. Prezentacja chrome://webrtc-internals strony nadającej.
4. Wejdź pod: chrome://webrtc-internals
5. 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.

### 2.2 Packet loss
1. Wejdź pod https://bigfish.jellyfish.ovh
2. Wybierz najwyższą jakość.
3. Uruchom skrypt `sudo ./loss.sh` znajdujący się w `lab2/`
4. Ustaw różne wartości packet lossu (%): 1, 2, 5, 10, 20, 50
5. Przy jakiej wartości stream przestaje być płynny?
6. Które statystyki na to wskazują?
7. Dla wartości packet lossu, dla której stream przestaje być płynny, zmień jakość video na najniższą.
8. Czy płynność jest lepsza? Dlaczego?

## 4 | Feedback :)

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