<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div onclick="draw()">sync video</div>
<video id="mvVideo" width="400" height="300" autoplay></video>
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
<img id="myImg" />
<script type="text/javascript">
var mvVideo = document.getElementById('mvVideo');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var myImg = document.getElementById('myImg');
$(function(){
navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
}).then(function (mediaStream) {
mvVideo.srcObject = mediaStream;
}).catch(function (error) {});
mvVideo.addEventListener( 'play', function(){
draw();
}, 0);
});
function draw()
{
ctx.drawImage(mvVideo, 0, 0, 400, 300);
const dataURL = canvas.toDataURL();
myImg.src = dataURL;
//setTimeout( draw, 10 );
}
</script>
</body>
</html>
