UPDATE:
This is the entire code, which I pretty much copied and pasted.
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src=".js"></script>
<script language="JavaScript" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<script>
Webcam.set({
width: 320,
height: 240,
dest_width: 640,
dest_height: 480,
image_format: 'jpeg',
jpeg_quality: 90,
force_flash: false
});
</script>
<div id="web_camera" style="width:320px; height:240px;"></div>
<div id="cam_result"></div>
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
document.addEventListener("DOMContentLoaded", function(event) {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#web_camera' );
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('cam_results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
Webcam.upload( data_uri, 'upload.php', function(code, text) {
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
});
} );
}
});
</script>
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
</body>
I'm using this link
/
This one looks a lot better but may be the same thing
/
What I'm concerned about is the data_uri, also the url upload
So the webcam works, shows my face, whatever, but I push this
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
and nothing happens. I see the little grey box at the bottom left saying javascript:void(take_snapshot()) I'm wondering if I'm supposed to put a parameter...
There can be several problems, I am using domain mapping and the folder may be pointed incorrectly or it could be a file permission problem, I did chown with www-data
This is the upload.php as suggested or rather given by the first link
<?php
// be aware of file / directory permissions on your server
move_uploaded_file($_FILES['webcam']['tmp_name'], '/tabdater/uploads/webcam'.md5(time()).rand(383,1000).'.jpg');
?>
I'd appreciate any help.
UPDATE:
This is the entire code, which I pretty much copied and pasted.
<!DOCTYPE HTML>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" type="text/javascript"></script>
<style>
</style>
</head>
<body>
<script>
Webcam.set({
width: 320,
height: 240,
dest_width: 640,
dest_height: 480,
image_format: 'jpeg',
jpeg_quality: 90,
force_flash: false
});
</script>
<div id="web_camera" style="width:320px; height:240px;"></div>
<div id="cam_result"></div>
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
document.addEventListener("DOMContentLoaded", function(event) {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#web_camera' );
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('cam_results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
Webcam.upload( data_uri, 'upload.php', function(code, text) {
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
});
} );
}
});
</script>
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
</body>
I'm using this link
http://mycodingtricks.com/javascript/webcam-api/
This one looks a lot better but may be the same thing
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
What I'm concerned about is the data_uri, also the url upload
So the webcam works, shows my face, whatever, but I push this
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
and nothing happens. I see the little grey box at the bottom left saying javascript:void(take_snapshot()) I'm wondering if I'm supposed to put a parameter...
There can be several problems, I am using domain mapping and the folder may be pointed incorrectly or it could be a file permission problem, I did chown with www-data
This is the upload.php as suggested or rather given by the first link
<?php
// be aware of file / directory permissions on your server
move_uploaded_file($_FILES['webcam']['tmp_name'], '/tabdater/uploads/webcam'.md5(time()).rand(383,1000).'.jpg');
?>
I'd appreciate any help.
Share Improve this question edited Feb 3, 2015 at 3:17 moose asked Feb 2, 2015 at 20:11 moosemoose 631 gold badge1 silver badge7 bronze badges 9- 1 Have you checked the console for errors and are you running this on a server or running it locally? – NewToJS Commented Feb 2, 2015 at 21:03
- I don't know what you mean by "... the console..." and I am running it on a server, the webpage is live, testing it on a tablet. – moose Commented Feb 2, 2015 at 21:34
- can you post more of the code you're using so i can look further into this issue or post a link to your testing page, thanks. – NewToJS Commented Feb 2, 2015 at 21:45
- I posted the whole code of the page. I'm having a problem with the upload linking eg. actually working. Thanks for your time. The upload.php file is shown above very basic / un-modified. – moose Commented Feb 3, 2015 at 3:19
- Can you tell me what is/isn't working? When the page loads can you see the webcam stream? If you don't see the webcam stream then you may find this error in the console "Uncaught ReferenceError: Webcam is not defined" and this would be due to not having webcams.js uploaded or in the correct directory. If you have this online it would be much easier to give me a link and i can make sure you have all the required files since this isn't your project, i have a copy of this and all seems to be working for me. – NewToJS Commented Feb 3, 2015 at 19:14
2 Answers
Reset to default 13This should be a great starting point for you. I hope this helps you.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cam Snap</title>
<script type="text/javascript" src="webcam.js"></script>
<script language="JavaScript">
function take_snapshot() {
Webcam.snap(function(data_uri) {
document.getElementById('results').innerHTML = '<img id="base64image" src="'+data_uri+'"/><button onclick="SaveSnap();">Save Snap</button>';
});
}
function ShowCam(){
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#my_camera');
}
function SaveSnap(){
document.getElementById("loading").innerHTML="Saving, please wait...";
var file = document.getElementById("base64image").src;
var formdata = new FormData();
formdata.append("base64image", file);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) { uploadcomplete(event);}, false);
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function uploadcomplete(event){
document.getElementById("loading").innerHTML="";
var image_return=event.target.responseText;
var showup=document.getElementById("uploaded").src=image_return;
}
window.onload= ShowCam;
</script>
<style type="text/css">
.container{display:inline-block;width:320px;}
#Cam{background:rgb(255,255,215);}#Prev{background:rgb(255,255,155);}#Saved{background:rgb(255,255,55);}
</style>
</head>
<body>
<div class="container" id="Cam"><b>Webcam Preview...</b>
<div id="my_camera"></div><form><input type="button" value="Snap It" onClick="take_snapshot()"></form>
</div>
<div class="container" id="Prev">
<b>Snap Preview...</b><div id="results"></div>
</div>
<div class="container" id="Saved">
<b>Saved</b><span id="loading"></span><img id="uploaded" src=""/>
</div>
</body>
</html>
PHP (Must have the uploads directory) -
<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['base64image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>
Credit to This Blog for the php!
Its not working because you had included the take_snapshot() function in document.addEventListener("DOMContentLoaded", function(event) { function.
Please follow the tutorial...
You code should look like:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Webcam Demo - <MyCodingTricks/></title>
<link href="http://mycodingtricks.com/demo/style.css" rel="stylesheet"/>
</head>
<body>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- A button for taking snaps -->
<form>
<input type=button class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">
</form>
<div id="results" class="well">Your captured image will appear here...</div>
<script src="http://mycodingtricks.com/demo/script.js"></script>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
Webcam.upload( data_uri, 'upload.php', function(code, text) {
// Upload complete!
// 'code' will be the HTTP response code from the server, e.g. 200
// 'text' will be the raw response content
});
} );
}
</script>
</body>
</html>