Multi-Channel Streaming: Building Web TV and Radio TV with Docker

Este repositório contém um ecossistema completo de transmissão de vídeo e áudio em direto (streaming multicanais) baseado no protocolo RTMP. Utiliza o Docker para contentorizar o servidor de media Nginx e disponibiliza uma interface web (HTML/JavaScript) para a reprodução dos canais de Web TV e Radio TV em tempo real.

This repository contains a complete live video and audio streaming ecosystem (multi-channel streaming) based on the RTMP protocol. It uses Docker to containerize the Nginx media server and provides a web interface (HTML/JavaScript) to play Web TV and Radio TV channels in real time.

🌐 Escolha o seu idioma / Choose your language

Clique abaixo para expandir as instruções no idioma de preferência:

🇵🇹 Português (Clique para expandir)

Stack Técnica

• Servidor RTMP/HLS: Docker com a imagem oficial tiangolo/nginx-rtmp
• Emissor (Input): OBS Studio (Instalado localmente na máquina de transmissão)
• Recetor/Player (Output): Interface Web nativa em HTML5 e JavaScript

Pré-requisitos

Antes de iniciar o projeto, certifique-se de que tem as seguintes ferramentas instaladas:

1. Docker
2. Docker Compose
3. OBS Studio

Como Executar o Projeto (Passo a Passo)

1. Clonar o Repositório e Iniciar o Servidor

Abra o seu terminal, clone este projeto e suba os contentores:

# Clonar o projeto
git clone https://github.com/Lavbella/streaming.git

# Entrar na pasta correta do repositório
cd streaming

# Iniciar o ecossistema Docker (Primeira execução)
docker compose up -d --build

Nota para arranques futuros (Sem Build): Se já realizou a build inicial e não fez alterações estruturais no código, pode iniciar o projeto de forma muito mais rápida omitindo o parâmetro de compilação:

docker compose up -d

2. Configurar o OBS Studio (Enviar o Sinal)

Para transmitir o ecrã, uma janela ou a imagem da sua câmara para o servidor Nginx-RTMP:

1. Abra o OBS Studio.
2. Aceda a Definições (Settings) > Transmissão (Stream).
3. No campo Serviço (Service), selecione Personalizado... (Custom...).
4. Preencha os campos exatamente com os seguintes dados:
   • Servidor (Server): rtmp://localhost/live
   • Chave de Transmissão (Stream Key): teste
5. Clique em Aplicar e depois em Iniciar Transmissão (Start Streaming). O OBS estabelecerá a ligação direta ao seu contentor Docker local.

3. Aceder à Interface Web (Visualizar o Sinal)

Após iniciar a transmissão no OBS, abra o seu navegador de internet e aceda ao seguinte endereço:

• URL: http://localhost:8080

A interface integrada em HTML e JavaScript irá carregar o leitor de vídeo correspondente, permitindo alternar entre as emissões e exibir o fluxo transmitido pelo OBS em tempo real.

Mapeamento de Portas de Rede

O ambiente está configurado e isolado através do Docker Compose utilizando o seguinte mapeamento de portas:

• 1935:1935 -> Porta RTMP padrão utilizada para receber o fluxo de vídeo enviado pelo OBS Studio.
• 8080:80 -> Porta HTTP utilizada para servir os ficheiros da interface web e os fragmentos de vídeo gerados pelo servidor.

Monitorização e Logs

Caso necessite de inspecionar o tráfego, verificar problemas de ligação ou validar se o fluxo do OBS está a chegar corretamente ao Nginx, utilize os comandos de logs no terminal:

# Monitorizar os logs de todos os serviços em tempo real
docker compose logs -f

# Filtrar e monitorizar apenas os logs do servidor Nginx-RTMP
docker compose logs -f nginx

Como Parar o Projeto

Para encerrar a execução dos serviços e libertar as portas do sistema sem eliminar as imagens geradas, execute:

docker compose down

🇬🇧 English (Click to expand)

Technical Stack

• RTMP/HLS Server: Docker using the official tiangolo/nginx-rtmp image
• Broadcaster (Input): OBS Studio (Installed locally on the streaming machine)
• Receiver/Player (Output): Native Web Interface using HTML5 and JavaScript

📋 Prerequisites

Before starting the project, make sure you have the following tools installed on your machine:

1. Docker
2. Docker Compose
3. OBS Studio

How to Run the Project (Step-by-Step)

1. Clone the Repository and Start the Server

Open your terminal, clone this project, and spin up the containers:

# Clone the project
git clone https://github.com/Lavbella/streaming.git

# Enter the correct repository folder
cd streaming

# Start the Docker ecosystem (First-time execution)
docker compose up -d --build

Note for future startups (Without Build): If you have already completed the initial build and haven't made any structural changes to the code, you can start the project much faster by omitting the compilation flag:

docker compose up -d

2. Configure OBS Studio (Sending the Stream)

To stream your screen, a specific window, or your camera feed to the Nginx-RTMP server:

1. Open OBS Studio.
2. Go to Settings > Stream.
3. In the Service dropdown, select Custom....
4. Fill in the fields exactly with the following data:
   • Server: rtmp://localhost/live
   • Stream Key: teste
5. Click Apply and then click Start Streaming. OBS will establish a direct connection to your local Docker container.

3. Access the Web Interface (Viewing the Stream)

After starting the stream in OBS, open your web browser and navigate to the following address:

• URL: http://localhost:8080

The built-in HTML and JavaScript interface will load the corresponding video player, allowing you to switch between broadcasts and view the live feed from OBS in real-time.

Network Port Mapping

The environment is configured and isolated through Docker Compose using the following port mappings:

• 1935:1935 -> Default RTMP port used to receive the video stream sent by OBS Studio.
• 8080:80 -> HTTP port used to serve the web interface files and the video fragments generated by the server.

Monitoring and Logs

If you need to inspect traffic, troubleshoot connection issues, or verify that the OBS stream is reaching Nginx properly, run the log commands in your terminal:

# Monitor logs from all services simultaneously in real-time
docker compose logs -f

# Filter and monitor only the Nginx-RTMP server logs
docker compose logs -f nginx

How to Stop the Project

To shut down the services and free up system ports without deleting the generated Docker images, run:

docker compose down

---

_{Project developed by Lavbella.}