1

Here goes my first post here, please be kind with your comments as I need detailed guidance here.

Background, second-year college student, 1-year python trained. Only started learning javascript two weeks ago. No prior experience in coding before college.

I have created a webpage that first streams the webcam, then at the click of a button, takes a snapshot and displays it on the webpage through the usage of a canvas.

What I want to do: send that canvas image to a server using a separate button.

What I have done:

  1. Used navigator.getUserMedia() for webcam streaming.

  2. Converted the canvas image into base64 using canvas.toDataURL().

  3. Tried googling online to find tutorials to do "POST" requests but I am unsure how to work around it, in short, I do not understand how to write a code that sends data to a server.

  4. Tried to use jQuery, but still I am really quite confused over here.


$(document).ready(function(){
    $("#testbutton").click(function(){
        $.get("http://localhost:8080",
        url,
        function(){
            alert("OK");
        });
    });
});
  • Do I need to convert to base64 before sending?
  • How do I send?
  • I read on MDN that navigator.getUserMedia is deprecated, how do I use MediaDevices.getUserMedia()?

Some of my code snippets.

if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }

Tutorials followed:

https://davidwalsh.name/browser-camera

Pugazh
  • 9,453
  • 5
  • 33
  • 54
Ming Jin
  • 331
  • 1
  • 5
  • 17

1 Answers1

2

You need to use AJAX to send the data to the server.

Something like this:

jQuery.ajax({
  method: "POST",
  url: "save.php",
  data: { image: canvasToDataURLString }
})

Then you will need some serverside code to save the image. Here is a PHP version modified from this answer: How to save a PNG image server-side, from a base64 data string

$data = $_POST['image'];

list($type, $data) = explode(';', $data);
list(, $data)      = explode(',', $data);
$data = base64_decode($data);

file_put_contents('image.png', $data);

Now you should have an image called 'image.png' next to your php script.

Community
  • 1
  • 1
Emil S. Jørgensen
  • 6,216
  • 1
  • 15
  • 28
  • For the server part, I am using simplehttpserver module by python, how do I integrate that part of the code? Here is my code snippet. `from SimpleHTTPServer import SimpleHTTPRequestHandler from SocketServer import TCPServer` – Ming Jin Jul 04 '16 at 08:49
  • under the url value, say I am using localhost, do I simply replace the "save.php" with "localhost:port"? – Ming Jin Jul 04 '16 at 09:22
  • `url` finds the intended target relative to the executing script. If the script to save was next to the executing script, then simply insert the script name. If you need to go into a subfolder simply write `foldername/scriptname`. If you need to go up a level, use `../scriptname`. – Emil S. Jørgensen Jul 06 '16 at 13:20
  • How do I use php? I am trying to follow online tutorials but they are quite unclear? I couldnt find a one time installer, is it supposed to be installed into the same folder as my simplehttpserver? I wrote a small script using python's simple httpserver. Really lost right now.. – Ming Jin Jul 08 '16 at 02:55
  • Take a look at the accepted answer [here](http://stackoverflow.com/questions/336866/how-to-implement-a-minimal-server-for-ajax-in-python#338519). It is a fully rigged AJAX system on simplehttpserver. – Emil S. Jørgensen Jul 08 '16 at 07:06