Solved

HTML & PHP Camera Capture

Posted on 2014-11-26
7
471 Views
Last Modified: 2015-01-02
I have a page that im designing to be used on smartphones. I have added an input to a html form to capture a image from the camera. When clicked on the upload file button it asks take photo or upload from gallery which is spot on. If you select from gallery it works fine and the image is uploaded to the webserver, but if the camera is selected nothing comes up. Is there a different line of code required to determine where the image is coming from?
0
Comment
Question by:JakeD14
  • 3
  • 2
7 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40469500
<input type="file" accept="image/*" capture="camera" />

please provide your code so we can troubleshoot
0
 

Author Comment

by:JakeD14
ID: 40469676
Capture Page
<form name="myForm" method="POST" enctype="multipart/form-data" action="section1.php">
<label class="filebutton">Take/Get Photo<span><input type="file" capture="camera" accept="image/*" name="fileToUpload" id="fileToUpload"></span></label>
</form>

Open in new window


Processing Page
$file = $_FILES['fileToUpload']['name'];

	<<SQL CONNECT SCRIPT>>
	<<QUERY TO GET NEW IMAGE NAME>>
		
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
echo $target_file;
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
//if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        #echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        #echo "File is not an image.";
        $uploadOk = 0;
    }
//}
// Check if file already exists
if (file_exists($target_file)) {
    #echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    #echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    #echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    #echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
	$newTarget = "uploads/".$newMax.".".$imageFileType;
    if(move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $newTarget)) {
       # echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
		<<QUERY TO ADD FILE DETAILS TO DATABASE>>
    } else {
        #echo "Sorry, there was an error uploading your file.";
    }
}

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40469839
what device/browser are you using?

this will only work in

Android 3.0 browser - one of the first implementations
Chrome for Android (0.16)
Firefox Mobile 10.0
iOS6 Safari and Chrome (partial support)
0
 

Author Comment

by:JakeD14
ID: 40469897
Yeah i was using it on a new iPad Air
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40470603
this is working for me. the only problem was that the maximum file size was set too small, so the captured photos were not uploading. So I think if you make that change you should be good to go.

Here is my working example:
http://candpgeneration.com/EE/camera-capture.php

view the uploaded file:
http://candpgeneration.com/EE/uploads/image.jpg
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now