53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
window.addEventListener("load", function(){
|
|
// [1] GET ALL THE HTML ELEMENTS
|
|
var video = document.getElementById("vid-show"),
|
|
canvas = document.getElementById("vid-canvas"),
|
|
take = document.getElementById("vid-take");
|
|
var mediaDevices = navigator.mediaDevices;
|
|
// [2] ASK FOR USER PERMISSION TO ACCESS CAMERA
|
|
// WILL FAIL IF NO CAMERA IS ATTACHED TO COMPUTER
|
|
navigator.mediaDevices.getUserMedia({ video : true })
|
|
.then(function(stream) {
|
|
// [3] SHOW VIDEO STREAM ON VIDEO TAG
|
|
video.srcObject = stream;
|
|
video.play();
|
|
|
|
// [4] WHEN WE CLICK ON "TAKE PHOTO" BUTTON
|
|
take.addEventListener("click", function(){
|
|
// Create snapshot from video
|
|
var draw = document.createElement("canvas");
|
|
draw.width = video.videoWidth;
|
|
draw.height = video.videoHeight;
|
|
var context2D = draw.getContext("2d");
|
|
context2D.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
|
|
// Upload to server
|
|
draw.toBlob(function(blob){
|
|
var data = new FormData();
|
|
data.append('upimage', blob);
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('POST', "lib/camupload.php", true);
|
|
xhr.onload = function(){
|
|
if (xhr.status==403 || xhr.status==404) {
|
|
alert("ERROR LOADING 3-UPLOAD.PHP");
|
|
} else {
|
|
var sp=this.response.split('|');
|
|
if(sp[0]=='ok')
|
|
{
|
|
fn_setImage(sp[1]);
|
|
}
|
|
else
|
|
{
|
|
alert(sp[1]);
|
|
}
|
|
|
|
//alert(this.response);
|
|
}
|
|
};
|
|
xhr.send(data);
|
|
});
|
|
});
|
|
})
|
|
.catch(function(err) {
|
|
document.getElementById("vid-controls").innerHTML = err;
|
|
});
|
|
}); |