Vimeo video upload in ionic 2 | ionic 3 | ionic 4

How to upload video on vimeo from ionic :

In this artical i will explain how to upload video on vimeo from ionic 2 | ionic 3 | ionic 4 app. This is very simple process, Just make sure you should have knowledge about Camera, File, FileTransfer plugins. With this plugins we will upload videos on vimeo.


First you need to create app on vimeo.com. After creation of app you’ll get a Client ID and Client Secret for your application you create.
Register a new application : https://vimeo.com/log_in

Please follow below steps to generate authorization :

1. Get your API key : You’ll need a Client ID and Client Secret for each application you create. To create a key, you’ll need to supply vimeo with some basic information about your application. Don’t worry if you’re not sure about all of the information, you can always edit it later.

2. Get an access token : To make API requests you will need an Access token. If you want to make requests on behalf of a user, that token must be authenticated. You can generate access token from vimeo for selected app.

Now we will start to integrate vimeo video upload in our ionic app :

Step 1: Install camera, file and file transfer plugins by using below ccommand 

 $ ionic cordova plugin add cordova-plugin-camera
 $ npm install --save @ionic-native/camera

 $ ionic cordova plugin add cordova-plugin-file
 $ npm install --save @ionic-native/file

 $ ionic cordova plugin add cordova-plugin-file-transfer
 $ npm install --save @ionic-native/file-transfer


Step 2: Import plugins in page 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Http, Headers, RequestOptions } from '@angular/http';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';


Now add plugins in provider list :

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [Camera,File, FileTransfer]
})

Add plugins in constructor :

constructor(public navCtrl: NavController,private camera: Camera, public http:Http, private transfer: FileTransfer, private file: File) {

  }


Step 3: Add code to select video from mobile by using camera plugin 

selectVideo(){
    
const options: CameraOptions = {
 quality: 100,
 allowEdit:true,
 destinationType: this.camera.DestinationType.FILE_URI,
 sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
 mediaType: this.camera.MediaType.VIDEO,
 saveToPhotoAlbum: true
}

this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
let base64Image = 'data:image/jpeg;base64,' + imageData;
this.currentVideo = imageData;
this.generateVideoUploadUrl();
}, (err) => {
// Handle error
});

}

Note : On vimeo we need to follow 2 steps for video upload. First we need to generate video upload url then we need to upload video on that url.

Step 4: Now generate upload video url from vimeo

generateVideoUploadUrl(){

let url='https://api.vimeo.com/me/videos';
 let params ={
   "upload" : {
     "approach" : "post",
     "redirect_url" : ""
 },
 "name" : "My Video",   // video name
 "privacy" : {
     "embed" : "private"       // public for public video
 }
};
 
 let headers = new Headers({ 'Authorization':'Bearer XXXXXXXXXXXXXXXXXXXXXXX(Access Token)','Content-Type': 'application/json','Accept':'application/vnd.vimeo.*+json;version=3.4' });
 let options = new RequestOptions({
   headers: headers
});

let repos = this.http.post(url, params, options).subscribe(
 data => {
   let res = data.json();
   console.log(JSON.stringify(res));

   let url = res.upload.upload_link;
   this.uploadVideo(url);
 },
 err => {
   console.error("Error : " + err);
 },
 () => {
   //this.commonMethod.hideLoader();
   console.log('getData completed');
 }
);
}


Step 5: Upload video on vimeo 

uploadVideo(url){

const fileTransfer: FileTransferObject = this.transfer.create();
let fileName=this.currentVideo.substr(this.currentVideo.lastIndexOf('/')+1);

let options: FileUploadOptions = {
 fileKey: 'file',
 fileName: fileName, 
 httpMethod: 'PUT',
 headers: {'Authorization':'Bearer XXXXXXXXXXXXXXXXXXXXXXX(Access Token)','Tus-Resumable':'1.0.0','Upload-Offset':'0', 'Content-Type': 'application/offset+octet-stream' }
};

fileTransfer.upload(this.currentVideo, url, options)
.then((data) => {
 // success
 console.log('s='+JSON.stringify(data));
}, (err) => {
 // error
 console.log('f='+JSON.stringify(err));
});

} 


It's done. Please check video on vimeo. 


This is the full code for your TS file :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Http, Headers, RequestOptions } from '@angular/http';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [Camera,File, FileTransfer]
})

export class HomePage {
  public currentVideo:any;
  constructor(public navCtrl: NavController,private camera: Camera, public http:Http, private transfer: FileTransfer, private file: File) {

  }

  selectVideo(){
    
const options: CameraOptions = {
 quality: 100,
 allowEdit:true,
 destinationType: this.camera.DestinationType.FILE_URI,
 sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
 mediaType: this.camera.MediaType.VIDEO,
 saveToPhotoAlbum: true
}

this.camera.getPicture(options).then((imageData) => {
// imageData is either a base64 encoded string or a file URI
// If it's base64:
let base64Image = 'data:image/jpeg;base64,' + imageData;
this.currentVideo = imageData;
this.generateVideoUploadUrl();
}, (err) => {
// Handle error
});

}
    
generateVideoUploadUrl(){

let url='https://api.vimeo.com/me/videos';
 let params ={
   "upload" : {
     "approach" : "post",
     "redirect_url" : ""
 },
 "name" : "My Video",   // video name
 "privacy" : {
     "embed" : "private"       // public for public video
 }
};
 
 let headers = new Headers({ 'Authorization':'Bearer XXXXXXXXXXXXXXXXXXXXXXX(Access Token)','Content-Type': 'application/json','Accept':'application/vnd.vimeo.*+json;version=3.4' });
 let options = new RequestOptions({
   headers: headers
});

let repos = this.http.post(url, params, options).subscribe(
 data => {
   let res = data.json();
   console.log(JSON.stringify(res));

   let url = res.upload.upload_link;
   this.uploadVideo(url);
 },
 err => {
   console.error("Error : " + err);
 },
 () => {
   //this.commonMethod.hideLoader();
   console.log('getData completed');
 }
);
}
    
uploadVideo(url){

const fileTransfer: FileTransferObject = this.transfer.create();
let fileName=this.currentVideo.substr(this.currentVideo.lastIndexOf('/')+1);

let options: FileUploadOptions = {
 fileKey: 'file',
 fileName: fileName, 
 httpMethod: 'PUT',
 headers: {'Authorization':'Bearer XXXXXXXXXXXXXXXXXXXXXXX(Access Token)','Tus-Resumable':'1.0.0','Upload-Offset':'0', 'Content-Type': 'application/offset+octet-stream' }
};

fileTransfer.upload(this.currentVideo, url, options)
.then((data) => {
 // success
 console.log('s='+JSON.stringify(data));
}, (err) => {
 // error
 console.log('f='+JSON.stringify(err));
});

}

}