How to send data to a server in javascript

Question

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

Answer 1

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.