diff --git a/README.md b/README.md index 4ae3ea5..4c6ff11 100644 --- a/README.md +++ b/README.md @@ -1,33 +1,21 @@ # IPTV StreamHub -A simple IPTV `restream` and `synchronization` (watch2gether) application with web frontend. Share your iptv playlist and watch it together with your friends. - -## ✨ Features -**Restreaming** - Proxy your iptv streams through the backend. - -**Synchronization** - The playback of the stream is perfectly synchronized for all viewers. - -**Channels** - Add multiple iptv streams, you can switch between. - -**Live chat** - chat with other viewers with randomized profile. - +> [!INFO] +>A simple IPTV `restream` and `synchronization` (watch2gether) application with `web` frontend. Share your iptv playlist and watch it together with your friends. +> Actively in devlopment and open your ideas! [Test it out](ante.is-a.dev) (Free channels for testing, use your own channels for production) ## 💡Use Cases -- Connect with multiple Devices to 1 IPTV Stream, if your provider limits current devices. -- Proxy all Requests through one IP. - - Helps with CORS issues. -- Synchronize IPTV streaming with multiple devices: Synchronized playback and channel selection. -- Share your iptv and watch together with your friends. - - The actual iptv stream-url is unvisible to them if you restream [upcomming feature] - -## 🛠️ Architecture - -### `Frontend` -A simple React webpage that can stream iptv streams in hls-format. Provides synchronized playback by using a constant delay. Also supports multiple IPTV streams (channel selection) and a chat if using together with the backend. - -### `Backend` -A simple NodeJS web server that retrieves your IPTV stream, caches it, and converts it into an HLS stream, making it accessible via the web. Also supports multiple IPTV streams (channel selection). +- [x] Connect with **multiple Devices** to 1 IPTV Stream, if your provider limits current streaming devices. +- [x] Proxy all Requests through **one IP**. + - [x] Helps with CORS issues. +- [x] **Synchronize** IPTV streaming with multiple devices: Synchronized playback and channel selection for perfect Watch2Gether. +- [x] **Share your iptv access** without revealing your actual stream-url (privacy-mode) and watch together with your friends. +## ✨ Features +**Restream / Proxy** - Proxy your iptv streams through the backend.
+**Synchronization** - The selection and playback of the stream is perfectly synchronized for all viewers.
+**Channels** - Add multiple iptv streams and playlists, you can switch between.
+**Live chat** - chat with other viewers with a randomized profile. ## 🚀 Run @@ -58,12 +46,28 @@ If you only need the **synchronization** functionality, you may only run the [fr Be aware, that this'll require additional configuration/adaption and won't be officially supported. It is recommended to [run the whole project as once](#run-with-docker). -## Preview +## 🖼️ Preview ![Frontend Preview](/frontend/ressources/frontend-preview.png) ![Add channel](/frontend/ressources/add-channel.png) +## ⚙️ Settings + +### Channel Mode +#### `Direct` +Directly uses the source stream. Won't work with most of the streams, because of CORS, IP/Device restrictions. Is also incompatible with custom headers and privacy mode. + +#### `Proxy` (Preffered) +The stream requests are proxied through the backend. Allows to set custom headers and bypass CORS. This mode is preffered. Only switch to restream mode, if proxy mode won't work for your stream or if you have synchronization issues. + +#### `Restream` +The backend service caches the source stream (with ffmpeg) and restreams it. Can help with hard device restrictions of your provider. But it can lead to long initial loading times and performance issues after time. + ## FAQ & Common Mistakes +> Which streaming mode should I choose for the channel? + +You should try with direct mode first, switch to proxy mode if it doesn't work and switch to restream mode if this also doesn't work. + > Error: `Bind for 0.0.0.0:80 failed: port is already allocated` To fix this, change the [port mapping in the docker-compose](docker-compose.yml#L40) to `X:80` e.g. `8080:80`. Make also sure that port X is open in the firewall configuration if you want to expose the application. diff --git a/backend/README.md b/backend/README.md index 4d50763..84f43a7 100644 --- a/backend/README.md +++ b/backend/README.md @@ -1,4 +1,6 @@ -# Frontend +# Backend + +A simple NodeJS web server that retrieves your IPTV stream, caches it, and converts it into an HLS stream, making it accessible via the web. Also supports multiple IPTV streams (channel selection). ## 🚀 Run diff --git a/frontend/README.md b/frontend/README.md index 8eb5ba5..bea8b27 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,5 +1,7 @@ # Frontend +A simple React webpage that can stream iptv streams in hls-format. Provides synchronized playback by using a constant delay. Also supports multiple IPTV streams (channel selection) and a chat if using together with the backend. + ## 🚀 Run Setup a `.env` file or equivalent environment variables: diff --git a/frontend/ressources/add-channel.png b/frontend/ressources/add-channel.png index 372640c..ca0f161 100644 Binary files a/frontend/ressources/add-channel.png and b/frontend/ressources/add-channel.png differ diff --git a/frontend/src/components/Tooltip.tsx b/frontend/src/components/Tooltip.tsx new file mode 100644 index 0000000..ccbdc7b --- /dev/null +++ b/frontend/src/components/Tooltip.tsx @@ -0,0 +1,34 @@ +import { Info } from 'lucide-react'; + +interface TooltipProps { + content: React.ReactNode; +} + +export function Tooltip({ content }: TooltipProps) { + return ( +
+ +
+ {content} +
+
+
+ ); +} + +export const ModeTooltipContent = () => ( +
+
+ Direct +

Directly uses the source stream. Won't work with most of the streams, because of CORS, IP/Device restrictions. Is also incompatible with custom headers and privacy mode.

+
+
+ Proxy +

The stream requests are proxied through the backend. Allows to set custom headers and bypass CORS. This mode is preffered. Only switch to restream mode, if proxy mode won't work for your stream or if you have synchronization issues.

+
+
+ Restream +

The backend service caches the source stream (with ffmpeg) and restreams it. Can help with hard device restrictions of your provider. But it can lead to long initial loading times and performance issues after time.

+
+
+); \ No newline at end of file diff --git a/frontend/src/components/add_channel/ChannelModal.tsx b/frontend/src/components/add_channel/ChannelModal.tsx index 60f2a2d..549d0bf 100644 --- a/frontend/src/components/add_channel/ChannelModal.tsx +++ b/frontend/src/components/add_channel/ChannelModal.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect, useContext } from 'react'; -import { Plus, Trash2, X } from 'lucide-react'; +import { Info, Plus, Trash2, X } from 'lucide-react'; import socketService from '../../services/SocketService'; import { CustomHeader, Channel, ChannelMode } from '../../types'; import CustomHeaderInput from './CustomHeaderInput'; import { ToastContext } from '../notifications/ToastContext'; +import { ModeTooltipContent, Tooltip } from '../Tooltip'; interface ChannelModalProps { isOpen: boolean; @@ -228,7 +229,12 @@ function ChannelModal({ isOpen, onClose, channel }: ChannelModalProps) { />
- +
- +