I have a functional code where I can take a photo from the PC by pulling the file from localhost, you can try it to see its functionality, the problem is when I pass the code to my cell phone and it does not work, I do not know if I should download some plugin or compile it somewhere so it can be compatible with android devices
(function () {
var video = document.getElementById('video'),
canvas = document.getElementById ('canvas'),
context = canvas.getContext ('2d'),
photo = document.getElementById('photo'),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true,
audio: false
}, function (stream){
video.src = vendorUrl.createObjectURL(stream);
video.play();
//
}, function(error){
//An error occured
//error.code
});
document.getElementById('capture').addEventListener('click', function(){
context.drawImage(video, 0, 0, 400, 300);
photo.setAttribute('src', canvas.toDataURL('image/png'));
});
})();.booth{
width:400px;
background-color:#ccc;
border:10px solid #ddd;
margin:0 auto;
}
.booth-capture-button{
display: block;
margin: 10px 0;
padding: 10px 20px;
background-color: blue;
color: #fff;
text-align: center;
text-decoration: none;
}
#canvas {
display: none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
<a href="#" id="capture" class="booth-capture-button">Tomar foto</a>
<canvas id="canvas" width="400" height="300"></canvas>
<img id='photo' src="http://placekitten.com/g/400/300" alt="Foto tuya">
</div>
<script src="js/photo.js"></script>
</body>
</html>