I'm trying to get my Canvas to position myself on the label video
at exactly the same size when taking a photo. Or if there is a way to make the photo take and give you the preview without a much better canvas. I pass my code for you to observe. Thank you very much in advance.
var fot;
//Funcion para lanzar la camara, Funcionando.
function activateCamera() {
var video = document.querySelector("#camaraOn");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMEdia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
alert("La camara No esta funcionando Permita el acceso")
}
canvas= document.querySelector("#fotoTomada");
canvas.style.visibility="hidden";
}
//Funcion para capturar el streaming
function tomarFoto() {
var video = document.querySelector("#camaraOn");
canvas= document.querySelector("#fotoTomada");
canvas.width=1080;
canvas.height=650;
canvas.getContext("2d").drawImage(video,0,0,1080,650);
fot= canvas.toDataURL("image/png");
video.style.visibility="hidden";
canvas.style.visibility="visible";
}
<!DOCTYPE html>
<html>
<head>
<title> SnapDCU </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<header>
<nav>
<div class="barraMenu">
<ul class="menu">
<li class="current"> <a href="#"> Inicio </a> </li>
<li><a href="#">Subir Foto Externa </a> </li>
</ul>
</div>
</nav>
</header>
<body onload="activateCamera()">
<style>
.canvasCamara{
position: relative;
}
.canvasCamara>.botonesAccion{
background: url('css/img/shotpng.png') bottom center no-repeat;
height: 128px;
left: 50%;
margin: -64px 0 0 -64px;
position: absolute;
top: 85%;
border: 15px solid transparent;
width: 128px;
z-index: 1;
}
#fotoTomada{
visibility: hidden;
}
</style>
<div class="container">
<div class="canvasCamara">
<video autoplay="true" width="1080" id="camaraOn" height="650"> </video>
<button class="botonesAccion" onclick="tomarFoto()" type="button" id="btnTake" name="btnTake"></button>
</div>
<canvas id="fotoTomada" width="1" height="1"></canvas>
</div>
<script src="js/script.js"> </script>
</body>
</html>
There is nothing wrong with using canvas to display an image; You can still do it the classic way via
img
. When the photo is taken you must get the coordinates ofvideo
and then create thecanvas
orimg
. Then, you must make the element absolute and put a respectiveleft
ytop
to the coordinates of thevideo
.For example:
The instruction
videoStream.getTracks()[0].stop();
stops the use of the camera after taking the photo. If you don't want this behavior, don't put it.Demos available .