Canvas Image upload to server HTML + JS + PHP

I can show you the way I implemented with HTML5 basic video capture an image upload application, without the need to browse for images (very important for systems that do not want the user to access the system files while using a browser - kiosk/app mode).


We need a start button because we do not want the camera to stay open all the time, only triggered by user, a snapshot button( snap a photo from the video source) and a stop button for the video.
In the end we want this photo sent to the server, parsing the image data (encoded in base64), decode it in php and save it on the server.


HTML:
<video  id="video" width="200" height="200"></video>
<button  id="snap">Take snapshot</button>
<button id="stop-video">Stop camera</button>
<button id="start-video">Start camera</button>
<canvas  id="canvas" class="canvasis" width="600" height="400"></canvas>
<button id="submit" > Submit </button>

JS:

var video = document.getElementById('video');
// Get access to the camera!
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  var front = false;
  var mediaConfig = { video: { facingMode: (front? "user" : "environment") } };
  // Not adding `{ audio: true }` since we only want video now
  navigator.mediaDevices.getUserMedia( mediaConfig ).then(function(stream) {
      var track = stream.getTracks()[0]; 
      track.stop();
  });
  }

document.getElementById("start-video").addEventListener("click", function() {
  var video = document.getElementById('video');
  // We need to check if we can access the camera:
  if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  var front = false;
  var mediaConfig = { video: { facingMode: (front? "user" : "environment") } };
    // Not adding `{ audio: true }` since we only want video now
      navigator.mediaDevices.getUserMedia( mediaConfig ).then(function(stream) {
          video.srcObject = stream;
          video.play();

          document.getElementById("stop-video").addEventListener("click", function() {
          var track = stream.getTracks()[0]; 
          track.stop();
          });
      });
   }
});

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
     context.drawImage(video, 0, 0, 600, 400);
     var inpHidden = document.getElementById("canvas");
     inpHidden.value = canvas.toDataURL("image/jpeg");

     var snap = inpHidden.value;
console.log(inpHidden.value);

     //Now we can see the base64 data for the snap that we took from the video in the console (Press F12 and select the console tab)

});

PHP:

---- check submit ----

---- connection to db ----

if($_POST['snap'] != "") {
$folderPath ="images/";
$img = $_POST['snap']; // Your data'data:image/png;base64,AAAFBfj42Pj4';
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img); // Many people get this wrong - if the source for the base64 encoded image is a canvas you need to spaces with  "+"  otherwise it won't decode the correct way.
$data = base64_decode($img);
$snap= $folderPath . uniqid() . '.png';
file_put_contents($snap, $data);
}
else
{
$snap="";

}

It's not perfect, it needs validation, but the hard part is over :-)