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

Improve this question
2
  • 2
    You probably want to send an AJAX request Commented Jul 4, 2016 at 7:47
  • See the ajax example here api.jquery.com/jquery.ajax Commented Jul 4, 2016 at 7:49

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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
under the url value, say I am using localhost, do I simply replace the "save.php" with "localhost:port"?
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.
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..
Take a look at the accepted answer here. It is a fully rigged AJAX system on simplehttpserver.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.