Question

157

I'm trying to use a simple webcam capture upload, upload isn't working?

rated 0 times [ 163] [ 6] / answers: 1 / hits: 31911 / 10 Years ago, mon, february 2, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaylynbrynnk

Add To Favorites

Follow

Total Points: 706

Total Questions: 98

Total Answers: 91

Location: Israel

Member since Thu, Jan 7, 2021

3 Years ago

answered 10 Years ago isaacvalentinn · Accepted Answer

This 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!