Mark7294305
Posts: 0
Joined: Fri Dec 26, 2014 2:10 am

How to view videos and photos stored in the files database

Hello Support
I have created an app where users can take photos, record videos and upload into the Appery files database. The Videos and photos are uploaded ok.
Image
However the problem I am having is viewing the recorded videos and saved photos on the device.
Here is the page where the user will see their recorded videos and save photos. Image
I wish to map in a nested format all videos that the user has in the files database to the video conponent which is in a carousel . So for example if the user has recorded 5 videos the user will see the first video then can scroll and watch another.
Image
When I do the mapping no video appears in the video conponet for viewing. How can I get this to work?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to view videos and photos stored in the files database

Hello Mark,

Please use direct links to files as it is described here: https://devcenter.appery.io/documenta...

Mark7294305
Posts: 0
Joined: Fri Dec 26, 2014 2:10 am

How to view videos and photos stored in the files database

Hello Support
I have use the direct link as instructed and I am now able to view the images taken from the camera service. However I am not able to view videos. what I did was to

  1. Create a rest service with the url "https://api.appery.io/rest/1/db/files...

  2. On the response map the base64data to the Image component.

    I tried to map the base64data to the video component but it did not work

    What must I do to view video and audio files?

Mark7294305
Posts: 0
Joined: Fri Dec 26, 2014 2:10 am

How to view videos and photos stored in the files database

Hello
Do you have an answer for this??

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to view videos and photos stored in the files database

You shouldn't convert video/audio files to the base64 string.

Mark7294305
Posts: 0
Joined: Fri Dec 26, 2014 2:10 am

How to view videos and photos stored in the files database

What must I do to view video and audio files?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to view videos and photos stored in the files database

Use direct links like this:

https://api.appery.io/rest/1/db/files...

here - your DB ID,
my.mp3 - filename

Mark7294305
Posts: 0
Joined: Fri Dec 26, 2014 2:10 am

How to view videos and photos stored in the files database

What I am trying to achive is an App similiar to (but not) the youtube App. If you install the youtube app on your phone you will see several videos listed under a catergory with a preview picture displayed. If you click on a picture, the video runs. I want the same experience on my App. Is this possible with the files database or should I be looking to use Amazon or Google drive?

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

How to view videos and photos stored in the files database

Yes, it is possible. Please clarify have you tried suggestion from the previous post/message?

Mark7294305
Posts: 0
Joined: Fri Dec 26, 2014 2:10 am

How to view videos and photos stored in the files database

Yes I tried the above but its not working. Here are the steps I have taken so far :
I installed the Cordova fileUpload service and duplicated the FileUploadHelper js file (calling it FileVideoUploadHelper)and modify it for my video upload service. Then

1.when a user clicks the record a video button the following script is executed

var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles.fullPath;
//alert(path);
// do something interesting with the file
Apperyio.storage.VideoStore.set(path);

}

};
// capture error callback
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};
// start video capture
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit:1});

2.when a user clicks the upload video button the video is uploaded to the files database as shown below

Image

3.Then on the viewing page the following mapping is executed on page show
Image

However nothing is displayed on the app

Image

Here is a copy of the FileVideoUploadHelper js file I use to upload the video

Appery.FileVideoUploadHelper = Appery.createClass(null, {

Code: Select all

 init : function(requestOptions) { 
     this.__requestOptions = $.extend({}, requestOptions); 
 }, 

 process : function(settings) { 
     settings.beforeSend(settings); 

     if (this.__requestOptions.echo) { 
         settings.success(this.__requestOptions.echo); 
     } else { 
         uploadVideo(settings.data.image_uri, settings.data.request_options, settings.data.name, settings); 

     } 
 } 

});

function uploadVideo (path, reqOptions, name, settings) {

Code: Select all

     function win(result) {  

         settings.success({'response':JSON.parse(result.response)});             
         settings.complete('success'); 

         //alert('Upload successful. Code = ' + result.responseCode + '\n Response = ' + result.response + '\n Sent = ' + result.bytesSent); 
     } 

     function fail(error) { 

         settings.error(null, null, error.source); 
         settings.complete('error'); 

         alert('An error has occurred: Code = ' + error.code + '\n + Upload error source ' + error.source + '\n Upload error target ' + error.target); 
     } 

     var imageType = path.substr(path.lastIndexOf('.')+1);     
     var options = $.extend(new FileUploadOptions(), reqOptions); 

     if(name) { 
         options.fileName = name + imageType; 
         options.fileKey= name + imageType; 
     } else { 
         options.fileName = path.substr(path.lastIndexOf('/')+1); 
         options.fileKey = path.substr(path.lastIndexOf('/')+1); 
     } 

     options.mimeType=(imageType == 'mp3')?'video/mp3':'video/mp3';            
     var ft = new FileTransfer(); 

     ft.upload(path, encodeURI(FileUpload_settings.database_url+"/files"), win, fail, options);         
 } 

function isCordovaApp() {
return (document.URL.indexOf('a href="http://" rel="nofollow"http:///a') === -1 && document.URL.indexOf('a href="https://" rel="nofollow"https:///a') === -1);
}

/*** Uploads a binary file (base64) using browser API, without Cordova ***/
function uploadBinaryHelper(datasource, imageBase64Data, name, type) {

Code: Select all

 if (imageBase64Data) { 
     var byteCharacters = atob(imageBase64Data.substring(imageBase64Data.indexOf(',')+1)); 
     var byteNumbers = new Array(byteCharacters.length); 
     for (var i = 0; i < byteCharacters.length; i++) { 
         byteNumbers[i] = byteCharacters.charCodeAt(i);  
     } 
     var byteArray = new Uint8Array(byteNumbers); 
     var imageType = type || 'mp3';  
     var imageName = name || new Date().getTime(); 
     imageType = (imageType == 'mp3')?imageType:'mp3';         
     var blob = new Blob([byteArray.buffer],{type: 'video/' + imageType}); 
     var formData = new FormData();         
     formData.append(imageName +'.'+ imageType, blob); 
     if(datasource && datasource.service) { 
         try {        
             datasource.execute({ 
                           'allowDataModification': false, 
                           'processData': false, 
                           'contentType':false, 
                           'body': formData, 
                           'cache': false  
                          }); 

            } catch (exception){  
                console.log(exception.name + ' ' + exception.message);  
                hideSpinner();  
            } 
     } else { 
         console.warn('This data source is not correct.'); 
     } 
 }else{ 
     console.warn('Image data is empty or has a wrong format.'); 
 } 

}

Return to “Issues”