title: How to send data to a server in javascript
body: <p>Here goes my first post here, please be kind with your comments as I need detailed guidance here.</p>
  
  <p>Background, second-year college student, 1-year python trained. Only started learning javascript two weeks ago. No prior experience in coding before college.</p>
  
  <p>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.</p>
  
  <p><strong>What I want to do:</strong>
  send that canvas image to a server using a separate button.</p>
  
  <p><strong>What I <em>have</em> done:</strong></p>
  
  <ol>
  <li><p>Used navigator.getUserMedia() for webcam streaming.</p></li>
  <li><p>Converted the canvas image into base64 using canvas.toDataURL().</p></li>
  <li><p>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.</p></li>
  <li>Tried to use jQuery, but still I am really quite confused over here.</li>
  </ol>
  
  <p><br></p>
  
  <pre><code>$(document).ready(function(){
      $("#testbutton").click(function(){
          $.get("http://localhost:8080",
          url,
          function(){
              alert("OK");
          });
      });
  });
  </code></pre>
  
  <ul>
  <li>Do I need to convert to base64 before sending? </li>
  <li>How do I send? </li>
  <li>I read
  on MDN that navigator.getUserMedia is deprecated, how do I use
  MediaDevices.getUserMedia()?</li>
  </ul>
  
  <p>Some of my code snippets.</p>
  
  <pre><code>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);
      }
  </code></pre>
  
  <p>Tutorials followed:</p>
  
  <p><a href="https://davidwalsh.name/browser-camera" rel="nofollow">https://davidwalsh.name/browser-camera</a></p>