captura video (sin audio) y permite grabar solo el video:

 captura video (sin audio) y permite grabar solo el video:

html
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grabación de Video (sin audio)</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #f5f5f5;
        }

        #videoElement {
            width: 100%;
            max-width: 640px;
            background-color: #333;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        button {
            padding: 10px 20px;
            background-color: #4285F4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #3367D6;
        }

        button:disabled {
            background-color: #9E9E9E;
            cursor: not-allowed;
        }

        #errorMsg {
            color: #D32F2F;
            margin-top: 20px;
            text-align: center;
        }

        #recordingIndicator {
            display: none;
            width: 12px;
            height: 12px;
            background-color: red;
            border-radius: 50%;
            margin-left: 5px;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.3; }
            100% { opacity: 1; }
        }

        #timer {
            margin-left: 10px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>Grabación de Video (sin audio)</h1>
    
    <video id="videoElement" autoplay playsinline></video>
    
    <div class="controls">
        <button id="startButton">Iniciar Cámara</button>
        <button id="stopButton" disabled>Detener Cámara</button>
        <button id="recordButton" disabled>
            Grabar Video
            <span id="recordingIndicator"></span>
            <span id="timer"></span>
        </button>
        <button id="downloadButton" disabled>Descargar Video</button>
    </div>
    
    <div id="errorMsg"></div>

    <script>
        // Elementos del DOM
        const videoElement = document.getElementById('videoElement');
        const startButton = document.getElementById('startButton');
        const stopButton = document.getElementById('stopButton');
        const recordButton = document.getElementById('recordButton');
        const downloadButton = document.getElementById('downloadButton');
        const recordingIndicator = document.getElementById('recordingIndicator');
        const timerElement = document.getElementById('timer');
        const errorMsg = document.getElementById('errorMsg');

        // Variables de estado
        let stream = null;
        let mediaRecorder = null;
        let recordedChunks = [];
        let recordingStartTime = null;
        let timerInterval = null;

        // Iniciar cámara (solo video)
        async function startCamera() {
            try {
                // Solicitar solo video (sin audio)
                stream = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: false
                });

                // Mostrar video en el elemento
                videoElement.srcObject = stream;

                // Habilitar/deshabilitar botones
                startButton.disabled = true;
                stopButton.disabled = false;
                recordButton.disabled = false;
                downloadButton.disabled = true;
                errorMsg.textContent = '';
            } catch (err) {
                console.error("Error al acceder a la cámara:", err);
                errorMsg.textContent = `Error: ${err.message}`;
            }
        }

        // Detener cámara
        function stopCamera() {
            // Detener grabación si está activa
            if (mediaRecorder && mediaRecorder.state === 'recording') {
                stopRecording();
            }

            if (stream) {
                // Detener todas las pistas
                stream.getTracks().forEach(track => track.stop());
                videoElement.srcObject = null;

                // Resetear estado
                stream = null;

                // Actualizar UI
                startButton.disabled = false;
                stopButton.disabled = true;
                recordButton.disabled = true;
                downloadButton.disabled = true;
                recordButton.textContent = "Grabar Video";
                recordingIndicator.style.display = "none";
                timerElement.textContent = "";
            }
        }

        // Iniciar grabación de video
        function startRecording() {
            recordedChunks = [];
            
            // Configurar MediaRecorder (solo video)
            const options = { mimeType: 'video/webm;codecs=vp9' };
            mediaRecorder = new MediaRecorder(stream, options);

            // Recoger datos de grabación
            mediaRecorder.ondataavailable = function(event) {
                if (event.data.size > 0) {
                    recordedChunks.push(event.data);
                }
            };

            // Iniciar grabación
            mediaRecorder.start(100); // Recoger datos cada 100ms

            // Actualizar UI
            recordButton.textContent = "Detener Grabación";
            recordingIndicator.style.display = "inline-block";
            downloadButton.disabled = true;
            
            // Iniciar temporizador
            recordingStartTime = new Date();
            updateTimer();
            timerInterval = setInterval(updateTimer, 1000);
        }

        // Detener grabación
        function stopRecording() {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
                
                // Detener temporizador
                clearInterval(timerInterval);
                
                // Actualizar UI
                recordButton.textContent = "Grabar Video";
                recordingIndicator.style.display = "none";
                downloadButton.disabled = false;
            }
        }

        // Actualizar temporizador
        function updateTimer() {
            const elapsed = Math.floor((new Date() - recordingStartTime) / 1000);
            const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
            const seconds = (elapsed % 60).toString().padStart(2, '0');
            timerElement.textContent = `${minutes}:${seconds}`;
        }

        // Descargar video grabado
        function downloadVideo() {
            const blob = new Blob(recordedChunks, { type: 'video/webm' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = `video-sin-audio-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.webm`;
            document.body.appendChild(a);
            a.click();
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 100);
        }

        // Event listeners
        startButton.addEventListener('click', startCamera);
        stopButton.addEventListener('click', stopCamera);
        recordButton.addEventListener('click', function() {
            if (recordButton.textContent === "Grabar Video") {
                startRecording();
            } else {
                stopRecording();
            }
        });
        downloadButton.addEventListener('click', downloadVideo);

        // Limpiar al salir
        window.addEventListener('beforeunload', stopCamera);
    </script>
</body>
</html>

Cambios realizados:

  1. Eliminación de controles de audio:

    • Se eliminaron todos los controles relacionados con el audio (nivel de micrófono, supresión de ruido, control de volumen)

    • Se simplificó la interfaz para mostrar solo controles de video

  2. Modificación de la captura:

    • La función getUserMedia() ahora solo solicita video (audio: false)

    • Se eliminó todo el procesamiento de audio (AudioContext, analizadores, etc.)

  3. Grabación solo de video:

    • El MediaRecorder graba solo el stream de video (sin canales de audio)

    • El archivo resultante será un video sin pista de audio

  4. Interfaz simplificada:

    • Solo muestra los botones esenciales: Iniciar/Detener cámara, Grabar/Detener grabación y Descargar

    • Se mantuvo el temporizador y el indicador de grabación

  5. Optimizaciones:

    • Código más simple al eliminar toda la lógica relacionada con audio

    • Menos consumo de recursos al no procesar audio

Esta versión es ideal si solo necesitas

Comentarios

Publicar un comentario

Entradas más populares de este blog

b-Web Speech API

Aquí tienes un ejemplo completo de un dictador de voz en tiempo real usando la Web Speech API , que convierte audio en texto en vivo. Este ejemplo incluye: Un botón para iniciar/detener el dictado. Transcripción en vivo en una caja de texto. Soporte para español ( es-MX o es-ES ). ✅ HTML + JavaScript (funciona en navegadores compatibles como Chrome) html CopiarEditar <!DOCTYPE html> <html lang="es"> <head>   <meta charset="UTF-8">   <title>Dictador de Voz - Web Speech API</title>   <style>     body {       font-family: Arial, sans-serif;       padding: 2rem;       background-color: #f0f0f0;     }     #texto {       width: 100%;       height: 200px;       padding: 1rem;  ...
Leer más

captura video con audio del sistema (como música o sonidos del navegador) pero sin usar el micrófono

  Aquí tienes una versión que captura video con audio del sistema (como música o sonidos del navegador) pero sin usar el micrófono: Aquí tienes una versión que captura video con audio del sistema (como música o sonidos del navegador) pero sin usar el micrófono: html <! DOCTYPE html > < html lang = " es " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Grabación de Video con Audio del Sistema </ title > < style > body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f5f5f5; } #videoElement { width: 100%; max-width: 640px; background-color: #333; margin: 20px 0; ...
Leer más

EL audio lo envia el navegador-Transcripción de Voz con Whisper

  Explicación del Código de Transcripción de Voz con Whisper Este proyecto es un sistema de transcripción de voz en tiempo real que utiliza: Whisper  (modelo de IA de OpenAI para reconocimiento de voz) Flask  (backend en Python) Web Audio API  (para capturar audio del navegador) Socket.IO  (para comunicación en tiempo real) Estructura del Proyecto text Copy Download proyecto/ ├── app.py # Servidor backend ├── templates/ │ └── index.html # Interfaz web └── static/ └── script.js # Lógica del cliente Requisitos para ejecutarlo Python 3.7+ FFmpeg  (debe estar instalado y accesible en el PATH) Dependencias de Python  (instalables con pip) Instalación Instala las dependencias: bash Copy Download pip install flask flask-socketio eventlet openai-whisper Asegúrate de tener FFmpeg instalado: bash Copy Download ffmpeg -version Explicación detallada del código 1. app.py (Backend) python Copy Download import whisper import tempfile from flask ...
Leer más