Ejemplo Mínimo Funcional (Menos de 50 líneas)

 

Ejemplo Mínimo Funcional (Menos de 50 líneas)

1. Estructura de Archivos

text
mi-app/
├── index.html      (Interfaz)
├── signal.php      (Servidor señalización)
└── .htaccess       (Opcional)

2. signal.php (Servidor - 20 líneas)

php
<?php
// signal.php - Servidor de señalización mínimo
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: *');

$room = $_GET['room'] ?? 'sala1';
$action = $_GET['action'] ?? '';

// Guardar en archivo (para simplicidad)
$file = "room_{$room}.json";

if ($action === 'save') {
    $data = json_decode(file_get_contents('php://input'), true);
    file_put_contents($file, json_encode($data));
    echo json_encode(['ok' => true]);
} elseif ($action === 'get') {
    echo file_exists($file) ? file_get_contents($file) : json_encode(null);
}
?>

3. index.html (Frontend - 30 líneas)

html
<!DOCTYPE html>
<html>
<body>
    <video id="local" autoplay muted style="width:300px"></video>
    <video id="remote" autoplay style="width:300px"></video>
    <br>
    <button onclick="crearLlamada()">📞 Crear llamada</button>
    <button onclick="unirse()">📱 Unirse</button>

    <script>
        const room = 'sala1';
        let pc, stream;

        async function crearLlamada() {
            stream = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
            document.getElementById('local').srcObject = stream;
            
            pc = new RTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}]});
            stream.getTracks().forEach(t => pc.addTrack(t, stream));
            pc.ontrack = e => document.getElementById('remote').srcObject = e.streams[0];

            const offer = await pc.createOffer();
            await pc.setLocalDescription(offer);
            
            await fetch(`signal.php?action=save&room=${room}`, {
                method:'POST',
                body: JSON.stringify({offer})
            });

            // Esperar respuesta
            setInterval(async () => {
                const res = await fetch(`signal.php?action=get&room=${room}`);
                const data = await res.json();
                if (data?.answer) {
                    await pc.setRemoteDescription(new RTCSessionDescription(data.answer));
                }
            }, 1000);
        }

        async function unirse() {
            stream = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
            document.getElementById('local').srcObject = stream;
            
            pc = new RTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}]});
            stream.getTracks().forEach(t => pc.addTrack(t, stream));
            pc.ontrack = e => document.getElementById('remote').srcObject = e.streams[0];

            // Obtener oferta
            const res = await fetch(`signal.php?action=get&room=${room}`);
            const data = await res.json();
            
            if (data?.offer) {
                await pc.setRemoteDescription(new RTCSessionDescription(data.offer));
                const answer = await pc.createAnswer();
                await pc.setLocalDescription(answer);
                
                await fetch(`signal.php?action=save&room=${room}`, {
                    method:'POST',
                    body: JSON.stringify({answer})
                });
            }
        }
    </script>
</body>
</html>

💼 Aplicaciones Comerciales para Vender

1. Soporte Técnico Remoto ($50-200/mes)

javascript
// Funcionalidad extra: Compartir pantalla + Chat
async function compartirPantalla() {
    const screenStream = await navigator.mediaDevices.getDisplayMedia();
    // Reemplazar track de video con pantalla
    const sender = pc.getSenders().find(s => s.track.kind === 'video');
    sender.replaceTrack(screenStream.getVideoTracks()[0]);
}

// Chat en tiempo real (Data Channel)
const dataChannel = pc.createDataChannel('chat');
dataChannel.onmessage = (e) => {
    mostrarMensaje(e.data);
};

Características para vender:

  • ✅ Control remoto de mouse/teclado

  • ✅ Anotaciones sobre pantalla

  • ✅ Grabación de sesiones

  • ✅ Historial de chats

  • ✅ Multi-sala con códigos de acceso


2. Video Consultoría Profesional ($100-500/mes)

php
// signal.php con autenticación y pagos
<?php
// Verificar suscripción antes de permitir llamada
function verificarSuscripcion($userId) {
    $pdo = new PDO('mysql:host=localhost;dbname=consultas', 'user', 'pass');
    $stmt = $pdo->prepare("SELECT * FROM suscripciones 
                           WHERE user_id = ? AND expires > NOW()");
    $stmt->execute([$userId]);
    return $stmt->fetch() !== false;
}

// Registrar consulta por minutos
function registrarConsultaLlamada($userId, $duracion) {
    // Calcular costo: $2/minuto
    $costo = $duracion * 2;
    // Descontar del crédito del usuario
}
?>

Modelo de negocio:

  • Consultas médicas, legales, financieras

  • Clases particulares (idiomas, música)

  • Coaching empresarial

  • Pago por minuto o por sesión


3. Sistema de Vigilancia con IA ($200-1000/mes)

javascript
// Detección de movimiento con IA en el cliente
async function analizarVideo() {
    const video = document.getElementById('local');
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const ctx = canvas.getContext('2d');
    
    setInterval(() => {
        ctx.drawImage(video, 0, 0);
        // Enviar frame a IA (TensorFlow.js)
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        // Detectar objetos, rostros, movimientos
    }, 1000);
}

Aplicaciones:

  • Seguridad en oficinas con detección de intrusos

  • Control de acceso por reconocimiento facial

  • Monitoreo de producción industrial

  • Alertas automáticas por WhatsApp/Email


4. Plataforma de Eventos Virtuales ($300-2000/evento)

javascript
// Broadcast a múltiples usuarios (SFU - Selective Forwarding Unit)
// Nota: WebRTC puro es P2P, necesitas servidor Media Server

// Usar mediasoup o Jitsi para multi-usuario
// Cada usuario ve al ponente + chat en vivo

Características premium:

  • 🔴 Streaming en alta definición

  • 💬 Chat moderado con preguntas

  • 🙋 Levantar mano virtual

  • 📊 Encuestas en vivo

  • 📹 Grabación automática en la nube


🏢 Aplicaciones para Oficina (Internas)

1. Sistema de Videollamadas Interno

php
// Lista de empleados disponibles
<?php
// employees.php
$empleados = [
    ['id' => 1, 'name' => 'Juan Pérez', 'depto' => 'Ventas', 'online' => true],
    ['id' => 2, 'name' => 'María López', 'depto' => 'Soporte', 'online' => false],
];
echo json_encode($empleados);
?>
javascript
// Mostrar estado de empleados
async function mostrarEmpleados() {
    const res = await fetch('employees.php');
    const empleados = await res.json();
    empleados.forEach(emp => {
        const div = document.createElement('div');
        div.innerHTML = `
            <span style="color:${emp.online ? 'green' : 'red'}">●</span>
            ${emp.name} - ${emp.depto}
            <button onclick="llamar('${emp.id}')">📞 Llamar</button>
        `;
        document.body.appendChild(div);
    });
}

2. Sala de Reuniones Virtuales con Pizarra

javascript
// Pizarra colaborativa (Data Channel)
const canvas = document.getElementById('pizarra');
const ctx = canvas.getContext('2d');
let drawing = false;

canvas.addEventListener('mousedown', () => drawing = true);
canvas.addEventListener('mouseup', () => drawing = false);
canvas.addEventListener('mousemove', (e) => {
    if (!drawing) return;
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    ctx.fillRect(x, y, 5, 5);
    // Enviar coordenadas a otros
    dataChannel.send(JSON.stringify({x, y, action: 'draw'}));
});

// Recibir dibujos de otros
dataChannel.onmessage = (e) => {
    const data = JSON.parse(e.data);
    if (data.action === 'draw') {
        ctx.fillRect(data.x, data.y, 5, 5);
    }
};

3. Sistema de Capacitación con Grabación

php
// Guardar grabación en servidor
<?php
// save_recording.php
$videoData = file_get_contents('php://input');
$filename = 'recordings/' . date('Y-m-d_H-i-s') . '.webm';
file_put_contents($filename, $videoData);
echo json_encode(['url' => $filename]);
?>
javascript
// Grabar sesión completa
let mediaRecorder;
let recordedChunks = [];

async function iniciarGrabacion() {
    const stream = document.getElementById('remote').srcObject;
    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = e => recordedChunks.push(e.data);
    mediaRecorder.onstop = async () => {
        const blob = new Blob(recordedChunks, {type: 'video/webm'});
        const formData = new FormData();
        formData.append('video', blob);
        await fetch('save_recording.php', {method: 'POST', body: formData});
    };
    mediaRecorder.start();
}

💰 Modelos de Negocio

AplicaciónPrecioPúblico Objetivo
Soporte Remoto$50-200/mesPYMES, departamentos IT
Consultoría Online$100-500/mesProfesionales independientes
Seguridad con IA$200-1000/mesOficinas, comercios
Eventos Virtuales$300-2000/eventoEmpresas, conferencias
E-learning$99-299/mesAcademias, tutores

🚀 Cómo Empezar a Vender

Paso 1: MVP en 1 día

  • Usa el código mínimo que te di

  • Ponlo en un hosting con HTTPS (Namecheap + cPanel)

  • Compra dominio (ej: soporte.miempresa.com)

Paso 2: Agrega pagos

php
// Integración con Stripe
require 'vendor/autoload.php';
\Stripe\Stripe::setApiKey('sk_test_...');

$session = \Stripe\Checkout\Session::create([
    'payment_method_types' => ['card'],
    'line_items' => [[
        'price_data' => [
            'currency' => 'usd',
            'product_data' => ['name' => 'Soporte 1 hora'],
            'unit_amount' => 5000, // $50
        ],
        'quantity' => 1,
    ]],
    'mode' => 'payment',
    'success_url' => 'https://tusitio.com/success',
    'cancel_url' => 'https://tusitio.com/cancel',
]);

Paso 3: Marketing simple

  • ✅ Landing page con demo en video

  • ✅ Oferta: "Primera semana gratis"

  • ✅ WhatsApp Business para soporte

  • ✅ LinkedIn: ofrece a empresas locales


⚡ Ventajas Competitivas

  1. Sin dependencias externas (no pagas Zoom/Teams)

  2. Datos 100% tuyos (privacidad y GDPR)

  3. Personalizable (integra con tu CRM)

  4. Costo fijo (solo hosting, no por usuario)

  5. Escalable (puedes agregar más features)


¿Quieres que profundice en alguna aplicación específica o te ayude con el código para producción

Comentarios

Entradas más populares de este blog

Tutorial Completo: Chat de Video en Vivo con PHP + WebRTC