Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70612

How to add video from device to my upload function?

$
0
0

@Jomen wrote:

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();

};

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 70612

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>