Docker setup

.gitignore

@@ -224,3 +224,7 @@ dist
 .ionide
 
 # End of https://www.toptal.com/developers/gitignore/api/macos,linux,visualstudiocode,git,node
+
+# Ignore certificate files
+cert.pem
+key.pem

Dockerfile.relay

@@ -0,0 +1,31 @@
+FROM rust:alpine AS relay-builder
+
+# Install system dependencies
+RUN apk --no-cache add git musl-dev
+
+# Clone the relay (draft 11)
+WORKDIR /moqtail
+RUN git init . && \
+    git remote add origin https://github.com/streaming-university/moqtail.git && \
+    git fetch --depth 1 origin fd691b4387c91b72acc4d264d4da092af49b7b0d && \
+    git checkout fd691b4387c91b72acc4d264d4da092af49b7b0d
+
+# Build the relay
+RUN cargo install --path apps/relay
+
+FROM alpine:latest
+
+# Install required dependencies
+RUN apk --no-cache add ca-certificates
+
+# Create directory for relay certificates
+RUN mkdir -p /etc/relay/cert
+
+# Copy the relay binary from the builder stage
+COPY --from=relay-builder /usr/local/cargo/bin/relay /usr/local/bin/relay
+
+# Expose the relay port
+EXPOSE 4433
+
+# Start the relay
+CMD ["relay", "--cert-file", "/etc/relay/cert/cert.pem", "--key-file", "/etc/relay/cert/key.pem"]

README.md

@@ -1,70 +1,22 @@
 # Time Travel in MOQ Conferencing
 
-## 🚀 Getting Started
-
 ### Prerequisites
 
-- [Node.js](https://nodejs.org/) (v20+ recommended)
-- [npm](https://www.npmjs.com/)
-- [MOQtail Relay](https://github.com/streaming-university/moqtail) running with valid certificates
+- Docker
+- Local certificates
 
-### Running the Development Server
+### Running the Time Travel Demo
 
 ```bash
-cd ./apps/client
-
-# Install dependencies
-npm install
+# Install local CA
+mkcert -install
+mkcert -key-file cert/key.pem -cert-file cert/cert.pem localhost 127.0.0.1 ::1
 
-# Run the development server
-npm run dev
+# Run the Docker containers
+docker compose up --build
 ```
 
-### Running the MOQtail Room Server
-
-```bash
-cd ./apps/room-server
-
-# Install dependencies
-npm install
-
-# Run the development MOQtail Room Server
-npm run start
-# or
-npm run dev # for nodemon hot-reload
-```
+**🚀 The app will be available at [http://localhost:4173](http://localhost:4173) by default.**
 
-The app will be available at [http://localhost:5173](http://localhost:5173) by default.
-
-## 🛠️ Sample Project Structure
-
-```
-apps/client/
-
-├── public
-│   ├── ...
-├── src
-│   ├── App.tsx
-│   ├── composables
-│   │   └── useVideoPipeline.ts
-│   ├── contexts
-│   │   └── SessionContext.tsx
-│   ├── index.css
-│   ├── main.tsx
-│   ├── pages
-│   │   ├── JoinPage.tsx
-│   │   └── SessionPage.tsx
-│   ├── sockets
-│   │   └── SocketContext.tsx
-│   ├── startup.ts
-│   ├── types
-│   │   ├── AppSettings.ts
-│   │   └── types.ts
-│   ├── videoUtils.ts
-│   ├── vite-env.d.ts
-│   └── workers
-│       ├── decoderWorker.ts
-│       └── pcmPlayerProcessor.js
-├── ...
-
-```
+> [!NOTE]
+> If you experience issues with TLS certificates, please check the [README](cert/README.md) in the `cert` directory for troubleshooting steps.

apps/client/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:alpine
+
+WORKDIR /usr/src/app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install --prefer-offline --no-audit --progress=false
+
+# Copy source code and build
+COPY . .
+RUN npm run build
+
+EXPOSE 5173
+
+# Start the application in preview mode, accessible from any host
+CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0"]

apps/room-server/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:alpine
+
+# Set working directory
+WORKDIR /usr/src/app
+
+# Copy package files and install dependencies
+COPY package*.json ./
+RUN npm install --prefer-offline --no-audit --progress=false
+
+# Copy application source
+COPY . .
+
+# Expose application port
+EXPOSE 3001
+
+# Start the application
+CMD ["npm", "run", "start"]

apps/room-server/package.json

@@ -19,7 +19,8 @@
   },
   "devDependencies": {
     "@tsconfig/node-lts": "^18.12.1",
-    "nodemon": "^3.1.0"
+    "nodemon": "^3.1.0",
+    "typescript": "^5.5.3"
   },
   "keywords": [],
   "author": "",

cert/README.md

@@ -0,0 +1,31 @@
+# Local Certificate Setup for WebTransport
+
+## Quick Setup
+
+1. **Install mkcert**:
+
+- Follow the [official mkcert installation instructions](https://github.com/FiloSottile/mkcert#installation)
+
+Sample script:
+
+```bash
+# Install local CA
+mkcert -install
+
+mkcert -key-file key.pem -cert-file cert.pem localhost 127.0.0.1 ::1
+```
+
+2. **Enable browser to trust private CAs**:
+
+- Chrome:
+  - Navigate to `chrome://flags/#webtransport-developer-mode`
+  - Enable `WebTransport Developer Mode`
+  - Restart Chrome
+
+> [!NOTE]
+> Instructions for Firefox and Edge are pending. Currently only Chrome is fully tested.
+> If you successfully configure these browsers, please consider contributing the steps!
+
+---
+
+Certificates should be placed next to this README as `cert.pem` and `key.pem`

docker-compose.yml

@@ -0,0 +1,21 @@
+services:
+  relay:
+    build:
+      context: .
+      dockerfile: Dockerfile.relay
+    ports:
+      - '4433:4433/udp'
+    volumes:
+      - ./cert:/etc/relay/cert:ro
+
+  room-server:
+    build:
+      context: ./apps/room-server
+    ports:
+      - '3001:3001'
+
+  client:
+    build:
+      context: ./apps/client
+    ports:
+      - '4173:4173'