- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I did a demo to use camera form mobile, app working fine if html file is locate inside intel XDK file when i compile the html, but if i want call camera from a php file in web, with the same code is not working ,how can i call camera form a php file up in the web? this is mi code that work local when i compile, but if i upload this code to my server, not working, just give me a little orientation please, thanks
<!DOCTYPE html> <html> <head> <title>Capture Photo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"rel="stylesheet" type="text/css"> <link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css"rel="stylesheet" type="text/css"> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for device API libraries to load // document.addEventListener("deviceready",onDeviceReady,false); // device APIs are available // function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } // Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64-encoded image data // console.log(imageData); // Get image handle // var smallImage = document.getElementById('smallImage'); // Unhide image elements // smallImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // smallImage.src = "data:image/jpeg;base64," + imageData; document.getElementById("txtTabla").value = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { // Uncomment to view the image file URI // console.log(imageURI); // Get image handle // var largeImage = document.getElementById('largeImage'); // Unhide image elements // largeImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // largeImage.src = imageURI; } // A button will call this function // function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // A button will call this function // function capturePhotoEdit() { // Take picture using device camera, allow edit, and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } // A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <img id="smallImage" src="" class="img-responsive" /> <img style="display:none;" id="largeImage" src="" class="img-responsive"/> <a class="btn btn-block btn-lg btn-primary" onclick="capturePhoto();"><i class="fa fa-camera fa-fw fa-lg"></i>Tomar Evidencia </a> <form class="form-horizontal" action="http://www.madraccoonstudio.com/esgari/gestion/subir.php" method="post" enctype="multipart/form-data"> <fieldset> <!-- Form Name --> <legend>Enviar evidencia</legend> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="estatus">Estatus</label> <div class="col-md-4"> <select id="estatus" name="estatus" class="form-control"> <option value="1">Option one</option> <option value="2">Option two</option> </select> </div> </div> <input name="txtTabla" type="text" id="txtTabla" value=""> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Subir</button> </div> </div> </fieldset> </form> </body> </html>
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Sorry, but this is not the right forum to use for working out issues associated with hosted web apps. I recommend you use StackOverflow.
BTW -- there is no "deviceready" in a web app, only in a Cordova app. Also, your app is not "compiled" it is "packaged" inside a webview. Unzip the APK file and you'll see. The XDK builds a standard Cordova app, so searching the web for problems associated with Cordova apps may also help. I recommend that you do not use Cordova as a way to prototype hosted web apps, they are quite different environments.
p.s. There is no such thing as "navigator.camera.getPicture()" in a web app. You are relying on a Cordova plugin, which can only exist and be used in a Cordova webview. This is a fundamental difference between the Cordova webview environment and a hosted web app environment.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page