Page 1 of 1
(HTML) FileURL returned by LONGRANGE.Camera is inaccessible
Posted: Tue Nov 26, 2013 9:34 am
by Siyaman
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
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,
Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi
Posted: Wed Nov 27, 2013 3:34 am
by Pablo
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;
Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi
Posted: Thu Nov 28, 2013 3:10 am
by Siyaman
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>
Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi
Posted: Thu Nov 28, 2013 3:26 am
by Pablo
That works for me, iOS and Android.
What device, OS and LongRange version are you using?
Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi
Posted: Fri Nov 29, 2013 3:23 am
by Siyaman
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.
Re: (HTML) FileURL returned by LONGRANGE.Camera is inaccessi
Posted: Fri Nov 29, 2013 8:48 am
by MarkDuignan
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.