TODO SOBRE INFORMÁTICA Y TECNOLOGÍA




Cómo capturar fotos de la cámara usando Javascript




Estos son los diversos pasos a seguir para escribir un código que le permita capturar fotos usando solo html y javascript
. Use el método getUserMedia() para obtener acceso a la cámara web del usuario.
. Muestra la transmisión de la cámara en un elemento <video> en la página.
. Capture un cuadro de video en un <canvas>; elemento.
. Convierta el <lienzo>en una imagen.

HTML y JavaScript

<button id="start-camera">Start Camera>/button<
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>

<button id="start-camera">Start Camera>/button<
<video id="video" width="320" height="240" autoplay></video>
<button id="click-photo">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>

. el botón de inicio de la cámara solicita al usuario el acceso a la cámara.
. video muestra la transmisión de la cámara.
. el botón de hacer clic en la foto captura el cuadro de video en reproducción en #canvas y obtiene la cadena de URL de datos de la imagen.

let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");


camera_button.addEventListener('click', async function() {
   	let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
	video.srcObject = stream;
});


click_button.addEventListener('click', function() {
   	canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
   	let image_data_url = canvas.toDataURL('image/jpeg');


   	// data url of the image
   	console.log(image_data_url);
});

let camera_button = document.querySelector("#start-camera");
let video = document.querySelector("#video");
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
</br>
camera_button.addEventListener('click', async function() {
   	let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
	video.srcObject = stream;
});
</br>
click_button.addEventListener('click', function() {
   	canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
   	let image_data_url = canvas.toDataURL('image/jpeg');
</br>
   	// data url of the image
   	console.log(image_data_url);
});

La imagen del lienzo se puede cargar en un servidor como una URL de datos o como un archivo.

DEMO
Descarga el ejemplo

Descargar software

Cómo capturar fotos de la cámara usando Javascript

HTML y JavaScript