Acceso a la cámara a través del navegador

150

Estamos creando un sitio web HTML5 para dispositivos móviles y necesitamos obtener acceso a la cámara a través del navegador web sin ser una aplicación nativa. Estamos teniendo problemas para que esto funcione en iOS. ¿Alguien sabe de una solución para esto?

ios html camera

— Julia
fuente

124

Podrías probar esto:

<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">

pero tiene que ser iOS 6+ para funcionar. Eso te dará un buen diálogo para que elijas tomar una foto o subir una desde tu álbum, es decir

Captura de pantalla

Puede encontrar un ejemplo aquí: capturar datos de cámara / imagen sin PhoneGap

— Xeroxoide
fuente

55

¡Esto también es INCREÍBLE en Android!

— Matt

1

Buena demostración para subir a un servidor. ¿Alguien sabe cómo modificar esto para guardar la imagen en un álbum local en el dispositivo?

— K.Niemczyk

2

El único problema es que, al menos en iphone (ios 7.0.4) al menos en el momento, crea una imagen temporal llamada siempre 'image.jpg'. Entonces, si sube algunas imágenes en la misma forma, se sobrescriben entre sí debido al mismo nombre a menos que haga algo para cambiarles el nombre, ¡tenga cuidado!

— Aleación

@ K.Niemczyk: ¿alguna vez te diste cuenta? Si es así, estaría interesado en la solución. Encontré esto: dev.w3.org/2009/dap/camera (ver ejemplos 6-7 para almacenamiento local)

— lamarant

1

Brillante. Aquí hay un violín para cualquiera que quiera probar este código en su dispositivo.

— Simon East

33

A partir de 2015, ahora solo funciona .

<input type="file">

Esto le pedirá al usuario que cargue cualquier archivo. En iOS 8.x puede ser un video de cámara, una foto de cámara o una foto / video de la Biblioteca de fotos.

<input type="file" accept="image/*">

Esto es lo anterior, pero limita las cargas a fotos solo desde la cámara o biblioteca, no videos.

— Simon East
fuente

1

¿Hay alguna forma de restringir a los usuarios la elección de un archivo de la biblioteca de fotos? Quiero aceptar solo una imagen recién tomada.

— Daryl

@Daryl no está en iOS. Android admite el captureatributo que hace exactamente eso. Vea la sintaxis correcta para la captura de medios HTML

— Octavian Naicu

¿Debo cerrar esta ventana emergente Tomar foto o Video y Biblioteca de fotos después de un tiempo en que el usuario no haga clic en ella?

— Pritish

parece que las funciones de video ya no existen?

— Martian2049

25

En iOS6, Apple lo admite a través de la <input type="file">etiqueta. No pude encontrar un enlace útil en la documentación del desarrollador de Apple, pero hay un ejemplo aquí .

Parece que las superposiciones y la funcionalidad más avanzada aún no está disponible, pero esto debería funcionar para muchos casos de uso.

EDITAR: El w3c tiene una especificación que iOS6 Safari parece implementar un subconjunto de. El captureatributo falta notablemente.

— usuario295691
fuente

10

Creo que este está funcionando. Grabar un video o audio;

<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

o (nuevo método)

<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
  function update(stream) {
    document.querySelector('video').src = stream.url;
  }
</script>

Si no es así, probablemente funcionará en ios6, se pueden encontrar más detalles en get media de usuario

— siniradam
fuente

4

La aplicación Picup es una forma de tomar fotos de una página HTML5 y subirlas a su servidor. Requiere una programación adicional en el servidor, pero aparte de PhoneGap, no he encontrado otra forma.

— rakensi
fuente

55

En iOS8 ya no necesitas Picup. HTML5 admite <input type = "file" accept = "image / *" id = "capture" capture = "camera">. Verificado en Safari y Chrome.

— rakensi

1

Esta pregunta ya tiene algunos años, pero en ese tiempo se han desarrollado algunas posibilidades adicionales, como acceder a la cámara directamente, mostrar una vista previa y capturar instantáneas (por ejemplo, para el escaneo de códigos QR).

Este Google Developers artículo de proporciona una explicación detallada de todas (?) Las formas de cómo obtener datos de imágenes / cámaras en una aplicación web, desde "trabajar en todas partes" (incluso en navegadores de escritorio) hasta "trabajar solo en aplicaciones modernas -fecha dispositivos móviles con cámara ". Junto con muchos consejos útiles.

Métodos explicados:

Solicitar una URL
Entrada de archivo (cubierta por la mayoría de las otras publicaciones aquí)
Arrastrar y soltar (útil para navegadores de escritorio)
Pegar desde el portapapeles
Acceda a la cámara de forma interactiva (es necesario si la aplicación necesita proporcionar comentarios instantáneos sobre lo que "ve", como los códigos QR)

— Christoph
fuente