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