How to add video from device to my upload function?


#1

My plan is to create an app that make use of https://github.com/websemantics/vimeo-upload and it´s upload-cordova.js. The app has a Choose Video button with showOption() that opens a ionicActionSheet that let you choose to either captureVideo or togetPicture(Camera.MediaType.VIDEO) from the device library. When this is done, the video is added to a player <cordova-video src="data.videoPath"></cordova-video> that that are able to play the chosen video. When the video this way is added to the player, a button with the ng-click="uploadVideo()" function shows up($scope.show = true;). Pressing this button will cause the current video in the player to be uploaded to my Vimeo account. For sure the upload attempt starts and the progress-bar shows a progress. Also instantly my vimeo account display an Untitled video template and when I click its title, the video page display a ordinary Uploading animation and the text: Your video is uploading. Unfortunately, the progress newer finishes. The var files in uploadVideo obviously does not contain or find the file(video) to upload. The $scope.data.videoPath; seems to be just a string. Can someone tell me how to identify the video(object) used by videoPath and how to add it to the files array (var files = [];) ? I would be so glad for any help on this. See my code below:

$scope.show = false;

$scope.data = {
videoPath: “”
};

$scope.caption = “Choose Video”;

// captureVideo function
$scope.captureVideo = $scope.captureVideo = function(){
var options = {
quality: 50,
limit: 3,
duration: 15 };

  $cordovaCapture.captureVideo(options).then(function(videoData){
  // Success! Video data is here
  $scope.data.videoPath = "file:/" + videoData[0].fullPath;
  $scope.show = true;
  $scope.caption = "Choose new Video";
}, function(err){
  // An error occurred. Show a message to the user
  console.log(err);
});

}

// find video on device function
$scope.getPicture = function(sourceType){
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType:Camera.MediaType.VIDEO
};

$cordovaCamera.getPicture(options).then(function(imageData){
// Success! Video data is here
$scope.data.videoPath = imageData;
$scope.show = true;
$scope.caption = “Choose another Video”;
}, function(err) {
// An error occurred. Show a message to the user
console.log(err);
});
}

$scope.showOptions = function(){
var hideSheet = $ionicActionSheet.show({
buttons: [{
text: ‘Choose a recording’
}, {
text: ‘Make a recording’
}],
destructiveText: ‘’,
titleText: ‘What do you want?’,
cancelText: ‘Cancel’,
cancel: function(){
//hideSheet();
},
buttonClicked: function (index){
// Choose existing recording
if(index === 0){
$scope.getPicture();
}
// Create new recording
else if(index === 1){
$scope.captureVideo();
}
// Cancel operation
else {

               }
           return true;
       }

});

};

// This is the function that I want to start the upload to Vimeo with
$scope.uploadVideo = function(){

 var files = [];
// Here lies my problem. videoPath is a string, 
//not the file(video) that videoPath points to.

//What is the name of the file/video object in my case??

 files[0] = $scope.data.videoPath; 

 var accessToken = " "; // accesstoken to Vimeo upload API are hidden in this text

 // Rest the progress bar
 $scope.updateProgress(0);

 var uploader = new MediaUploader({
   file: files[0],
   token: accessToken,

   onError: function(data) {

     console.log('Error ', data);

     var errorResponse = JSON.parse(data);
     message = errorResponse.error;
   },

   onProgress: function(data) {
     console.log('in progress...');

     $scope.updateProgress(data.loaded / data.total);
   },

   onComplete: function(videoId) {
     console.log('Complete ',videoId);

     var url = "https://vimeo.com/"+videoId;
     var a = document.createElement('a');
     a.appendChild(document.createTextNode(url));
     a.setAttribute('href',url);

     var element = document.createElement("div");
     element.setAttribute('class', "alert alert-success");
     element.appendChild(a);

     document.getElementById('results').appendChild(element);
   }
 });

 uploader.upload();

};


#2

@Jomen
hey
did u find out how to do this?
im trying to do exact same thing and cant understand how to convert the uri im getting to 'file’
that mediauploader is excepting.

will be thankful for any help


#3

Hi. Great to find someone that is working on a similar case. Maybe we could help each other along the way. I have been trying to get this Vimeo Upload to work for a long time, but unfortunately there have not been a long line of developer that have come up with an answer so far. We still have to cross our fingers.


#4

@Jomen
Hi all i am also getting the same problem as i am trying to access the video path using $cordovaCamera plugin, here is my code:-

$scope.getVideoPath = function(){
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
mediaType:Camera.MediaType.VIDEO
};
$cordovaCamera.getPicture(options).then(function(videoURI) {
console.log(“videoURI”,JSON.stringify(videoURI));
console.log(“videoURI”,videoURI.toURI());
}, function(err) {
console.log(“err”,JSON.stringify(err));
});
}

I am getting both the log blank


#5

did u get solution?..


#6

Did anyone get Solution to this??


#7

Sorry @gowda , I have not got any help with this. You can find my project at: https://github.com/Jomen/DokkerMedia

so if you would like to try to solve the problem, your welcome. As far as this app goes, a valid video file is not uploaded. The app need to preserve FileReader with a FileURI, not just a FilePath.

You need to change the accessToken to your own. Of cause, if you solve this, I would like to know.


#8

I’d surely get back to you on this if I get any solution


#9

$cordovaFile.readAsArrayBuffer(“file:/storage/sdcard0/DCIM/Camera/”,“filename”).then(function (success) {}

try ths u may get it…


#10

$scope.captureVideo = function () {

              var options = {
                          quality: 50,
                          destinationType: Camera.DestinationType.FILE_URL,
                          sourceType: Camera.PictureSourceType.CAMERA
                          };

          $cordovaCapture.captureVideo(options).then(function(videoData) {
          $scope.clip = videoData[0].fullPath;
          $scope.file=videoData[0].name;
        



              var first=$scope.clip.substr(0,$scope.clip.lastIndexOf('/')+1);

             $cordovaFile.readAsDataURL(first,$scope.file)
                  .then(function (success) {

            
              
                var bucket = new AWS.S3({params: { Bucket: 'jbf-dev-bucket' }});

                  var params = {

                    Key: videoData[0].name, 
                    ContentEncoding: 'base64', 
                    ContentType: 'video/mp4', 
                    Body: success
                  };

                  bucket.upload(params).on('httpUploadProgress', function(evt) {
                    $scope.uploading = true;
                    $scope.progress = parseInt((evt.loaded * 100) / evt.total)+'%';
                    console.log("Uploaded :: " + $scope.progress );         
                    $scope.$apply();
                  }).send(function(err, data) {
                    $scope.uploading = false;
                    /*$scope.images.push(data.Location);*/

                    /*console.log(data.Location);*/
                    $scope.$apply();
                  });
                
                $scope.i++;

                  }, function (error) {
                  
                  console.log("==========error==========");
                  console.log(error);
                  })
             

            })
        
      }

AWS.config.update({

            accessKeyId : 'YOUR ACCESSKEYID',
            secretAccessKey : ' YOUR SECREATACCESSKEY'
            
        
       });

im uploading captured video to amazon s3 bucket…its working…make changes and do it…


#11

I have tried the code but I get and ENCODING_ERR from the readAsDataURL method. Does anybody else has the same problem?