Control de Cámara

¿Qué es el Control de Cámara?

El control de cámara en WebRTC se refiere al conjunto de APIs y funciones que permiten a los usuarios y aplicaciones seleccionar dispositivos de cámara, configurar ajustes de cámara y ajustar dinámicamente los parámetros de video durante las videollamadas. Esto incluye selección de dispositivos, configuración de resolución, ajustes de velocidad de fotogramas y, en hardware compatible, controles avanzados como panorámica, inclinación, zoom (PTZ), enfoque y exposición.

Las capacidades modernas de control de cámara permiten experiencias de video de nivel profesional directamente en el navegador sin plugins, soportando todo desde el simple cambio de dispositivo hasta la manipulación sofisticada de cámaras para equipos de conferencia de alta gama.

Selección de dispositivo de cámara

Enumerar cámaras disponibles

El primer paso en el control de cámara es descubrir los dispositivos disponibles usando enumerateDevices():

// Get list of all media devices
const devices = await navigator.mediaDevices.enumerateDevices();

// Filter for video input devices (cameras)
const cameras = devices.filter(device => device.kind === 'videoinput');

// Display camera list
cameras.forEach(camera => {
  console.log(`${camera.label} (${camera.deviceId})`);
});

Seleccionar una cámara específica

Usa la restricción deviceId para solicitar una cámara específica:

// Select specific camera by deviceId
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    deviceId: { exact: selectedDeviceId }
  },
  audio: true
});

Cambiar cámaras durante una llamada

Para cambiar de cámara mientras una llamada está activa, detén la pista actual y solicita una nueva:

async function switchCamera(newDeviceId) {
  const currentVideoTrack = localStream.getVideoTracks()[0];
  currentVideoTrack.stop();
  
  const newStream = await navigator.mediaDevices.getUserMedia({
    video: { deviceId: { exact: newDeviceId } }
  });
  
  const newVideoTrack = newStream.getVideoTracks()[0];
  
  const sender = peerConnection.getSenders()
    .find(s => s.track?.kind === 'video');
  
  await sender.replaceTrack(newVideoTrack);
}

Restricciones de medios

Control de resolución

Especifica la resolución del video usando restricciones de ancho y alto:

const constraints = {
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  }
};

Resoluciones comunes:

VGA: 640x480 (0.3 MP) - Bajo ancho de banda, calidad básica
HD (720p): 1280x720 (0.9 MP) - Estándar para videollamadas
Full HD (1080p): 1920x1080 (2.1 MP) - Alta calidad, mayor ancho de banda
4K: 3840x2160 (8.3 MP) - Uso profesional, ancho de banda muy alto

Modo de orientación (Móvil)

En dispositivos móviles, selecciona la cámara frontal o trasera:

// Front camera (selfie)
const frontCamera = {
  video: { facingMode: 'user' }
};

// Rear camera
const rearCamera = {
  video: { facingMode: { exact: 'environment' } }
};

Controles avanzados de cámara (PTZ)

Panorámica, inclinación y zoom

A partir de Chrome 87, los navegadores soportan controles PTZ para cámaras compatibles:

const videoTrack = stream.getVideoTracks()[0];
const capabilities = videoTrack.getCapabilities();

if (capabilities.zoom) {
  console.log(`Rango de zoom: ${capabilities.zoom.min} a ${capabilities.zoom.max}`);
}

await videoTrack.applyConstraints({
  advanced: [{
    pan: 100,
    tilt: -50,
    zoom: 2.0
  }]
});

Mejores prácticas

UI de selección de dispositivo

Mostrar nombres amigables: Mostrar device.label en lugar de deviceId
Selección predeterminada: Seleccionar la predeterminada del sistema o la cámara usada previamente
Vista previa de cámara: Mostrar vista previa al pasar sobre las opciones de cámara
Guardar selección: Guardar la elección de cámara del usuario en localStorage

Casos de uso comunes

Selección de dispositivo: Permitir a los usuarios elegir entre múltiples webcams, cámaras integradas o cámaras externas
Presets de calidad: Ofrecer opciones de calidad Baja (480p), Media (720p), Alta (1080p)
Cambio de cámara móvil: Alternar entre cámaras frontal y trasera en dispositivos móviles
PTZ para conferencias: Controlar cámaras PTZ de alta gama en salas de conferencias
Zoom para detalle: Zoom digital u óptico para mostrar detalles finos

Compatibilidad de navegadores (2025)

Chrome/Edge: Soporte completo para todas las funciones incluyendo PTZ (escritorio), excelente manejo de restricciones
Firefox: Buen soporte para restricciones básicas, soporte PTZ limitado
Safari: Soporte en mejora, Safari móvil tiene soporte facingMode, PTZ limitado
Navegadores móviles: Android Chrome tiene soporte de zoom, iOS Safari tiene facingMode y zoom limitado