|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>FutLive - Painel de Transmissão</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> |
|
|
.preview-container { |
|
|
aspect-ratio: 16/9; |
|
|
} |
|
|
.thumbnail-preview { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.thumbnail-preview:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
.stream-key { |
|
|
font-family: monospace; |
|
|
} |
|
|
#previewVideo { |
|
|
transform: scaleX(-1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
|
|
|
<nav class="bg-blue-600 py-3 px-4 shadow-lg"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<i class="fas fa-futbol text-yellow-300 text-2xl"></i> |
|
|
<h1 class="text-xl font-bold text-white ml-2">Fut<span class="text-yellow-300">Live</span></h1> |
|
|
</a> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="text-white hover:text-yellow-300"> |
|
|
<i class="fas fa-home mr-1"></i> Início |
|
|
</a> |
|
|
<a href="#" class="text-white hover:text-yellow-300"> |
|
|
<i class="fas fa-video mr-1"></i> Meus Vídeos |
|
|
</a> |
|
|
<div class="relative group"> |
|
|
<button class="flex items-center text-white"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Perfil" class="w-8 h-8 rounded-full mr-2"> |
|
|
<span>Meu Canal</span> |
|
|
<i class="fas fa-chevron-down ml-1 text-xs"></i> |
|
|
</button> |
|
|
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden group-hover:block"> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Configurações</a> |
|
|
<a href="#" class="block px-4 py-2 text-gray-800 hover:bg-blue-100">Sair</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<h1 class="text-2xl font-bold mb-6">Painel de Transmissão</h1> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow-md p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4">Configurações da Transmissão</h2> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="streamTitle" class="block text-sm font-medium text-gray-700 mb-1">Título da transmissão*</label> |
|
|
<input type="text" id="streamTitle" placeholder="Ex: Jogo de Futebol - Time A vs Time B" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<p class="text-xs text-gray-500 mt-1">Crie um título claro que descreva sua transmissão</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="streamDescription" class="block text-sm font-medium text-gray-700 mb-1">Descrição</label> |
|
|
<textarea id="streamDescription" rows="3" placeholder="Descreva o que os espectadores podem esperar da sua transmissão..." |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea> |
|
|
<p class="text-xs text-gray-500 mt-1">Forneça detalhes sobre o jogo, times, jogadores, etc.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Thumbnail</label> |
|
|
<div class="flex items-center"> |
|
|
<div class="mr-4"> |
|
|
<div class="thumbnail-preview w-40 h-24 bg-gray-200 rounded-lg overflow-hidden flex items-center justify-center"> |
|
|
<i class="fas fa-image text-gray-400 text-2xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<input type="file" id="thumbnailUpload" accept="image/*" class="hidden"> |
|
|
<button onclick="document.getElementById('thumbnailUpload').click()" |
|
|
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-upload mr-2"></i> Carregar Imagem |
|
|
</button> |
|
|
<p class="text-xs text-gray-500 mt-1">Recomendado: 1280x720 pixels (16:9)</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<label for="streamCategory" class="block text-sm font-medium text-gray-700 mb-1">Categoria*</label> |
|
|
<select id="streamCategory" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<option value="">Selecione uma categoria</option> |
|
|
<option value="futebol">Futebol</option> |
|
|
<option value="futsal">Futsal</option> |
|
|
<option value="treino">Treino</option> |
|
|
<option value="torneio">Torneio</option> |
|
|
<option value="esportes">Outros Esportes</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="streamTags" class="block text-sm font-medium text-gray-700 mb-1">Tags</label> |
|
|
<input type="text" id="streamTags" placeholder="Ex: futebol, esporte, live" |
|
|
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"> |
|
|
<p class="text-xs text-gray-500 mt-1">Separe as tags por vírgulas</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Configurações de privacidade</label> |
|
|
<div class="space-y-2"> |
|
|
<label class="flex items-center"> |
|
|
<input type="radio" name="privacy" value="public" checked class="mr-2"> |
|
|
<span>Público - Qualquer pessoa pode assistir</span> |
|
|
</label> |
|
|
<label class="flex items-center"> |
|
|
<input type="radio" name="privacy" value="unlisted" class="mr-2"> |
|
|
<span>Não listado - Somente pessoas com o link podem assistir</span> |
|
|
</label> |
|
|
<label class="flex items-center"> |
|
|
<input type="radio" name="privacy" value="private" class="mr-2"> |
|
|
<span>Privado - Somente eu e os usuários que eu selecionar</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border-t border-gray-200 pt-4 mt-6"> |
|
|
<h3 class="text-lg font-semibold mb-3">Configurações do Encoder</h3> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Chave de Transmissão</label> |
|
|
<div class="flex items-center"> |
|
|
<input type="text" id="streamKey" value="futlive-7a9b3c2d1e0f" readonly |
|
|
class="stream-key flex-1 px-4 py-2 bg-gray-100 border border-gray-300 rounded-l-lg"> |
|
|
<button onclick="copyStreamKey()" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-2"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-500 mr-1"></i> |
|
|
Mantenha sua chave de transmissão em segredo. Não compartilhe com ninguém. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label for="serverUrl" class="block text-sm font-medium text-gray-700 mb-1">URL do Servidor RTMP</label> |
|
|
<div class="flex items-center"> |
|
|
<input type="text" id="serverUrl" value="rtmp://live.futlive.com/app" readonly |
|
|
class="stream-key flex-1 px-4 py-2 bg-gray-100 border border-gray-300 rounded-l-lg"> |
|
|
<button onclick="copyServerUrl()" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 bg-yellow-50 border-l-4 border-yellow-400 p-4"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0"> |
|
|
<i class="fas fa-info-circle text-yellow-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="text-sm font-medium text-yellow-800">Configuração do software de transmissão</h3> |
|
|
<div class="mt-2 text-sm text-yellow-700"> |
|
|
<p>Use a URL e a chave acima para configurar seu software de transmissão (OBS, Streamlabs, etc.).</p> |
|
|
<p class="mt-1">Servidor: <span class="font-mono">rtmp://live.futlive.com/app</span></p> |
|
|
<p class="mt-1">Chave de transmissão: <span class="font-mono">futlive-7a9b3c2d1e0f</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 flex justify-end"> |
|
|
<button id="startStreamBtn" class="px-6 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg flex items-center"> |
|
|
<i class="fas fa-broadcast-tower mr-2"></i> Iniciar Transmissão |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-1"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-4 mb-6"> |
|
|
<h2 class="text-lg font-semibold mb-3">Pré-visualização</h2> |
|
|
|
|
|
<div class="preview-container bg-black rounded-lg overflow-hidden mb-3"> |
|
|
<video id="previewVideo" autoplay muted class="w-full h-full object-cover"></video> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm font-medium">Status:</span> |
|
|
<span id="streamStatus" class="px-2 py-1 bg-gray-200 text-gray-800 rounded-full text-xs font-medium">Offline</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm font-medium">Resolução:</span> |
|
|
<span class="text-sm">1920x1080 (1080p)</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="text-sm font-medium">Taxa de bits:</span> |
|
|
<span class="text-sm">4500 kbps</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-sm font-medium">FPS:</span> |
|
|
<span class="text-sm">30</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-4 mb-6"> |
|
|
<h2 class="text-lg font-semibold mb-3">Saúde da Transmissão</h2> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Qualidade do vídeo:</span> |
|
|
<span class="text-sm">-</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Latência:</span> |
|
|
<span class="text-sm">-</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium">Buffer:</span> |
|
|
<span class="text-sm">-</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2"> |
|
|
<div class="bg-gray-400 h-2 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-4"> |
|
|
<h2 class="text-lg font-semibold mb-3">Ações Rápidas</h2> |
|
|
|
|
|
<div class="space-y-2"> |
|
|
<button class="w-full flex items-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> |
|
|
<i class="fas fa-cog text-gray-600 mr-3"></i> |
|
|
<span>Configurações do Encoder</span> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> |
|
|
<i class="fas fa-chart-line text-gray-600 mr-3"></i> |
|
|
<span>Estatísticas da Transmissão</span> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> |
|
|
<i class="fas fa-users text-gray-600 mr-3"></i> |
|
|
<span>Gerenciar Espectadores</span> |
|
|
</button> |
|
|
|
|
|
<button class="w-full flex items-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"> |
|
|
<i class="fas fa-question-circle text-gray-600 mr-3"></i> |
|
|
<span>Ajuda com Transmissão</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="streamStartedModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-2xl"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold">Transmissão Iniciada</h3> |
|
|
<button id="closeStreamModal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="text-center py-4"> |
|
|
<div class="mx-auto w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-broadcast-tower text-red-600 text-2xl"></i> |
|
|
</div> |
|
|
<h4 class="text-lg font-semibold mb-2">Sua transmissão está no ar!</h4> |
|
|
<p class="text-gray-600 mb-4">Os espectadores agora podem assistir sua transmissão ao vivo.</p> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">Link da transmissão:</span> |
|
|
<button onclick="copyStreamLink()" class="text-blue-600 hover:text-blue-800 text-sm"> |
|
|
<i class="fas fa-copy mr-1"></i> Copiar |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-100 p-2 rounded text-sm font-mono break-all"> |
|
|
https://futlive.com/live/futlive-7a9b3c2d1e0f |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<a href="#" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-eye mr-2"></i> Ver Transmissão |
|
|
</a> |
|
|
<button id="stopStreamBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-stop mr-2"></i> Encerrar Transmissão |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">FutLive</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-blue-300">Sobre</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Carreiras</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Termos de Serviço</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Política de Privacidade</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Ajuda</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-blue-300">Central de Ajuda</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Tutoriais</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Status do Serviço</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Contato</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Para Criadores</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-blue-300">Central de Transmissão</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Programa de Parceiros</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Monetização</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300">Recursos para Criadores</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Conecte-se</h3> |
|
|
<div class="flex space-x-4 mb-4"> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-blue-600 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-blue-400 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-pink-600 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 bg-gray-700 hover:bg-red-600 rounded-full flex items-center justify-center"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
<p class="text-sm text-gray-400">Baixe nosso aplicativo:</p> |
|
|
<div class="flex space-x-2 mt-2"> |
|
|
<a href="#" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center"> |
|
|
<i class="fab fa-apple mr-1"></i> iOS |
|
|
</a> |
|
|
<a href="#" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm flex items-center"> |
|
|
<i class="fab fa-android mr-1"></i> Android |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-400"> |
|
|
<p>© 2023 FutLive. Todos os direitos reservados.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const thumbnailUpload = document.getElementById('thumbnailUpload'); |
|
|
const thumbnailPreview = document.querySelector('.thumbnail-preview'); |
|
|
|
|
|
thumbnailUpload.addEventListener('change', function(e) { |
|
|
const file = e.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
thumbnailPreview.innerHTML = `<img src="${e.target.result}" class="w-full h-full object-cover">`; |
|
|
} |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function copyStreamKey() { |
|
|
const streamKey = document.getElementById('streamKey'); |
|
|
streamKey.select(); |
|
|
document.execCommand('copy'); |
|
|
|
|
|
|
|
|
const originalText = streamKey.value; |
|
|
streamKey.value = 'Copiado!'; |
|
|
setTimeout(() => { |
|
|
streamKey.value = originalText; |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
function copyServerUrl() { |
|
|
const serverUrl = document.getElementById('serverUrl'); |
|
|
serverUrl.select(); |
|
|
document.execCommand('copy'); |
|
|
|
|
|
|
|
|
const originalText = serverUrl.value; |
|
|
serverUrl.value = 'Copiado!'; |
|
|
setTimeout(() => { |
|
|
serverUrl.value = originalText; |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
|
|
|
function copyStreamLink() { |
|
|
const tempInput = document.createElement('input'); |
|
|
tempInput.value = 'https://futlive.com/live/futlive-7a9b3c2d1e0f'; |
|
|
document.body.appendChild(tempInput); |
|
|
tempInput.select(); |
|
|
document.execCommand('copy'); |
|
|
document.body.removeChild(tempInput); |
|
|
|
|
|
|
|
|
alert('Link copiado para a área de transferência!'); |
|
|
} |
|
|
|
|
|
|
|
|
const startStreamBtn = document.getElementById('startStreamBtn'); |
|
|
const streamStartedModal = document.getElementById('streamStartedModal'); |
|
|
const closeStreamModal = document.getElementById('closeStreamModal'); |
|
|
const stopStreamBtn = document.getElementById('stopStreamBtn'); |
|
|
const streamStatus = document.getElementById('streamStatus'); |
|
|
|
|
|
startStreamBtn.addEventListener('click', function() { |
|
|
|
|
|
const streamTitle = document.getElementById('streamTitle').value; |
|
|
const streamCategory = document.getElementById('streamCategory').value; |
|
|
|
|
|
if (!streamTitle || !streamCategory) { |
|
|
alert('Por favor, preencha todos os campos obrigatórios (Título e Categoria)'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
streamStartedModal.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
streamStatus.textContent = 'Ao Vivo'; |
|
|
streamStatus.classList.remove('bg-gray-200', 'text-gray-800'); |
|
|
streamStatus.classList.add('bg-red-600', 'text-white'); |
|
|
|
|
|
|
|
|
console.log('Stream started with key:', document.getElementById('streamKey').value); |
|
|
}); |
|
|
|
|
|
closeStreamModal.addEventListener('click', function() { |
|
|
streamStartedModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
stopStreamBtn.addEventListener('click', function() { |
|
|
streamStartedModal.classList.add('hidden'); |
|
|
|
|
|
|
|
|
streamStatus.textContent = 'Offline'; |
|
|
streamStatus.classList.remove('bg-red-600', 'text-white'); |
|
|
streamStatus.classList.add('bg-gray-200', 'text-gray-800'); |
|
|
|
|
|
|
|
|
console.log('Stream stopped'); |
|
|
}); |
|
|
|
|
|
|
|
|
const previewVideo = document.getElementById('previewVideo'); |
|
|
|
|
|
|
|
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
|
|
navigator.mediaDevices.getUserMedia({ video: true }) |
|
|
.then(function(stream) { |
|
|
previewVideo.srcObject = stream; |
|
|
}) |
|
|
.catch(function(error) { |
|
|
console.error('Error accessing webcam:', error); |
|
|
previewVideo.parentElement.innerHTML = ` |
|
|
<div class="w-full h-full flex items-center justify-center bg-gray-800 text-white"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-video-slash text-3xl mb-2"></i> |
|
|
<p>Webcam não disponível</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
} else { |
|
|
console.error('getUserMedia not supported'); |
|
|
previewVideo.parentElement.innerHTML = ` |
|
|
<div class="w-full h-full flex items-center justify-center bg-gray-800 text-white"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-exclamation-triangle text-3xl mb-2"></i> |
|
|
<p>Seu navegador não suporta webcam</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
streamStartedModal.addEventListener('click', function(e) { |
|
|
if (e.target === streamStartedModal) { |
|
|
streamStartedModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</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=Zypey/zy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
