Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             





Publish perfectly-optimized content in 1-click



 
 
 

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

 
 
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>

. 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); });

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

DEMO 
Descarga el ejemplo 



También te puede interesar


Cómo hacer llamadas Ajax con XMLHTTPRequest

Cómo hacer Drag and Drop en HTML 5 y JavaScript API

Cómo copiar texto al portapapeles usando html, css y javascript

Cómo crear una presentación de diapositivas receptiva con CSS y JavaScript

Cómo dibujar en el navegador con JavaScript


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Japanese ritual of tranquility and... slim figure!