title: How to post WebRTC captured photo to server
body: <p>I'm following <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos" rel="nofollow noreferrer">this</a> example to let the user take a photo and send it to Node server. I tried to print the data on client side and it gives a long text. The picture is printed out in an <code>img</code> tag. I tried to use ajax to send that data to the server and parse it into a picture then save it but it doesn't work. The <code>req.body</code> is still empty. Can anyone explain how can I get information in that <code>img</code> tag and post it to the server and if it comes to the server, how does it look like and how to save the picture to a directory in the project? Thanks.</p>
  
  <p><strong>Client-side data</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JFdKu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JFdKu.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML tag</strong></p>
  
  <pre><code>&lt;div class="output"&gt;
      &lt;img id="photo" name="photo" alt="The screen capture will appear in this box."&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>front end js</strong></p>
  
  <pre><code>function takepicture() {
      var context = canvas.getContext('2d');
      if (width &amp;&amp; height) {
          canvas.width = width;
          canvas.height = height;
          context.drawImage(video, 0, 0, width, height);
  
          var data = canvas.toDataURL('image/png');
          photo.setAttribute('src', data);
          alert(data);
          $.ajax({
              url: "/" ,
              data: data,
              type: 'POST',
              success: function (dataR) {
              },
              error: function (xhr, status, error) {
                  console.log('Error: ' + error.message);
              }
          });
      } else {
          clearphoto();
      }
  }
  </code></pre>