(HTML) FileURL returned by LONGRANGE.Camera is inaccessible

Siyaman · Post by **Siyaman** » Tue Nov 26, 2013 9:34 am

I tried the Programming LongRange with Javascript examples and documentation, specifically LRScript05.html. I modified the example to read the fileURL instead of loading the image data directly. On line 89 I changed

Code: Select all

photoImg.src = 'data:image/jpeg;base64,' + result.data;

to

Code: Select all

photoImg.src = result.fileURL;

Unfortunately this does not work on my mobile device. I currently have an iPhone 5 with iOS 7. Are there other configurations that need to be set to read images using the fileURL?

Thank you,

Pablo · Post by **Pablo** » Wed Nov 27, 2013 3:34 am

Hi,

To use the fileURL set the properties like this:

options.resultContent = false;
options.returnFile = true;

Then you can assign result.fileURL to the src attribute of the image, in the example it would be like this:

photoImg.src = result.fileURL;

Siyaman · Post by **Siyaman** » Thu Nov 28, 2013 3:10 am

I made the suggested changes but I'm still not getting the image to show up from file. The file path that is being returned by the LONGRANGE.Camera.show call is

Code: Select all

file:///var/mobile/Applications/317F2429-7754-4C25-8DA8-F69C4213BC5D/Library/Caches/com.lansa.mobile.LongRange/BeaconMobile_dev.beacon.co.tt_80/LongRangeLocal/Media/CDCF4624-5CA3-4C4C-AEBE-DBF09EC2F487-3131-0000022F2694FB8B..jpg

My sample code is

Code: Select all

<!-- ================================== -->
<!--            CAMERA                  -->
<!-- ================================== -->

<html>
<head >

<style type="text/css">

input 
{ 
   font-size:large;
   margin-top:15px;
}
  
</style> 

<!-- Include trace file -->
<script type="text/javascript" src="app/resources/LRSTrace.js"></script>

<script type="text/javascript">

/* Path where to write the photo or video */
var writeFilePath = "/LongRangeLocal/Photos/";

/* Show the camera */
function showCamera() 
{
   var options = { };

   /* Enable the image or video according to the checked radio button  */
   options.enableImage = document.getElementById("enableImage").checked;
   options.enableVideo = document.getElementById("enableVideo").checked;
   
   /* Save the photo to the gallery according to the saveToPhotoGallery checkbox */
   options.saveToPhotoGallery = document.getElementById("saveToPhotoGallery").checked;

   /* Set path where to create the photo or video */
   options.writeToFilePath = document.getElementById("writeToFilePath").value;

   /* Set width and height of the photo based on the current values of width and height input fields */   
   options.size = { width:document.getElementById("size.width").value, height:document.getElementById("size.height").value };

   /* Only good for photos, set to false for video. */   
   // options.returnContent = options.enableImage;

   /* Access image using file url*/
   options.returnContent = false;
   options.returnFile = true;

   /* Enable annotations. Not applicable when taking video */   
   options.enableAnnotation = document.getElementById("enableAnnotation").checked;  
      
   /* Set the function to handle the onCompleted event. */   
   options.onCompleted = onShowComplete;
  
   LONGRANGE.Camera.show(options);
}

function checkAnnotation(bDisable)
{
   var annotation = document.getElementById("enableAnnotation");
   
   annotation.disabled = bDisable;      
   
   if (bDisable) annotation.checked = false;
   
}

/* Handle completion. */
function onShowComplete(result)
{
   /* Check the result status and show error if status is not OK */
   if ( result.status == LONGRANGE.Status.Error) 
   {
      alert("Show camera failed. Error was '" + result.message + "' (Status:" + result.status + ")");      
   }
   else
   {
      /* Show the photo or video when completed OK */
      if ( result.status == LONGRANGE.Status.Ok) 
      {
          var photoImg = document.getElementById('NewImage');
          var videoContainer = document.getElementById("videoContainer");
                    
         /* Determine if a photo (public.image) or a video (public.movie) was taken */
         if (result.mediaType == "public.image")
         {
            /* Hide the video container */
            videoContainer.style.display = "none";
            /* Set the source of the image element using the returned data string */            
            // photoImg.src = 'data:image/jpeg;base64,' + result.data;            
            photoImg.src = result.fileURL;          
            /* Show image element */         
            photoImg.style.display = "block";            
         }
         else
         {
            /* Hide the photo element */
            photoImg.style.display = "none";            
            videoContainer.src = result.fileURL; 
            videoContainer.style.display = "block";            
            videoContainer.load();
         }
      }
      /* Cancelled happens when pressing the Cancel button without taking any pictures or video */
      else
      {
         alert("Operation cancelled");
      }      
   }
}

</script>
</head>

<body style="font-family:Verdana;">

<h4 align="center">Source: /LongRange/resource/<b>LRScript05.htm</b></h4>

<div>

   <fieldset style="width:360px">
   <legend>Options</legend>
   
      <div><input type="radio" id="enableImage" value="PHOTO" onclick="checkAnnotation(false)" checked name="enableMedia"/>Take photo
                       
      <input type="radio" value="VIDEO" id="enableVideo" name="enableMedia" onclick="checkAnnotation(true)" />Take video</div>   

      <input style="margin-left:10px" type="checkbox" id="saveToPhotoGallery" /><span>saveToPhotoGallery</span>

      <div><input style="margin-left:10px" type="checkbox" id="enableAnnotation" /><span>enableAnnotation (only valid for photos)</span></div>
                 
   </fieldset>


  <div>Write to:<input style="font-size:medium; width:310px" value="/LongRangeLocal/Media/" type="text" id="writeToFilePath" /></div>

  <div>
    Width:<input style="font-size:medium; width:100px" value="280" type="text" id="size.width" />
    Height:<input style="font-size:medium; width:100px" value="200" type="text" id="size.height" />
  </div>

  <input type="button" style="width:280px;" value="Take Media" onclick="showCamera()" />
 </div>

<video id="videoContainer" width="320" height="240" controls style="margin-top:10px;display:none">

</video>

<img alt="" src="" id="NewImage" style="margin-top:10px; display:none" />


</body>
</html>

Pablo · Post by **Pablo** » Thu Nov 28, 2013 3:26 am

That works for me, iOS and Android.

What device, OS and LongRange version are you using?

Siyaman · Post by **Siyaman** » Fri Nov 29, 2013 3:23 am

I've tried the following devices and all of them could not retrieve the image using the filePath URL.
iPhone 5 (iOS 7, LongRange 1.0.19)
iPhone 4s (iOS 7, LongRange 1.0.19)
Samsung Galaxy S3 (Android 4.2, LongRange 1.0.6)
Nexus 10 tablet (Android 4.4, LongRange 1.0.6)

I've noticed on the Android devices sometimes the camera does not open at all.

Post by **MarkDuignan** » Fri Nov 29, 2013 8:48 am

We have had quite a few people try to reproduce this with no success.
There must be something special or different about your scenario.
A developer will contact you to get the exact details.

LongRange Developer Forum

(HTML) FileURL returned by LONGRANGE.Camera is inaccessible

(HTML) FileURL returned by LONGRANGE.Camera is inaccessible

Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi

Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi

Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi

Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi

Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi