< html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Demostración de captura de cámara < style > #camera {
width: 100%;
max-width: 500px;
}
#photo {
display: none;
} < body > < h1 > Acceder a la cámara y capturar foto < video id = "camera" autoplay > < button id = "capture-btn" > Capturar foto < canvas id = "photo" > < script> const video = document . getElementById ( 'cámara' );
const canvas = document . getElementById ( 'foto' );
const captureBtn = document . getElementById ( 'capture-btn' );
const context = canvas. getContext ( '2d' ); navigator. mediaDevices . getUserMedia ({ video : true })
. then ( ( stream ) => {
video. srcObject = stream;
})
. catch ( ( error ) => {
console . error ( "Error al acceder a la cámara: " , error);
}); captureBtn. addEventListener ( 'clic' , () => {
canvas. width = video. videoWidth ;
canvas. height = video. videoHeight ;
context. drawImage (video, 0 , 0 , canvas. width , canvas. height );
});