# Webrtc Media Devices

> Acceso a cámara en vivo desde web bloqueando galería — base del pipeline de captura

- Skill: `davidcastagnetoa/webrtc-media-devices` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add davidcastagnetoa/webrtc-media-devices`
- Raw SKILL.md: https://api.skillmd.com/api/skills/davidcastagnetoa/webrtc-media-devices/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: davidcastagnetoa (https://skillmd.com/u/davidcastagnetoa)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/davidcastagnetoa/webrtc-media-devices

---


# webrtc_media_devices

WebRTC y MediaDevices permiten capturar video en tiempo real desde la cámara, garantizando que la imagen es tomada en el momento y no subida desde galería.

## When to use

Usar en el frontend web para toda captura de selfie y video de liveness.

## Instructions

1. `navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false })`
2. Forzar cámara frontal con `facingMode: { exact: 'user' }` en móvil.
3. Renderizar stream en `<video autoplay playsinline muted>`.
4. Capturar frames dibujando en `<canvas>` → `canvas.toBlob('image/jpeg', 0.95)`.
5. No incluir `<input type="file">` en el flujo de selfie.
6. Enviar frames al backend vía WebSocket para análisis en tiempo real.
7. Aplicar constraint de resolución mínima: `{ width: { min: 640 }, height: { min: 480 } }`.

## Notes

- En HTTPS es obligatorio; en localhost funciona sin TLS.
- getUserMedia no está disponible en iframes sin `allow="camera"`.
- Para React Native usar `react-native-vision-camera`.