Hello PHP community.
Please excuse me if this is a dumb question.
I’ve followed a youtube guide to create a page that will take a pic from my web cam, and put it into an image on my webpage.
I would also Like to save a few details from a form, such as name, ect. And then post the details to a backend that will save the picture taken by the webcam to a folder on my server, and then record the form fields into a mysql database. I’m sure I can easily find a tutorial to teach me how to save a form to the mysql database, but I’ve never heard of anyone saving the src of an object before. I last did server side scripting back in 2004 with ASP classic. So its been a while since I’ve done this sort of things. I thought I’d have a look at PHP to do this little project to clear the cobwebs out of my head.
Here’s my page code so far.
index.html
[code]
<link rel="stylesheet" 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">Take Photo</a>
<canvas id="canvas" width="400" height="300"></canvas>
<img id="photo" src="images/clear.gif" width="400" height="300">
</div>
<script src="js/photo.js"></script>
</body>
main.css
[code].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:cornflowerblue;
color:#fff;
text-align: center;
text-decoration: none;
}
#canvas {
display: none;
}[/code]
photo.js
[code](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'));
});
})();[/code]
I can hardly understand this code, much has changed in 13 years. But it works just fine in google chrome and firefox. What I’m interesting in learning, is how I can submit my object along with my form data and save it to a folder on my server with PHP.
PS i’m using XAMPP 5.6.30 running on windows 7.
Thanks in advance.
All comments and suggestions are very welcome, thank you.