<!DOCTYPE html>
<html lang="en" style="background-color: #272a33;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emisor</title>
    <script src="../socket.io/socket.io.js"></script>
    <script src="RTCMultiConnection.min.js"></script>
</head>
<style>
    body {
        font-family: sans-serif;
        color: white;
        zoom: 80%;
    }

    #startButton {
        background-color: #505163;
        color: white;
        border: none;
        padding: 4px 20px;
        font-size: 13px;
        cursor: pointer;
        border-radius: 4px;
        transition: background-color 0.3s;
    }

    #startButton:disabled {
        background-color: red;
        cursor: not-allowed;
    }

    #localVideo {
            min-width: 23em;
        max-width: 23em;
        border: 1px solid #b8b8b8;
        display: block;
        margin-top: 10px;
    }

    .inp {
        background-color: #52586b;
        color: white;
        height: 24px;
        font-size: 14px;
        width: 100px;
        border: none;
        border-radius: 5px;
        padding: 0px 9px;
        display: none;
    }

    .fcc-btn {
        background-color: #55535e;
        color: white;
        padding: 4px 20px;
        font-size: 13px;
        border-radius: 5px;
        text-decoration: none;
    }

    select {
        background-color: #52586b;
        color: white;
        border-radius: 5px;
    }
</style>
<body>
    <div style="background-color: #13141a; padding: 0.3em;">
        <!-- Video local -->
        <video id="localVideo" autoplay playsinline muted></video>
    </div>

    <div style="margin:4px">
        <button id="startButton">OFF</button>
        <a class="fcc-btn" href="/monitor-out1.html" >REFRES</a>
        <input class="inp" type="text" id="roomId" placeholder="Room ID" value="Monitor" />
    </div>

    <script>
        // Crear la conexión RTCMultiConnection
        var connection = new RTCMultiConnection();

        // Conectar a un servidor de socket.io (asegúrate de tener el servidor de socket.io configurado)
        connection.socketURL = '/';

        // Configuración de la conexión: Habilitar solo envío (oneway)
        connection.session = {
            audio: true,
            video: true,
            oneway: true  // Solo el emisor enviará el video/audio
        };

        // El label de la cámara de video y micrófono específicos que deseas usar
        var specificVideoLabel = 'AUX1-OUT';  // Reemplázalo con el label de tu cámara
        var specificAudioLabel = 'Webcam 2 (NDI Webcam Audio)';  // Reemplázalo con el label de tu micrófono

        // Obtener los dispositivos de video y audio disponibles
        navigator.mediaDevices.enumerateDevices().then(function(devices) {
            // Filtrar dispositivos de tipo video (cámaras)
            var videoDevices = devices.filter(function(device) {
                return device.kind === 'videoinput';
            });

            // Filtrar dispositivos de tipo audio (micrófonos)
            var audioDevices = devices.filter(function(device) {
                return device.kind === 'audioinput';
            });

            // Mostrar los dispositivos disponibles en la consola
            console.log('Dispositivos de video:', videoDevices);
            console.log('Dispositivos de audio:', audioDevices);

            // Buscar el `deviceId` correspondiente al `label` de video y audio
            var selectedVideoDevice = videoDevices.find(function(device) {
                return device.label === specificVideoLabel;
            });

            var selectedAudioDevice = audioDevices.find(function(device) {
                return device.label === specificAudioLabel;
            });

            // Verificar si se encontró el dispositivo de video
            if (selectedVideoDevice) {
                console.log('Dispositivo de video seleccionado:', selectedVideoDevice);
            } else {
                console.log('No se encontró el dispositivo de video con el label especificado.');
            }

            // Verificar si se encontró el dispositivo de audio
            if (selectedAudioDevice) {
                console.log('Dispositivo de audio seleccionado:', selectedAudioDevice);
            } else {
                console.log('No se encontró el dispositivo de audio con el label especificado.');
            }

            // Definir las restricciones de medios para usar el deviceId de video y audio seleccionados
            const constraints = {
                video: {
                    deviceId: selectedVideoDevice ? { exact: selectedVideoDevice.deviceId } : undefined,
                    width: { ideal: 1280 },
                    height: { ideal: 720 },
                    frameRate: { ideal: 15 }
                },
                audio: {
                    deviceId: selectedAudioDevice ? { exact: selectedAudioDevice.deviceId } : undefined
                }
            };

            connection.mediaConstraints = constraints;

            // Función para iniciar la llamada cuando se presiona el botón
            document.getElementById('startButton').onclick = function() {
                var roomId = document.getElementById('roomId').value.trim();

                if (roomId) {
                    connection.open(roomId);  // Abrir la conexión con el Room ID
                    document.getElementById('startButton').textContent = 'ON >>';
                    document.getElementById('startButton').disabled = true;
                } else {
                    alert('Por favor, ingrese un Room ID válido.');
                }
            };

            // Llamadas para configurar los eventos de RTCMultiConnection
            connection.onstream = function(event) {
                if (event.type === 'local') {
                    // Mostrar el video local
                    var videoElement = event.mediaElement;
                    videoElement.setAttribute('autoplay', true);

                    // Aquí se asigna el flujo local al contenedor de video local
                    document.getElementById('localVideo').srcObject = event.stream;
                }
            };

            // Eliminar el video cuando termine (no hay video remoto)
            connection.onstreamended = function(event) {
                event.mediaElement.parentNode.removeChild(event.mediaElement);
            };

            // Manejar errores
            connection.onerror = function(error) {
                console.log('Error en la conexión:', error);
            };

        }).catch(function(error) {
            console.log('Error al obtener dispositivos:', error);
        });
    </script>
</body>
</html>
