1

Quiero incluir la opción de enviar una foto tomada desde un dispositivo en mi web y que posteriormente esta imagen se guarde como objeto canvas para ser tratada.

Para hacer las pruebas, he puesto los archivos con apache, para que se conpartan con mi télefono móvil y poder hacer pruebas. Accedo desde el navegador de mi móvil a: IP_del_pc_con_apache/pruebas/mipagina.html

Todo parece funcionar correctamente, pero no me aparece el aviso de "permitir" acceso a la cámara, por lo que nada funciona. No sé si estoy haciendo algo mal o el código que estoy utilizando para acceder a la cámara y que posteriormente se hagan fotos no funciona.

Mi código (pagina.html):

   
	// Grab elements, create settings, etc.
	var video = document.getElementById('video');

	// Get access to the camera!
	if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
		// Not adding `{ audio: true }` since we only want video now
		navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
			video.src = window.URL.createObjectURL(stream);
			video.play();
		});
	}
		
	// Elements for taking the snapshot
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var video = document.getElementById('video');

	// Trigger photo take
	document.getElementById("snap").addEventListener("click", function() {
		context.drawImage(video, 0, 0, 640, 480);
	});
<!DOCTYPE html>
<html>
  <head>
    <title>Cámara Web con HTML5</title>
    <meta charset="UTF-8">

  </head>
  <body>
      <!--
	Ideally these elements aren't created until it's confirmed that the 
	client supports video/camera, but for the sake of illustrating the 
	elements involved, they are created with markup (not JavaScript)
	-->
	<video id="video" width="640" height="480" autoplay></video>
	<button id="snap">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>
  </body>
</html>

¿Cómo acceso desde mi móvil a la cámara desde el navegador? ¿Es correcto el código? En demos que he visto en otras webs me funciona desde el móvil, pero al hacer la prueba en local, y acceder a la IP de mi pc para visualizar el resultado, no funciona...

2
  • 1
    Todo lo que puedo decir es que funciona perfectamente si se accede desde un PC... lo mismo te falta algún dato para elegir la cámara, ahora que todos los teléfonos vienen con cámara frontal y trasera Commented el 21 nov. 2017 a las 16:27
  • Muchas gracias por tu confirmación! Al menos así descarto que mi código sea erróneo. Mil Gracias! Creo que es problema de mi teléfono móvil, por lo que he leido da fallos si no se accede desde https y en mi caso estaba intentando acceder desde http... A ver si consigo solucionarlo
    – Norak
    Commented el 21 nov. 2017 a las 16:52

1 respuesta 1

1

HTML5 te permite tomar fotos desde un dispositivo movil a través de la etiqueta <input> y poniendo ciertos atributos especificos.

<p>Toma una imagen: <input type="file" accept="image/*" id="capture" capture="camera"> 
<p>Captura audio: <input type="file" accept="audio/*" id="capture" capture="microphone"> 
<p>Toma un video: <input type="file" accept="video/*" id="capture" capture="camcorder"> 

Si el valor del atributo accept es incluido,indicará que tipo de archivo aceptará el servidor, de otra manera aceptara lo que sea.

La presencia del atributo capture indica la forma en que se va a capturar el archivo multimedia directamente desde el entorno del dispositivo.

Aquí puedes ver con que navegadores moviles es compatible: https://caniuse.com/#feat=html-media-capture

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.