Dear Guru,
I need your help. I have the below js script that is working perfect well on Windows but when i move it to linux server it is not working. The camera is not coming on.
<?php
var_dump($_POST);
?>
<!doctype html>
<head>
<style>
/* CSS comes here */
#video {
border: 1px solid black;
width: 320px;
height: 240px;
}
#photo {
border: 1px solid black;
width: 320px;
height: 240px;
}
#canvas {
display: none;
}
.camera {
width: 340px;
display: inline-block;
}
.output {
width: 340px;
display: inline-block;
}
#startbutton {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
bottom: 36px;
padding: 5px;
background-color: #6a67ce;
border: 1px solid rgba(255, 255, 255, 0.7);
font-size: 14px;
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
.contentarea {
font-size: 16px;
font-family: Arial;
text-align: center;
}
</style>
<title>My Favorite Sport</title>
</head>
<body>
<form method="POST" action="do_upload.php">
<div class="contentarea">
<h1>
Using Javascript to capture Photo
</h1>
<div class="camera">
<video id="video">Video stream not available.</video>
</div>
<div>
<!--button id="startbutton">Take photo</button-->
<input type=button value="Take Snapshot" onClick="take_snapshot()" id="startbutton">
<input type="hidden" name="image" class="image-tag" id="image-tag">
</div>
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
<input type="submit" name="Submit" value="submit" />
</div>
</div>
</form>
<script>
/* JS comes here */
(function () {
var shutter = new Audio();
shutter.autoplay = false;
shutter.src = navigator.userAgent.match(/Firefox/) ? 'shutter.ogg' : 'shutter.mp3';
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function (stream) {
video.srcObject = stream;
video.play();
})
.catch(function (err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function (ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function (ev) {
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
// play sound effect
try {
shutter.currentTime = 0;
} catch (e) {
;
} // fails in IE
shutter.play();
// take snapshot and get image data
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
$.ajax({
type: "POST",
url: "do_upload.php",
data: {
imgBase64: data,
imgName: "webcam.png"
}
}).done(function (o) {
console.log('saved');
});
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
})();
</script>
</body>
</html>
Anything I may be missing