Software Archive
Read-only legacy content
17061 Discussions

Accessing camera from web

israel_p_
Beginner
292 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
292 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.

0 Kudos
Reply