Los estándares HTML y JavaScript modernos les brindan a los desarrolladores herramientas poderosas para interactuar con los teléfonos inteligentes a través del navegador. Por ejemplo, también ha sido posible el seguimiento de los movimientos humanos usando el giroscopio/acelerómetro con reconocimiento de patrones (caminar, correr, transporte público, estar cerca de otro usuario con patrones similares) en una página web.

Esta no es la única función de este tipo. Por ejemplo, los navegadores móviles soportan el atributo HTML <capture>, que inicia la grabación de vídeo en un smartphone simplemente presionando un botón en la página web.

Habilitar la Cámara

De acuerdo con la tabla, el atributo <capture> es compatible con casi todos los navegadores móviles populares, a excepción de Opera Mini. En los navegadores de escritorio, la compatibilidad está ausente de forma lógica, ya que la función está diseñada específicamente para su uso en teléfonos inteligentes.

Tabla de compatibilidad del atributo capture
Tabla de compatibilidad del atributo capture

El atributo <capture> indica la grabación de un nuevo archivo (mediante el botón de selección de archivo) y determina el dispositivo que se utiliza para capturar el contenido. El tipo de contenido está definido por el atributo <accept>. El valor user significa cámara y/o micrófono orientados al usuario, mientras que environment significa frontal.

Ejemplo de uso de la documentación:

<p>
  <label for="soundFile">¿Cómo suena tu voz?</label>
  <input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
  <label for="videoFile">Cargar tu video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
  <label for="imageFile">Cargar tu foto:</label>
  <input type="file" id="imageFile" capture="user" accept="image/*" />
</p>
Ejemplo de Captura de Medios con HTML
Ejemplo de Captura de Medios con HTML

Demostración (al presionar el botón en el escritorio se abre un cuadro de diálogo para elegir el archivo, mientras que en un teléfono inteligente comienza la grabación de video)

Lógicamente, no se le pide al usuario permiso para grabar. Primero, debe presionar explícitamente un botón en la página web que dice “Cargar video” o “Cargar foto“, después de lo cual comienza la grabación de fotos/videos sin preguntas adicionales. En segundo lugar, el archivo se guarda localmente en el dispositivo del usuario. En tercer lugar, el usuario ve claramente en la pantalla de su teléfono inteligente que está grabando, y luego debe presionar otro botón para detener la grabación de video y confirmar el resultado.

Por lo tanto, el teléfono no solicita permiso para la página web para comenzar la grabación. Sin embargo, algunos expertos en seguridad creen que la implementación deja espacio para abusos. En particular, la leyenda en el botón puede ser falsa. Por lo que el usuario puede presionarlo accidentalmente o ser inducido a presionarlo mediante engaños.

Sitios Web que Capturan Video desde el Navegador

Actualmente, cada vez más sitios web hacen cosas increíbles en el navegador, capturando video a través de la página web. Para superponer filtros en la transmisión de video en tiempo real, videoconferencias, reconocimiento de voz, ahora no se requieren aplicaciones nativas. Todo esto se puede hacer en el navegador en el dispositivo del usuario. Por ejemplo, la transmisión de video se puede capturar y convertir sobre la marcha utilizando JavaScript MediaDevices API directamente en el navegador, mira la demostración.

Otro ejemplo era el sitio web Critter Camera (ahora no existe), que conviertía cualquier teléfono inteligente (o computadora) en una cámara de vigilancia con detector de movimiento. Es decir, se puede dejar durante la noche, y el navegador guardará fotos si ocurre algún movimiento en la habitación. No se envía información a Internet, todo se almacena en el almacenamiento local del navegador.

Antiguo sitio web Critter Camera
Antiguo sitio web Critter Camera

Ventajas y Desventajas

Por supuesto, las funciones de grabación de vídeo “desde el navegador” añaden comodidad y amplían la funcionalidad de las aplicaciones web, y es mejor no irritar al usuario con solicitudes de permisos innecesarias.

Esto tiene cierto sentido. Se sabe que las solicitudes demasiado frecuentes pierden eficacia, y el usuario empieza a permitir todo sin leerlo atentamente (el principio funciona de forma similar a la ceguera de los banners). Por lo tanto, no debe haber demasiadas advertencias de seguridad.

Grabación sin Permiso

Por otro lado, si se ignoran las solicitudes de permisos, pueden producirse abusos. Por ejemplo, alguna vez los usuarios se quejaron de que el bot para el reconocimiento de voz Otter.ai grababa las conferencias de Zoom sin el consentimiento de los participantes, mientras que según la ley, para grabar una conversación privada se necesita el consentimiento de todos los participantes.

El bot Otter Assistant se conecta a todas las videoconferencias de Zoom en tu calendario y publica automáticamente transcripciones de texto.

Como se puede entender por los comentarios, la grabación de video de las videoconferencias se produce después de activar la función de reconocimiento de voz automático en uno de los participantes del chat. Después de esto, el habla del resto se reconoce y se guarda automáticamente, incluso sin su consentimiento. Es probable que alguien haya confundido el consentimiento para grabar la conversación con el consentimiento para recibir la transcripcion.

La propia función de “asistente virtual” es muy útil, ya que permite estar presente virtualmente en numerosas conferencias telefónicas, y escanear rápidamente el contenido de texto de las conversaciones, lo que ahorra mucho tiempo.

Sin embargo, el número de estos abusos puede aumentar si no se limitan técnicamente, es decir, si no se requiere explícitamente el permiso del usuario de forma predeterminada. Algunos desarrolladores cometen estos errores no por mala intención, sino simplemente por desconocimiento.

La configuración predeterminada suele ser una especie de compromiso entre comodidad y seguridad. En este caso, parece que la comodidad prevalece.


Entonces, ese es el atributo de captura HTML. Es una forma bastante genial de agregar una mejor experiencia de usuario si sabes que tus usuarios móviles van a tomar una foto, un video o una grabación de voz en el momento de la carga.

5/5 - (1 voto)