Take photo from video tag:
-------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Run webcam into video tag</title>
<link rel="stylesheet" href="">
</head>
<body>
<h5>Playing video and you can take image from it</h5>
<video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>
<button onclick="capture()">Capture</button>
<canvas width="320" height="360" id="PhotoEditS">
<p>
<font color="white">This browser does not support the required features. Please try
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home">Internet Explorer 10</a>,
or a current version of
<a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>,
<a href="http://www.google.com/chrome">Chrome</a>, or
<a href="http://www.apple.com/safari/">Safari</a>.</font>
</p>
</canvas>
<img id="imageTag" src="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// Playing video
const video = document.getElementById('webCamera');
startVideo();
function startVideo(){
var front = false;
video.style.width = document.width + 'px';
video.style.height = document.height + 'px';
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
var constraints = {
audio: false,
video: {
facingMode: (front ? 'user' : 'environment')
}
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
video.srcObject = stream;
});
}
function capture(){
// Take the picture now
var pcanvas = document.getElementById('PhotoEditS');
pcanvas.width = video.videoWidth;
pcanvas.height = video.videoHeight;
pcanvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
var canvas = $('#PhotoEditS')[0];
var base64img = canvas.toDataURL("image/png");
$('#imageTag').attr('src', base64img);
}
</script>
</body>
</html>
</body>
</html>
-------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Run webcam into video tag</title>
<link rel="stylesheet" href="">
</head>
<body>
<h5>Playing video and you can take image from it</h5>
<video width="320" id="webCamera" autoplay muted playsinline class="handsome" type='video/mp4'></video>
<button onclick="capture()">Capture</button>
<canvas width="320" height="360" id="PhotoEditS">
<p>
<font color="white">This browser does not support the required features. Please try
<a href="http://windows.microsoft.com/en-us/internet-explorer/products/ie/home">Internet Explorer 10</a>,
or a current version of
<a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a>,
<a href="http://www.google.com/chrome">Chrome</a>, or
<a href="http://www.apple.com/safari/">Safari</a>.</font>
</p>
</canvas>
<img id="imageTag" src="" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// Playing video
const video = document.getElementById('webCamera');
startVideo();
function startVideo(){
var front = false;
video.style.width = document.width + 'px';
video.style.height = document.height + 'px';
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '');
var constraints = {
audio: false,
video: {
facingMode: (front ? 'user' : 'environment')
}
}
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
video.srcObject = stream;
});
}
function capture(){
// Take the picture now
var pcanvas = document.getElementById('PhotoEditS');
pcanvas.width = video.videoWidth;
pcanvas.height = video.videoHeight;
pcanvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
var canvas = $('#PhotoEditS')[0];
var base64img = canvas.toDataURL("image/png");
$('#imageTag').attr('src', base64img);
}
</script>
</body>
</html>
</body>
</html>
