Hugging Face's logo

Spaces:
Altafo
/
stream-guru
Running

App Files Community
stream-guru / index.html
Altafo's picture
Altafo
Add 2 files
ca25268 verified
raw
history blame contribute delete
51.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stream GURU</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(5deg); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 0.7; }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.floating-icon {
animation: float 6s ease-in-out infinite;
}
.pulse-icon {
animation: pulse 2s ease-in-out infinite;
}
.spin-icon {
animation: spin 4s linear infinite;
}
.terminal {
background-color: #1e1e1e;
color: #00ff00;
font-family: 'Courier New', monospace;
height: 200px;
overflow-y: auto;
padding: 1rem;
border-radius: 0.5rem;
}
.tab-active {
border-bottom: 3px solid #3b82f6;
color: #3b82f6;
font-weight: 600;
}
.video-preview {
background: linear-gradient(45deg, #1e293b, #0f172a);
display: flex;
align-items: center;
justify-content: center;
}
.toggle-checkbox:checked {
right: 0;
border-color: #3b82f6;
}
.toggle-checkbox:checked + .toggle-label {
background-color: #3b82f6;
}
.stream-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.permission-modal {
background-color: rgba(0,0,0,0.8);
z-index: 100;
}
#videoElement {
width: 100%;
height: 100%;
object-fit: cover;
}
.connection-status {
position: relative;
padding-left: 1.5rem;
}
.connection-status::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: #6b7280;
}
.connection-status.connected::before {
background-color: #10b981;
animation: pulse 1.5s infinite;
}
.connection-status.connecting::before {
background-color: #f59e0b;
animation: pulse 1s infinite;
}
.connection-status.error::before {
background-color: #ef4444;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<!-- Home Screen -->
<div id="homeScreen" class="min-h-screen flex flex-col">
<div class="container mx-auto px-4 py-8 flex-1 flex flex-col">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white flex items-center">
<i class="fas fa-satellite-dish text-blue-500 mr-3"></i> Stream GURU
</h1>
<div class="flex items-center">
<span class="mr-2 text-gray-600 dark:text-gray-300 text-sm">Dark Mode</span>
<div class="relative inline-block w-12 mr-2 align-middle select-none">
<input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
</div>
</div>
<div class="relative flex-1 flex flex-col items-center justify-center overflow-hidden">
<!-- 20 Floating Icons -->
<i class="fab fa-youtube text-red-600 text-4xl floating-icon absolute top-10 left-10 opacity-20"></i>
<i class="fab fa-facebook text-blue-600 text-4xl floating-icon absolute top-20 right-20 opacity-20"></i>
<i class="fab fa-tiktok text-black dark:text-white text-4xl floating-icon absolute bottom-20 left-20 opacity-20"></i>
<i class="fas fa-broadcast-tower text-purple-600 text-4xl floating-icon absolute bottom-10 right-10 opacity-20"></i>
<i class="fab fa-twitch text-purple-500 text-3xl floating-icon absolute top-1/4 left-1/4 opacity-15 spin-icon"></i>
<i class="fab fa-instagram text-pink-500 text-3xl floating-icon absolute top-1/3 right-1/4 opacity-15"></i>
<i class="fab fa-twitter text-blue-400 text-3xl floating-icon absolute bottom-1/4 left-1/3 opacity-15 pulse-icon"></i>
<i class="fas fa-video text-green-500 text-3xl floating-icon absolute top-1/2 right-1/3 opacity-15"></i>
<i class="fas fa-film text-yellow-500 text-3xl floating-icon absolute bottom-1/3 left-1/2 opacity-15"></i>
<i class="fas fa-satellite text-indigo-500 text-3xl floating-icon absolute top-1/4 right-1/2 opacity-15 spin-icon"></i>
<i class="fas fa-wifi text-blue-300 text-3xl floating-icon absolute bottom-1/2 left-1/4 opacity-15"></i>
<i class="fas fa-cloud text-gray-400 text-3xl floating-icon absolute top-3/4 right-1/5 opacity-15"></i>
<i class="fas fa-microphone text-red-400 text-3xl floating-icon absolute bottom-1/5 left-3/4 opacity-15 pulse-icon"></i>
<i class="fas fa-headphones text-purple-300 text-3xl floating-icon absolute top-1/5 right-3/4 opacity-15"></i>
<i class="fas fa-music text-pink-300 text-3xl floating-icon absolute bottom-3/4 left-1/5 opacity-15"></i>
<i class="fas fa-compact-disc text-indigo-300 text-3xl floating-icon absolute top-2/3 right-2/3 opacity-15 spin-icon"></i>
<i class="fas fa-play-circle text-red-300 text-3xl floating-icon absolute bottom-2/3 left-2/3 opacity-15 pulse-icon"></i>
<i class="fas fa-stop-circle text-yellow-300 text-3xl floating-icon absolute top-3/4 left-3/4 opacity-15"></i>
<i class="fas fa-podcast text-green-300 text-3xl floating-icon absolute bottom-3/4 right-3/4 opacity-15"></i>
<i class="fas fa-rss text-orange-300 text-3xl floating-icon absolute top-1/2 left-1/2 opacity-15 spin-icon"></i>
<div class="text-center max-w-2xl z-10">
<h2 class="text-4xl font-bold mb-6 text-gray-800 dark:text-white">Ultimate Multi-Streaming Platform</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
Broadcast to multiple platforms simultaneously with advanced proxy support and real-time monitoring.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-globe text-blue-500 text-2xl mb-2"></i>
<h3 class="font-semibold text-gray-800 dark:text-white">Multi-Platform</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Stream to 10+ platforms including YouTube, Twitch, Facebook</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-user-secret text-green-500 text-2xl mb-2"></i>
<h3 class="font-semibold text-gray-800 dark:text-white">Proxy Support</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">HTTPS & SOCKS5 proxy with automatic rotation</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-video text-purple-500 text-2xl mb-2"></i>
<h3 class="font-semibold text-gray-800 dark:text-white">Flexible Sources</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Camera, screen capture, or pre-recorded videos</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow">
<i class="fas fa-tachometer-alt text-yellow-500 text-2xl mb-2"></i>
<h3 class="font-semibold text-gray-800 dark:text-white">Optimized</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm">Adaptive bitrate for perfect streaming quality</p>
</div>
</div>
<button onclick="showStreamSetup()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all transform hover:scale-105 shadow-lg">
<i class="fas fa-rocket mr-2"></i> Start Streaming
</button>
</div>
</div>
<div class="mt-auto text-center py-6">
<p class="text-gray-500 dark:text-gray-400">Developed by Trickey Guru | v2.0</p>
</div>
</div>
</div>
<!-- Streaming Setup Screen -->
<div id="streamSetupScreen" class="min-h-screen hidden bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center mb-6">
<button onclick="showHomeScreen()" class="text-blue-600 dark:text-blue-400 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
<i class="fas fa-sliders-h mr-2 text-blue-500"></i> Streaming Setup
</h2>
<div class="w-12"></div>
</div>
<!-- Tab Navigation -->
<div class="flex border-b border-gray-200 dark:border-gray-700 mb-6">
<button id="tab1" onclick="switchTab(1)" class="px-4 py-2 tab-active">Stream 1</button>
<button id="tab2" onclick="switchTab(2)" class="px-4 py-2">Stream 2</button>
<button id="tab3" onclick="switchTab(3)" class="px-4 py-2">Stream 3</button>
<button onclick="addTab()" class="px-4 py-2 text-blue-600 dark:text-blue-400">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Video Source -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
<i class="fas fa-video mr-2 text-blue-500"></i> Video Source
</h3>
<div class="video-preview rounded-lg mb-4 h-40 relative" id="videoPreviewContainer">
<i class="fas fa-video text-gray-400 text-4xl" id="videoPlaceholderIcon"></i>
<video id="videoElement" class="hidden" autoplay playsinline></video>
</div>
<div class="flex space-x-2 mb-4">
<button onclick="requestCameraPermission()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1">
<i class="fas fa-camera mr-2"></i> Use Camera
</button>
<button onclick="requestGalleryPermission()" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg flex-1">
<i class="fas fa-folder-open mr-2"></i> Select Video
</button>
</div>
<div class="flex justify-between mb-2">
<button id="playBtn" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg" disabled>
<i class="fas fa-play mr-2"></i> Play
</button>
<button id="pauseBtn" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg" disabled>
<i class="fas fa-pause mr-2"></i> Pause
</button>
<button id="muteBtn" class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg" disabled>
<i class="fas fa-volume-up mr-2"></i> Mute
</button>
</div>
<div class="flex items-center">
<input type="checkbox" id="loopToggle" class="mr-2">
<label for="loopToggle" class="text-gray-700 dark:text-gray-300">Loop Video</label>
</div>
</div>
<!-- Stream Settings -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
<i class="fas fa-stream mr-2 text-blue-500"></i> Stream Settings
</h3>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1">Platform</label>
<select id="platformSelect" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
<option value="">Select Platform</option>
<option value="youtube">YouTube</option>
<option value="facebook">Facebook</option>
<option value="twitch">Twitch</option>
<option value="tiktok">TikTok</option>
<option value="custom">Custom RTMP</option>
</select>
</div>
<div id="youtubeFields" class="hidden space-y-3">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">YouTube Server</label>
<select id="youtubeServer" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
<option value="primary">Primary (rtmp://a.rtmp.youtube.com/live2)</option>
<option value="backup">Backup (rtmp://b.rtmp.youtube.com/live2)</option>
</select>
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">Stream Key</label>
<input type="text" id="youtubeKey" placeholder="Enter YouTube stream key" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<button onclick="testYouTubeConnection()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg w-full">
<i class="fas fa-plug mr-2"></i> Test Connection
</button>
<div id="youtubeStatus" class="connection-status text-sm">
Not connected
</div>
</div>
<div id="customFields" class="hidden space-y-3">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">RTMP URL</label>
<input type="text" id="customUrl" placeholder="rtmp://example.com/live" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">Stream Key</label>
<input type="text" id="customKey" placeholder="your-stream-key" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
</div>
<div class="mb-4 mt-4">
<label class="block text-gray-700 dark:text-gray-300 mb-1">Final URL</label>
<div id="finalUrl" class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg text-sm text-gray-600 dark:text-gray-300 break-all">
No stream URL configured
</div>
</div>
<button id="addStreamBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg w-full">
<i class="fas fa-plus-circle mr-2"></i> Add New Stream
</button>
</div>
<!-- Proxy & Quality -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
<i class="fas fa-user-shield mr-2 text-blue-500"></i> Proxy & Quality
</h3>
<div class="mb-4">
<div class="flex items-center justify-between mb-2">
<label class="text-gray-700 dark:text-gray-300">Enable Proxy</label>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" id="proxyToggle">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
</label>
</div>
<div id="proxyFields" class="hidden space-y-3 mt-3">
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">Proxy Type</label>
<select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
<option>HTTPS</option>
<option>SOCKS5</option>
</select>
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">IP Address</label>
<input type="text" placeholder="192.168.1.1" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">Port</label>
<input type="number" placeholder="8080" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">Username (optional)</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 mb-1">Password (optional)</label>
<input type="password" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
</div>
<div class="flex space-x-2">
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg flex-1">
<i class="fas fa-plug mr-2"></i> Check Proxy
</button>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex-1">
<i class="fas fa-save mr-2"></i> Save
</button>
</div>
</div>
</div>
<div class="mt-6">
<div class="flex items-center justify-between mb-2">
<label class="text-gray-700 dark:text-gray-300">Low Bandwidth Mode</label>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" id="bandwidthToggle">
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
</label>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400">Reduces bitrate and uses "ultrafast" preset for unstable networks</p>
</div>
<div class="mt-8">
<button id="startStreamBtn" onclick="startStreaming()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg w-full font-bold stream-btn" disabled>
<i class="fas fa-broadcast-tower mr-2"></i> Start Streaming
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Streaming Screen -->
<div id="streamingScreen" class="min-h-screen hidden bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center mb-6">
<button onclick="showStreamSetup()" class="text-blue-600 dark:text-blue-400 flex items-center">
<i class="fas fa-arrow-left mr-2"></i> Back
</button>
<h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
<i class="fas fa-broadcast-tower text-red-500 mr-2 animate-pulse"></i> Live Streaming
</h2>
<div class="w-12"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-6">
<!-- Video Preview -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<div class="video-preview rounded-lg mb-4 h-64 relative">
<video id="liveVideoElement" autoplay playsinline class="w-full h-full"></video>
<div class="absolute bottom-4 left-4 bg-red-600 text-white px-2 py-1 rounded-md flex items-center">
<div class="w-2 h-2 rounded-full bg-white mr-2 animate-pulse"></div>
<span>LIVE</span>
<span id="streamTimer" class="ml-4">00:00:00</span>
</div>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
<span class="font-semibold text-gray-800 dark:text-white">Streaming Active</span>
</div>
<button onclick="stopStreaming()" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
<i class="fas fa-stop mr-2"></i> Stop Streaming
</button>
</div>
</div>
<!-- FFmpeg Logs -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">
<i class="fas fa-terminal mr-2 text-blue-500"></i> FFmpeg Logs
</h3>
<div class="terminal rounded-lg">
<div>> Starting FFmpeg process...</div>
<div>> Connecting to YouTube servers...</div>
<div id="youtubeLogLine">>> YouTube: Establishing connection to rtmp://a.rtmp.youtube.com/live2...</div>
<div id="youtubeStatusLine">>> YouTube: Connection established! Streaming active.</div>
<div>> Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'video.mp4':</div>
<div>> Metadata:</div>
<div>> major_brand : isom</div>
<div>> minor_version : 512</div>
<div>> compatible_brands: isomiso2avc1mp41</div>
<div>> Duration: 00:05:30.00, start: 0.000000, bitrate: 1500 kb/s</div>
<div>> Stream #0:0(und): Video: h264 (Main) (avc1 / 0x31637661), yuv420p, 1280x720, 1499 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)</div>
<div>> Stream mapping:</div>
<div>> Stream #0:0 -> #0:0 (h264 (native) -> h264 (libx264))</div>
<div>> Press [q] to stop, [?] for help</div>
<div>> [libx264 @ 0x7f8b4c00b600] using cpu capabilities: MMX2 SSE2Fast SSSE3 SSE4.2 AVX FMA3 BMI2 AVX2</div>
<div>> [libx264 @ 0x7f8b4c00b600] profile High, level 3.1, 4:2:0, 8-bit</div>
<div>> Output #0, flv, to 'rtmp://a.rtmp.youtube.com/live2/your-stream-key':</div>
<div>> Metadata:</div>
<div>> encoder : Lavf58.76.100</div>
<div>> Stream #0:0(und): Video: h264 (libx264) ([7][0][0][0] / 0x0007), yuv420p(progressive), 1280x720, q=-1--1, 3000 kb/s, 30 fps, 1k tbn (default)</div>
<div>> Metadata:</div>
<div>> encoder : Lavc58.134.100 libx264</div>
<div>> Side data:</div>
<div>> cpb: bitrate max/min/avg: 6000000/0/3000000 buffer size: 6000000 vbv_delay: -1</div>
<div>> frame= 1 fps=0.0 q=0.0 size= 0kB time=00:00:00.00 bitrate=N/A speed= 0x</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-6">
<!-- Stream Status -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
<i class="fas fa-chart-bar mr-2 text-blue-500"></i> Stream Status
</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-700 dark:text-gray-300">YouTube</span>
<span class="text-green-500 font-semibold connection-status connected">Active</span>
</div>
<div class="flex justify-between">
<span class="text-gray-700 dark:text-gray-300">Facebook</span>
<span class="text-yellow-500 font-semibold connection-status connecting">Connecting</span>
</div>
<div class="flex justify-between">
<span class="text-gray-700 dark:text-gray-300">Twitch</span>
<span class="text-gray-500 font-semibold connection-status">Inactive</span>
</div>
</div>
</div>
<!-- Stream Info -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
<i class="fas fa-info-circle mr-2 text-blue-500"></i> Stream Information
</h3>
<div class="space-y-2">
<div>
<label class="block text-gray-700 dark:text-gray-300 text-sm">Video Source</label>
<p class="text-gray-800 dark:text-white font-medium">Live Camera</p>
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 text-sm">Resolution</label>
<p class="text-gray-800 dark:text-white font-medium">1280x720</p>
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 text-sm">Bitrate</label>
<p class="text-gray-800 dark:text-white font-medium">3000 kbps</p>
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 text-sm">FPS</label>
<p class="text-gray-800 dark:text-white font-medium">30</p>
</div>
<div>
<label class="block text-gray-700 dark:text-gray-300 text-sm">Proxy</label>
<p class="text-gray-800 dark:text-white font-medium">Disabled</p>
</div>
</div>
</div>
<!-- Quick Controls -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">
<i class="fas fa-sliders-h mr-2 text-blue-500"></i> Quick Controls
</h3>
<div class="grid grid-cols-2 gap-3">
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg">
<i class="fas fa-pause mr-2"></i> Pause
</button>
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg">
<i class="fas fa-volume-up mr-2"></i> Mute
</button>
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg">
<i class="fas fa-sync-alt mr-2"></i> Restart
</button>
<button class="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-white px-4 py-2 rounded-lg">
<i class="fas fa-cog mr-2"></i> Settings
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Permission Modal -->
<div id="permissionModal" class="fixed inset-0 flex items-center justify-center hidden permission-modal">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Permission Required</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">Stream GURU needs access to your camera to start live streaming. Please allow camera access when prompted.</p>
<div class="flex justify-end space-x-3">
<button onclick="hidePermissionModal()" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-white">Cancel</button>
<button onclick="requestCameraAccess()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">Allow Access</button>
</div>
</div>
</div>
<script>
// Dark mode toggle
const toggle = document.getElementById('toggle');
const html = document.querySelector('html');
// Check for saved user preference or use system preference
if (localStorage.getItem('darkMode') === 'true' ||
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
toggle.checked = true;
}
toggle.addEventListener('change', function() {
if (this.checked) {
html.classList.add('dark');
localStorage.setItem('darkMode', 'true');
} else {
html.classList.remove('dark');
localStorage.setItem('darkMode', 'false');
}
});
// Screen navigation
function showHomeScreen() {
document.getElementById('homeScreen').classList.remove('hidden');
document.getElementById('streamSetupScreen').classList.add('hidden');
document.getElementById('streamingScreen').classList.add('hidden');
stopAllStreams();
}
function showStreamSetup() {
document.getElementById('homeScreen').classList.add('hidden');
document.getElementById('streamSetupScreen').classList.remove('hidden');
document.getElementById('streamingScreen').classList.add('hidden');
stopAllStreams();
}
function startStreaming() {
document.getElementById('homeScreen').classList.add('hidden');
document.getElementById('streamSetupScreen').classList.add('hidden');
document.getElementById('streamingScreen').classList.remove('hidden');
// Start timer
let seconds = 0;
const timer = setInterval(function() {
seconds++;
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
document.getElementById('streamTimer').textContent =
`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}, 1000);
// Store timer interval so we can clear it later
document.getElementById('streamingScreen').setAttribute('data-timer', timer);
// Start the live video feed
const videoElement = document.getElementById('liveVideoElement');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
videoElement.srcObject = stream;
})
.catch(function(error) {
console.error("Error accessing media devices:", error);
});
}
}
function stopStreaming() {
// Clear timer
const timer = document.getElementById('streamingScreen').getAttribute('data-timer');
clearInterval(parseInt(timer));
// Stop all media streams
stopAllStreams();
showStreamSetup();
}
function stopAllStreams() {
// Stop camera streams
const videoElements = document.querySelectorAll('video');
videoElements.forEach(video => {
if (video.srcObject) {
video.srcObject.getTracks().forEach(track => track.stop());
video.srcObject = null;
}
});
// Hide live video and show placeholder
const videoPreview = document.getElementById('videoPreviewContainer');
const videoElement = document.getElementById('videoElement');
const placeholderIcon = document.getElementById('videoPlaceholderIcon');
if (videoElement && placeholderIcon) {
videoElement.classList.add('hidden');
placeholderIcon.classList.remove('hidden');
}
// Reset YouTube connection status
const youtubeStatus = document.getElementById('youtubeStatus');
if (youtubeStatus) {
youtubeStatus.textContent = "Not connected";
youtubeStatus.className = "connection-status text-sm";
}
}
// Proxy toggle
const proxyToggle = document.getElementById('proxyToggle');
const proxyFields = document.getElementById('proxyFields');
proxyToggle.addEventListener('change', function() {
if (this.checked) {
proxyFields.classList.remove('hidden');
} else {
proxyFields.classList.add('hidden');
}
});
// Tab functionality
let currentTab = 1;
const totalTabs = 3;
function switchTab(tabNumber) {
currentTab = tabNumber;
// Update tab styling
for (let i = 1; i <= totalTabs; i++) {
const tab = document.getElementById(`tab${i}`);
if (i === tabNumber) {
tab.classList.add('tab-active');
} else {
tab.classList.remove('tab-active');
}
}
// In a real app, you would load the settings for this tab
}
function addTab() {
if (totalTabs < 5) {
// In a real app, you would add a new tab
alert('New tab would be added in the full app');
} else {
alert('Maximum number of streams reached');
}
}
// Platform selection
const platformSelect = document.getElementById('platformSelect');
const youtubeFields = document.getElementById('youtubeFields');
const customFields = document.getElementById('customFields');
const startStreamBtn = document.getElementById('startStreamBtn');
platformSelect.addEventListener('change', function() {
youtubeFields.classList.add('hidden');
customFields.classList.add('hidden');
if (this.value === 'youtube') {
youtubeFields.classList.remove('hidden');
} else if (this.value === 'custom') {
customFields.classList.remove('hidden');
}
updateFinalUrl();
validateStreamSettings();
});
// Update final URL when inputs change
document.getElementById('youtubeKey').addEventListener('input', function() {
updateFinalUrl();
validateStreamSettings();
});
document.getElementById('customUrl').addEventListener('input', function() {
updateFinalUrl();
validateStreamSettings();
});
document.getElementById('customKey').addEventListener('input', function() {
updateFinalUrl();
validateStreamSettings();
});
function updateFinalUrl() {
const finalUrl = document.getElementById('finalUrl');
const platform = platformSelect.value;
if (platform === 'youtube') {
const server = document.getElementById('youtubeServer').value;
const key = document.getElementById('youtubeKey').value;
const serverUrl = server === 'primary' ? 'rtmp://a.rtmp.youtube.com/live2' : 'rtmp://b.rtmp.youtube.com/live2';
if (key) {
finalUrl.textContent = `${serverUrl}/${key}`;
} else {
finalUrl.textContent = `${serverUrl}/[your-stream-key]`;
}
} else if (platform === 'custom') {
const url = document.getElementById('customUrl').value;
const key = document.getElementById('customKey').value;
if (url && key) {
finalUrl.textContent = `${url}/${key}`;
} else if (url) {
finalUrl.textContent = `${url}/[your-stream-key]`;
} else {
finalUrl.textContent = "No stream URL configured";
}
} else {
finalUrl.textContent = "Select a platform to configure";
}
}
function validateStreamSettings() {
const platform = platformSelect.value;
let isValid = false;
if (platform === 'youtube') {
isValid = document.getElementById('youtubeKey').value.trim() !== '';
} else if (platform === 'custom') {
isValid = document.getElementById('customUrl').value.trim() !== '' &&
document.getElementById('customKey').value.trim() !== '';
}
// Also check if we have video source
const videoElement = document.getElementById('videoElement');
const hasVideoSource = videoElement.src || (videoElement.srcObject && videoElement.srcObject.active);
startStreamBtn.disabled = !(isValid && hasVideoSource);
}
// Test YouTube connection
function testYouTubeConnection() {
const youtubeStatus = document.getElementById('youtubeStatus');
const youtubeKey = document.getElementById('youtubeKey').value.trim();
if (!youtubeKey) {
youtubeStatus.textContent = "Please enter a stream key";
youtubeStatus.className = "connection-status error text-sm";
return;
}
youtubeStatus.textContent = "Connecting to YouTube...";
youtubeStatus.className = "connection-status connecting text-sm";
// Simulate connection test (in a real app, this would be an actual connection test)
setTimeout(() => {
// Randomly decide if connection succeeds (80% chance) for demo purposes
if (Math.random() > 0.2) {
youtubeStatus.textContent = "Connected to YouTube successfully!";
youtubeStatus.className = "connection-status connected text-sm";
} else {
youtubeStatus.textContent = "Connection failed. Check your stream key.";
youtubeStatus.className = "connection-status error text-sm";
}
}, 2000);
}
// Camera and gallery permissions
function requestCameraPermission() {
showPermissionModal();
}
function requestGalleryPermission() {
alert("In a real app, this would request access to your gallery/files");
// For demo purposes, we'll just simulate selecting a video
const videoElement = document.getElementById('videoElement');
const placeholderIcon = document.getElementById('videoPlaceholderIcon');
// Create a fake video source for demo
videoElement.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
videoElement.classList.remove('hidden');
placeholderIcon.classList.add('hidden');
// Enable video controls
document.getElementById('playBtn').disabled = false;
document.getElementById('pauseBtn').disabled = false;
document.getElementById('muteBtn').disabled = false;
validateStreamSettings();
}
function showPermissionModal() {
document.getElementById('permissionModal').classList.remove('hidden');
}
function hidePermissionModal() {
document.getElementById('permissionModal').classList.add('hidden');
}
function requestCameraAccess() {
hidePermissionModal();
const videoElement = document.getElementById('videoElement');
const placeholderIcon = document.getElementById('videoPlaceholderIcon');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
videoElement.srcObject = stream;
videoElement.classList.remove('hidden');
placeholderIcon.classList.add('hidden');
// Enable video controls
document.getElementById('playBtn').disabled = false;
document.getElementById('pauseBtn').disabled = false;
document.getElementById('muteBtn').disabled = false;
validateStreamSettings();
})
.catch(function(error) {
console.error("Error accessing media devices:", error);
alert("Could not access camera. Please check permissions.");
});
} else {
alert("Camera access is not supported in your browser.");
}
}
// Video controls
document.getElementById('playBtn').addEventListener('click', function() {
const videoElement = document.getElementById('videoElement');
if (videoElement.src || videoElement.srcObject) {
videoElement.play();
}
});
document.getElementById('pauseBtn').addEventListener('click', function() {
const videoElement = document.getElementById('videoElement');
if (videoElement.src || videoElement.srcObject) {
videoElement.pause();
}
});
document.getElementById('muteBtn').addEventListener('click', function() {
const videoElement = document.getElementById('videoElement');
const muteBtn = document.getElementById('muteBtn');
if (videoElement.src || videoElement.srcObject) {
videoElement.muted = !videoElement.muted;
muteBtn.innerHTML = videoElement.muted ?
'<i class="fas fa-volume-mute mr-2"></i> Unmute' :
'<i class="fas fa-volume-up mr-2"></i> Mute';
}
});
// Initialize
updateFinalUrl();
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Altafo/stream-guru" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>