Updated index.html and README

This commit is contained in:
2025-05-04 18:02:08 -05:00
parent 84747b2dfc
commit bf0b2fa8c7
3 changed files with 246 additions and 78 deletions

View File

@@ -3,74 +3,199 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediaFlow Proxy</title>
<link rel="icon" href="/logo.png" type="image/x-icon">
<title>Streamlink Server</title>
<style>
:root {
--primary-color: #2c3e50;
--secondary-color: #3498db;
--background-color: #f8f9fa;
--card-background: #ffffff;
--text-color: #333333;
--code-background: #f0f0f0;
}
body {
font-family: Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
color: var(--text-color);
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
background-color: var(--background-color);
}
header {
background-color: #90aacc;
color: #fff;
padding: 10px 0;
background-color: var(--primary-color);
color: white;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
header img {
width: 200px;
height: 200px;
vertical-align: middle;
border-radius: 15px;
.logo {
width: 150px;
height: auto;
margin-bottom: 1.5rem;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 1rem;
}
.card {
background: var(--card-background);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: var(--primary-color);
}
header h1 {
display: inline;
margin-left: 20px;
font-size: 36px;
color: white;
}
.feature {
background-color: #f4f4f4;
border-left: 4px solid #3498db;
padding: 10px;
margin-bottom: 10px;
code {
background: var(--code-background);
padding: 0.2em 0.4em;
border-radius: 3px;
font-family: 'Monaco', 'Consolas', monospace;
}
a {
color: #3498db;
pre {
background: var(--code-background);
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
margin: 1rem 0;
}
.endpoint {
border-left: 4px solid var(--secondary-color);
padding-left: 1rem;
margin: 1rem 0;
}
.installation-methods {
margin: 2rem 0;
}
.feature-list {
list-style-type: none;
padding: 0;
}
.feature-list li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.feature-list li::before {
content: "•";
color: var(--secondary-color);
position: absolute;
left: 0;
}
</style>
</head>
<body>
<header>
<img src="/logo.png" alt="MediaFlow Proxy Logo">
<h1>MediaFlow Proxy</h1>
</header>
<p>A high-performance proxy server for streaming media, supporting HTTP(S), HLS, and MPEG-DASH with real-time DRM decryption.</p>
<header>
<img src="/logo.png" alt="Streamlink Server Logo" class="logo">
<h1>Streamlink Server</h1>
<p>A powerful streaming proxy server that handles various stream types through Streamlink with authentication support</p>
</header>
<h2>Key Features</h2>
<div class="feature">Convert MPEG-DASH streams (DRM-protected and non-protected) to HLS</div>
<div class="feature">Support for Clear Key DRM-protected MPD DASH streams</div>
<div class="feature">Handle both live and video-on-demand (VOD) DASH streams</div>
<div class="feature">Proxy HTTP/HTTPS links with custom headers</div>
<div class="feature">Proxy and modify HLS (M3U8) streams in real-time with custom headers and key URL modifications for bypassing some sneaky restrictions.</div>
<div class="feature">Protect against unauthorized access and network bandwidth abuses</div>
<main>
<section class="card">
<h2>Overview</h2>
<p>This server provides a secure way to proxy and convert video streams using Streamlink. It supports various streaming protocols and includes features for custom headers, proxy support, and authentication.</p>
</section>
<h2>Getting Started</h2>
<p>Visit the <a href="https://github.com/mhdzumair/mediaflow-proxy">GitHub repository</a> for installation instructions and documentation.</p>
<section class="container">
<div class="card">
<h2>Key Features</h2>
<ul class="feature-list">
<li>Stream conversion using Streamlink</li>
<li>Authentication protection for all endpoints</li>
<li>Support for custom HTTP headers</li>
<li>Proxy server support</li>
<li>Channel configuration via JSON</li>
<li>Docker and Docker Compose support</li>
<li>RESTful API endpoints</li>
<li>Real-time stream monitoring and recovery</li>
<li>Support for MPEG-TS output format</li>
</ul>
</div>
<h2>Premium Hosted Service</h2>
<p>For a hassle-free experience, check out <a href="https://store.elfhosted.com/product/mediaflow-proxy">premium hosted service on ElfHosted</a>.</p>
<div class="card">
<h2>Requirements</h2>
<ul class="feature-list">
<li>Python 3.11 or newer</li>
<li>FFmpeg</li>
<li>Streamlink 6.5.0 or newer</li>
<li>FastAPI 0.109.0+</li>
<li>uvicorn 0.27.0+</li>
<li>python-multipart 0.0.9+</li>
<li>python-dotenv 1.0.0</li>
<li>typing-extensions 4.9.0+</li>
</ul>
</div>
</section>
<h2>API Documentation</h2>
<p>Explore the <a href="/docs">Swagger UI</a> for comprehensive details about the API endpoints and their usage.</p>
<section class="card">
<h2>API Endpoints</h2>
<div class="endpoint">
<h3>Stream Endpoints</h3>
<code>GET /stream/{channel_id}</code> - Stream a channel by ID<br>
<code>GET /stream/url</code> - Stream from a custom URL with query parameters
</div>
<div class="endpoint">
<h3>Utility Endpoints</h3>
<code>GET /utils/channels</code> - List all available channels<br>
<code>POST /utils/generate_url</code> - Generate encoded streaming URLs
</div>
</section>
<section class="card">
<h2>Installation Methods</h2>
<div class="installation-methods">
<h3>Standard Installation</h3>
<pre><code>git clone https://git.fiorinis.com/Home/streamlink-server.git
cd streamlink-server
pip install -r src/requirements.txt</code></pre>
<h3>Docker Installation</h3>
<pre><code>docker-compose up -d</code></pre>
<h3>Hugging Face Spaces</h3>
<p>Use the provided <code>Dockerfile_HF</code> for deployment on Hugging Face Spaces with:</p>
<ul>
<li>Optimized container size</li>
<li>Pre-configured environment for Spaces</li>
<li>Automatic HTTPS handling</li>
<li>Integration with Hugging Face's monitoring</li>
</ul>
</div>
</section>
<section class="card">
<h2>Documentation</h2>
<p>For detailed API documentation and interactive testing, visit the <a href="/docs">Swagger UI</a>.</p>
<p>For the OpenAPI specification, visit <a href="/openapi.json">OpenAPI JSON</a>.</p>
</section>
</main>
</body>
</html>