Cabina de fotos con webcam gratuita

Cómo funciona

1. Autoriza la cámara: haz clic en «Iniciar cámara» y concede el acceso cuando el navegador lo solicite.
2. Ajusta las opciones: elige un filtro, activa el modo espejo y define un temporizador si quieres colocarte antes del disparo.
3. Captura y descarga: haz clic en «Tomar foto». Las fotos se acumulan en la galería, listas para descargarse individualmente o en lote.

Preguntas frecuentes

¿Mis fotos se envían en línea?

No. Todo el procesamiento se realiza en tu navegador mediante la API MediaDevices; las imágenes nunca salen de tu dispositivo. Ningún servidor ve ni almacena tu flujo de vídeo.

¿Por qué no se inicia la cámara?

Verifica que has autorizado el acceso a la cámara en los ajustes del navegador, que el sitio se sirve mediante HTTPS (obligatorio para el acceso a la cámara) y que ninguna otra aplicación la está usando ya.

¿Puedo elegir entre varias webcams?

Sí. Si hay varias cámaras conectadas, el selector «Cámara» las lista todas: webcam integrada, webcam USB externa, cámaras virtuales, etc.

Cómo funcionan realmente las webcams del navegador

El acceso a la cámara del navegador se rige por la especificación Media Capture and Streams del W3C. El punto de entrada es navigator.mediaDevices.getUserMedia(): una función que la página llama con un objeto de restricciones que describe el tipo de transmisión que quiere. El navegador muestra el aviso de permiso; si lo permites, la función se resuelve con un objeto MediaStream que contiene una o más pistas de vídeo. La página vincula esa transmisión a un elemento <video> mediante video.srcObject = stream, la transmisión en directo se muestra en pantalla, y capturar un fotograma es entonces cuestión de dibujar el vídeo en un <canvas> de HTML5 en el momento en que el usuario hace clic en Tomar la foto. El canvas se exporta mediante canvas.toBlob('image/jpeg'), que se convierte en el JPG descargable. Ningún fotograma sale jamás de tu dispositivo: toda la cadena está en el proceso de tu navegador.

El getUserMedia basado en promesas se lanzó sin prefijo en Chrome 53 (septiembre de 2016) y Firefox 36 (febrero de 2015). Safari fue el rezagado: el acceso a la webcam desde páginas web no llegó a iOS hasta iOS 11 (septiembre de 2017), y el objetivo estable moderno es iOS 14.5 o posterior. Para 2026, la API es esencialmente universal: caniuse sitúa el soporte global por encima del 97 %.

Por qué HTTPS es obligatorio

getUserMedia está restringido a los «contextos seguros»: HTTPS, localhost en el escritorio o file:// en Firefox. Las páginas servidas por HTTP no pueden acceder a la cámara en absoluto; la llamada se rechaza con un NotAllowedError. Este es el error de despliegue más común para las variantes autoalojadas de este tipo de herramienta, y todos los navegadores modernos lo imponen de manera uniforme. El móvil es aún más estricto: no hay exención de localhost en un teléfono, así que probar herramientas de cámara en un servidor de desarrollo local requiere una herramienta de túnel como ngrok o un proxy inverso con TLS.

Restricciones: cómo pedir la cámara correcta

El objeto de restricciones es la parte más compleja de la API. Los ajustes habituales:

• width / height: aceptan un número literal o un objeto con min, ideal, max, exact. ideal es el valor por defecto práctico; el navegador se acerca todo lo posible sin rechazar las cámaras que no pueden coincidir exactamente. exact rechaza si el hardware no puede ofrecerlo.
• facingMode: 'user' para la cámara frontal (selfi) o 'environment' para la trasera. En los portátiles con una sola cámara, la restricción se ignora silenciosamente; en los teléfonos es la forma más limpia de elegir la lente correcta sin enumerar los dispositivos.
• frameRate: la mayoría de las webcams se limitan a 30 fps; algunas cámaras USB externas alcanzan 60.
• deviceId: para elegir un dispositivo concreto tras enumerar con navigator.mediaDevices.enumerateDevices(). Un matiz crucial: label es una cadena vacía hasta que el usuario ha concedido al menos un permiso de cámara en esta sesión, así que un menú desplegable de «elige tu cámara» que se ejecute antes de cualquier concesión de permiso mostrará IDs sin etiqueta. El menú desplegable Cámara de arriba sortea esto rellenándose solo después de que Iniciar cámara tenga éxito.

La luz de la cámara es tu señal de confianza

En un Mac con una webcam de 2008 o posterior, el LED verde junto a la cámara está conectado al mismo raíl de alimentación que el sensor. macOS y el firmware imponen que el LED esté encendido siempre que el sensor recibe alimentación: Apple lo ha diseñado así para que ni siquiera el malware a nivel de kernel pueda apagar el LED mientras la cámara está grabando. iOS implementa el indicador de punto naranja en la parte superior de la pantalla desde iOS 14 (lanzado en septiembre de 2020), dibujado por un proceso del sistema que la app no puede suprimir. Las webcams de Windows usan un enfoque similar en la mayoría de los dispositivos modernos, aunque su imposición es menos universal: unas pocas webcams USB antiguas de 2010 tenían LED controlados por software. En Linux varía según el hardware.

La conclusión: confía en el LED, no en el sitio web. Una herramienta puramente de navegador como esta puede prometer con sinceridad que nada sale de tu dispositivo, y la luz de la cámara te da una confirmación independiente de que la cámara está realmente apagada cuando la página dice que lo está. El error más común en las herramientas de webcam es olvidar llamar a stream.getTracks().forEach(t => t.stop()) al cerrar, con un síntoma: la luz de la cámara se queda encendida después de que el usuario cree que la ha apagado. El botón Detener cámara de esta página lo llama explícitamente.

Cuándo recurrirías a una herramienta de webcam de navegador

• Fotos de perfil rápidas para Slack, Discord, GitHub o redes sociales, sin instalar una app de webcam aparte.
• Fotos tipo pasaporte / carné hechas en casa para formularios en línea (renovación del carné de conducir, solicitudes de visado). La historia de privacidad basada en el navegador importa aquí precisamente porque subir una foto de la cara a un servicio de terceros resulta incómodo.
• Vistas previas de videoconferencia: comprobar la iluminación, el encuadre y cómo se ve un fondo virtual antes de unirte a una llamada de Zoom o Teams.
• Asistencia escolar y de teletrabajo: cuando un profesor o un empleador pide un selfi rápido para confirmar la presencia.
• Fotos de referencia para arte y diseño: una pose de la mano, una foto de un objeto para un modelo 3D, un boceto de autorretrato.
• Fotomatón ligero en eventos: usar un portátil con una página cautiva para que los invitados se hagan selfis sin instalar una app.
• Maquetas y prototipado: los diseñadores que construyen flujos que incluyen un paso de «hazte un selfi» quieren una página de prueba rápida.
• Demostraciones educativas: profesores que muestran a los estudiantes cómo funciona la moderna API Camera de la web.

El factor diferenciador frente a Photo Booth en macOS o la app Cámara en Windows es que no se instala nada y no se sube nada, lo que resulta útil en ordenadores de trabajo restringidos y quioscos compartidos donde no puedes instalar software.

Filtros: lo que te da la propiedad filter de CSS

El canvas de HTML5 puede aplicar la sintaxis del filtro CSS a través de la propiedad ctx.filter. Los filtros disponibles arriba usan las mismas primitivas que puede aplicar cualquier regla CSS: grayscale(1) (desaturación completa, equivalente a una proyección de luminancia), sepia(1) (tono marrón cálido que imita las fotografías envejecidas), invert(1) (negativo de color), blur(5px) (desenfoque gaussiano), brightness(1.4) (multiplica la intensidad de los píxeles) y contrast(1.4) (pivota en torno al gris medio). Están aceleradas por hardware en todos los navegadores desde Chrome 53 / Firefox 35 / Safari 9.1.

Un detalle sutil pero importante: los filtros CSS aplicados al elemento <video> no se propagan al canvas. Para incorporar el filtro al JPG guardado, hay que establecer el mismo filtro en ctx.filter antes de drawImage. Esta página lo hace, así que la vista previa en pantalla coincide con el archivo guardado píxel a píxel.

Errores comunes y qué significan

Si Iniciar cámara falla, el rechazo vuelve como un DOMException con uno de estos nombres:

• NotAllowedError: tú (o una sesión anterior) denegaste el permiso, o la página no está en HTTPS. Mira el menú de permisos del sitio en la barra de direcciones y asegúrate de que Cámara está en Permitir o Preguntar.
• NotFoundError: ningún dispositivo coincidente. Ocurre con mayor frecuencia al solicitar facingMode: 'environment' con exact en un escritorio sin cámara trasera.
• NotReadableError: el hardware está en uso por otra app. Zoom, Teams, OBS u otra pestaña del navegador tiene la cámara abierta. Ciérralos y vuelve a intentarlo.
• OverconstrainedError: no se pudieron satisfacer las restricciones. Elimina los requisitos exact o relaja la resolución.
• TypeError: el objeto de restricciones estaba vacío. La llamada debe solicitar al menos audio o vídeo.

Más preguntas

¿Por qué mi imagen está al revés o de lado?

Algunas cámaras de Android informan de una rotación engañosa en sus metadatos EXIF. El navegador suele aplicar la rotación automáticamente antes de que el fotograma de vídeo llegue al canvas, pero las versiones antiguas de Samsung Internet y algunos WebView integrados se saltan el paso. Si las capturas salen de lado, prueba a girar tu dispositivo 90° antes de capturar, o usa después la herramienta Rotar una imagen.

¿Por qué el menú desplegable muestra «Cámara 1, Cámara 2» en lugar de nombres?

Porque el navegador aún no ha recibido permiso de cámara. enumerateDevices() devuelve etiquetas (p. ej. «FaceTime HD Camera») solo después de que el usuario haya aprobado el acceso a la cámara al menos una vez en la sesión actual; hasta entonces, solo se devuelven IDs opacos. Haz clic en Iniciar cámara una vez, permite el acceso, y el menú desplegable se actualizará con los nombres correctos.

¿La luz de la cámara se quedará encendida después de cerrar la página?

No. El botón Detener cámara detiene explícitamente cada pista de la transmisión, y los navegadores modernos también detienen las pistas cuando la pestaña se oculta o la página se descarga. Si alguna vez ves que el LED de la cámara se queda encendido después de cerrar una pestaña, es un error que vale la pena señalar: lo más frecuente es que signifique que la página no llamó a la función de limpieza. En esta herramienta, hacer clic en Detener cámara o cerrar la pestaña libera el hardware de inmediato.

¿Puedo grabar vídeo, no solo fotos fijas?

En esta herramienta no: es solo de captura de fotos fijas. Grabar vídeo requiere la API MediaRecorder y produce archivos en WebM, MP4 o MKV según el navegador. La grabación también tiene sus propias implicaciones de privacidad (estás almacenando mayores cantidades de material identificable), así que es un caso de uso aparte que conviene tratar con su propia herramienta específica.

¿Se envía algo a un servidor?

No. La transmisión de vídeo se entrega directamente desde el sistema operativo al navegador; la captura del canvas y la exportación a JPG ocurren mediante JavaScript localmente; la galería vive en la memoria del navegador y se descarga directamente a tu dispositivo. Nada sobre tu cámara, tu cara o tus fotos sale de la página.

Herramientas relacionadas