Software Archive
Read-only legacy content
Announcements
Welcome to the Intel Community. If you get an answer you like, please mark it as an Accepted Solution to help others. Thank you!
17065 Discussions

Accessing camera from web

israel_p_
Beginner
83 Views

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>

 

0 Kudos
1 Reply
PaulF_IntelCorp
Employee
83 Views

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.

Reply