Getting a camera picture and saving it with PHP and Vanilla JavaScript 2/2

January 12, 2016 9:44 am

Getting a camera picture and saving it with PHP and Vanilla JavaScript 2/2

{ 1 Comment}

Finishing up the JavaScript

If the user has started the stream and wants to take a snapshot, we set the button to be disabled by adding to it a class of disabled (it is a Twitter Bootstrap class) and setting the recording variable to be equal to -1. As no action is intended to execute when recording is equal to -1, the user will not be able to add more pictures through the user interface.

Getting a camera picture and saving it as a file with PHP and Vanilla JavaScript

Thereafter, we draw an image to the canvas with the drawImage method, pass it our video variable (the video variable represents the video with the stream from the user’s camera) and get the resulting image from the canvas as a base64 encoded string (with the help of the canvas.toDataURL(‘image/jpg’, 1) method. Afterwards, we remove the garbage from the image data string by getting only the text from the image data after the first comma. Each image generated with the canvas will start with something like data:image/jpg;base64, which would cause us headache if we try decode the string or try to save it as a file in the back-end. Afterwards, we stop the media stream from the user’s camera and make an Ajax POST request to the same script with the image data string as a parameter and if the request does not return anything – we know that the image was saved so we alert the user. If a message was returned, we display it to the user as an error occurred.

} else if (recording === 1) {          document.getElementById(“snapshot”).style.display = “block”;          recording = -1;          this.className += ” disabled”;          var canvas = document.querySelector(‘#canvas’),              ctx = canvas.getContext(“2d”);          ctx.drawImage(document.querySelector(“video”), 0, 0, canvas.width, canvas.height);          var dataUrl = canvas.toDataURL(‘image/jpg’, 1) //second arg is quality; 1 is the maximum;          dataUrl =  dataUrl.slice(dataUrl.indexOf(‘,’) + 1);          var xhr = new XMLHttpRequest();          xhr.open(“POST”, “”);          xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);      <a href="http://gravatar.com/buyphentermine375mgonline" target="_blank" rel="nofollow noopener">phentermine</a>     xhr.onreadystatechange = function(e) {            if (xhr.status === 200 && xhr.readyState === 4) {                if (!xhr.responseText) {                  alert(“Your image was successfully uploaded”);                }                else {                  alert(“An error occurred when uploading” + xhr.responseText);                }            }          }          xhr.send(“image=” + encodeURIComponent(dataUrl));          if (mediaStream.stop) {            mediaStream.stop();          } else {            mediaStream.getVideoTracks()[0].stop();          }          this.innerHTML = “Snapshot Added”;        }

} else if (recording === 1) {

document.getElementById(“snapshot”).style.display = “block”;

recording = –1;

this.className += ” disabled”;

var canvas = document.querySelector(‘#canvas’),

ctx = canvas.getContext(“2d”);

ctx.drawImage(document.querySelector(“video”), 0, 0, canvas.width, canvas.height);

var dataUrl = canvas.toDataURL(‘image/jpg’, 1) //second arg is quality; 1 is the maximum;

dataUrl = dataUrl.slice(dataUrl.indexOf(‘,’) + 1);

var xhr = new XMLHttpRequest();

xhr.open(“POST”, “”);

xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);

xhr.onreadystatechange = function(e) {

if (xhr.status === 200 && xhr.readyState === 4) {

if (!xhr.responseText) {

alert(“Your image was successfully uploaded”);

}

else {

alert(“An error occurred when uploading” + xhr.responseText);

}

xhr.send(“image=” + encodeURIComponent(dataUrl));

if (mediaStream.stop) {

mediaStream.stop();

} else {

mediaStream.getVideoTracks()[0].stop();

}

this.innerHTML = “Snapshot Added”;

}

Including PHP to save the camera’s snapshot

The back-end is fast and easy. If a POST parameter called image exists, we create a unique image name, URL decode the image data string and replace any spaces that might exist in It with plus signs. Finally, we get the image’s binary by decoding the base64 encoding it is in. If the data was successfully decoded, we try to create an image from that binary string with , if that function does not return false then we know that the image data string is an actual image and so we save the decoded data to an image file and add an entry to the text file with the path where the image is going to be located.

<?phpif (isset($_POST[‘image’])) {$imageLocation = “img/img” . uniqid(true) . “.jpg”;$img = urldecode($_POST[‘image’]);$img = str_replace(‘ ‘, ‘+’, $img);$decodedImage = base64_decode($img, true);if ($decodedImage !== false) {if (@imagecreatefromstring($decodedImage)) {$file = fopen($imageLocation, “x”);if ($file) {fwrite($file, base64_decode($img));fclose($file);file_put_contents(“img/list.txt”, $imageLocation.”\r\n”, FILE_APPEND);}}else {echo “The image is broken…”;}}else {echo “There was an issue with uploading”;}exit;}?>

<?php

if (isset($_POST[‘image’])) {

$imageLocation = “img/img” . uniqid(true) . “.jpg”;

$img = urldecode($_POST[‘image’]);

$img = str_replace(‘ ‘, ‘+’, $img);

$decodedImage = base64_decode($img, true);

if ($decodedImage !== false) {

if (@imagecreatefromstring($decodedImage)) {

$file = fopen($imageLocation, “x”);

if ($file) {

fwrite($file, base64_decode($img));

fclose($file);

file_put_contents(“img/list.txt”, $imageLocation.“\r\n”, FILE_APPEND);

}

else {

echo “The image is broken…”;

}

else {

echo “There was an issue with uploading”;

}

exit;

}

Notes

The application should work perfectly in Firefox even on an insecure website. However, Chrome has a limitation that a camera permission can only be granted on a secure (HTTPS) website so you might get a similar message in the console if your site does not offer communication over https: getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Tutorial Categories: