pag2.html

<html>
<head>
<script>
//'use strict';

const constraints = {
  audio: false,
  video: {
    width: 600, height: 300
  }
};


function init2()
{
console.log("Init...");
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById("snap");
const errorMsgElement = document.getElementById('errorMsg');

// Draw image
var context = canvas.getContext('2d');
snap.addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
});
}


// Access webcam
async function init() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    document.getElementById('errorMsg').innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  }
}

// Success
function handleSuccess(stream) {
  //window.stream = stream;
  video.srcObject = stream;
console.log("exito");
}

function fin()
{
	const video = document.getElementById('video');
	video.pause();
	console.log("pausando..");
}


</script>
</head>
<body onload="init2();">

<button id="boton-start" onclick="init()">INICIAR</button>
<button id="boton-end" onclick="fin()">FINALIZAR</button>

<!-- Stream video via webcam -->
<div class="video-wrap">
    <video id="video" playsinline autoplay></video>
</div>

<!-- Trigger canvas web API -->
<div class="controller">
    <button id="snap">Capture</button>
</div>

<!-- Webcam video snapshot -->
<canvas id="canvas" width="640" height="480"></canvas>
<span id="errorMsg"></span>
</body>
</html>