Page 1 of 11

How to view videos and photos stored in the files database

Posted: Sat Nov 21, 2015 11:27 am
by Mark7294305

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?


How to view videos and photos stored in the files database

Posted: Sun Nov 22, 2015 9:24 am
by Serhii Kulibaba

Hello Mark,

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


How to view videos and photos stored in the files database

Posted: Mon Nov 23, 2015 11:03 am
by Mark7294305

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?


How to view videos and photos stored in the files database

Posted: Wed Nov 25, 2015 10:02 am
by Mark7294305

Hello
Do you have an answer for this??


How to view videos and photos stored in the files database

Posted: Wed Nov 25, 2015 2:06 pm
by Serhii Kulibaba

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


How to view videos and photos stored in the files database

Posted: Wed Nov 25, 2015 6:43 pm
by Mark7294305

What must I do to view video and audio files?


How to view videos and photos stored in the files database

Posted: Thu Nov 26, 2015 2:39 pm
by Serhii Kulibaba

Use direct links like this:

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

here - your DB ID,
my.mp3 - filename


How to view videos and photos stored in the files database

Posted: Sun Nov 29, 2015 11:31 am
by Mark7294305

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?


How to view videos and photos stored in the files database

Posted: Tue Dec 01, 2015 5:38 pm
by Serhii Kulibaba

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


How to view videos and photos stored in the files database

Posted: Wed Dec 02, 2015 4:05 pm
by Mark7294305

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.'); 
 } 

}