avatarVladimir Topolev

Summary

This text is a tutorial on how to integrate Vimeo video uploading into a React application using a resumable or tus approach, with the aim of reducing the number of hits on the server.

Abstract

The tutorial begins with instructions on creating a React application using NextJS and TypeScript. It then guides the reader through the process of creating a Vimeo account and application, generating an access token, and understanding the resumable approach to uploading videos on Vimeo. The tutorial covers implementing server endpoints, including a proxy server to handle requests with the access token, and front-end components for the upload process. The author also shares their experience in customizing video display options and highlights the benefits of using the tus protocol for uploading videos.

Opinions

  • The author emphasizes the importance of keeping the access token secret and not exposing it on the client-side.
  • The tutorial is focused on using the resumable or tus approach for video uploading, as it allows polling the progress of the upload.
  • The author shares their experience in customizing video display options, such as changing the color of control buttons and hiding the Vimeo logo.
  • The tutorial is written with the aim of reducing the number of hits on the server by completing as many actions as possible via the Vimeo server or client-side.
  • The author highlights the benefits of using the tus protocol for uploading videos, as it allows for resuming uploads in case of network interruptions.
  • The tutorial provides a detailed implementation of the server endpoint and front-end components for the upload process.
  • The author shares their codebase on GitHub and encourages readers to try out the AI service they recommend.

How to Integrate Vimeo into React application

A quick guide to integrating Vimeo video upload into your React application

Media content is a major part of any application. Here we discuss an approach using Vimeo as storage for video content dynamically uploaded by users. Here we also try to reduce the number of hits on our server, which means completing as many actions as possible via the Vimeo server or client-side (client browser).

If you would like to support me as a writer follow me to get more knowledge and like the article.

1 Create React application from the scratch

Since we need to have some endpoints on our server, let’s create an application with NextJS applying typescript:

yarn create next-app --typescript

In the terminal, CLI offers you to choose a project name (let’s say its name is vimeo-integration) and it will create a project boilerplate in a project with the same name.

2 Vimeo Account

2.1 Create a Vimeo Account

Just visit the Vimeo site, click the “Log in” button, and in appeared popup find and click the “Join” button and choose the appropriate way to sign up.

Picture 1 — Creation of Vimeo Account

2.2 Create an Application within a created account

As soon as we created a Vimeo Account to get access to Vimeo API we need to create an Application. In the main navigation go to Resources -> Developer Tools. On this page find the button “New App” on the right bottom corner and fill in all necessary fields and click the “Create Application” button.

Picture 2 — Creation of New Application

On the page of new created Application, let’s scroll down to the Authentication section and generate Access Token. Click the “Authenticated” radio and check the following options: “Private”, “Create”, “Edit”, “Upload”, and “Delete”. Click the “Generate” button. Copy generated token, we will use it soon and keep it secret. It allows a user to upload video on our account's behalf.

Picture 3 — Create an Access Token of Application

3 Resuamble approach to upload video on Vimeo

Vimeo provides several ways to upload video and here we go with a resuamble or tus approach. For other ways to upload you may discover this page. We’ve chosen the Resuamble approach since it allows polling the progress of the upload as it’s occurring.

Resuamble approach is supposed to follow the several steps: - get a presign link to upload a video - upload video via tus protocol using presign link which has been got in the previous step

Here I would like to highlight some crucial points which were important for us. Getting a presign link is required to fetch metadata from the Vimeo service and this request should be associated with the access token which we generated in the 2.2 chapter. We need to implement this part on our server since we could not expose a secret token on the client-side. A presign link is just some metadata that generates a link that we will use afterward to upload video, and it does not require us to attach any tokens anymore and we may complete the upload on the client-side only. This process is depicted in picture 4.

Picture 4 — Vimeo video upload process

4 Implementation

We covered all details which are necessary and let’s start to implement them.

4.1 Server endpoint

As we discussed in the previous section we need to get a presign upload link and this request should be delivered to Vimeo Server with an access token. We don’t like to expose this token on the client-side, therefore we need to develop an endpoint on our server which attaches our token and it will be like a proxy server.

Since we initialized our application with NextJS, it’s easy to implement just by creating a file with the name vimeo.tsunder the folder /pages/api. This handler will be available by this endpoint then /api/vimeo . Let’s implement this one. Our server should send a request to this endpoint

POST https://api.vimeo.com/me/videos

Including these headers:

The shape of the request body will be the following:

{   
   "upload": {     
      "approach": "tus",     
      "size": "{size}"   
   } 
}

Where thesize parameter is the length of the video file in bytes. Besides those required fields you may also need to change the way in which this video will be shown in an iframe afterward. For example, you may change the color of controls or hide some control buttons like “share” or “like”, or hide the Vimeo logo. All possible options you may discover by visiting this link. In our example, I would like to change the color of the control buttons and hide the Vimeo logo, our request then will look like that:

{   
   "upload": {     
      "approach": "tus",     
      "size": "{size}"   
   },
   "embed": {
      "color": "#4338CA",
      "logos": {
         "vimeo": false
      }
   },
}

Ok, without any further ado let’s implement this handler:

Instead of VIMEO_ACCESS_TOKEN yon need to put your own which has been created in the 2.2 section above.

This response returns the HTTP 200 status code and a number of fields about the new video, including upload.upload_link, which gives you the web address for uploading the video file.

4.2 Implement Vimeo Uploader (Front-end part)

At first, let’s extract a common interface that may be used not only for the Vimeo provider but for others as well. Let’s create the file media-uploader.types.ts in the folder utils :

We developed an interface Uploader where we need to implement one required method upload . Well, let’s implement it for our Vimeo provider and create media-uploader-vimeo.ts file under the folder utils. But before going further, let’s recall that we are going to upload a video file via tus protocol, and luckily for us, we may include a library that helps us to do it. Let’s include the tus-js-client library:

yarn add tus-js-client

Well, our implementation will look like that:

Here we just invoke the recently developed URL (section 4.1) to get presign uploading link (lines 21–24). After that, we need to use this link to upload a file via the ts-js-client library (lines 31–48). This library allows us to poll progress via onProgress callback. As soon as a file is uploaded we return a data with this shape:

{
   "provider": "Vimeo",
   "id": "XXXXXXXXXX"
}

id will be used when you need to show a video in an iframe.

4.3 Implement React Uploader Component (Front-end Part)

It will be a pretty easy implementation which includes a simple input with the file type and the Upload button. You will adopt this functionality to your needs afterward, but for now, I won’t distract us from the main topic. As soon as we click the Upload button we should see the progress. Let’s start it and incorporate in this component our media-uploader-vimeo utils developed in section 4.2.

Let’s create MediaUploader component:

Here we have input with file type (lines 11–19), when the user picks content to upload — we save it in react state. Also, we allow users to upload only video files via attribute accept with value video/*.

On the screen, we added Upload button (lines 20–39), as soon as the file is picked it’s getting available and in onClick handler we invoke our recently implemented MediaUploaderVimeo.

During the uploading, we show the progress of this process (line 40).

That is it. Let’s test this functionality.

After that when we go to the Vimeo dashboard, you will see this video:

The codebase for this you may find on GitHub following this link: https://github.com/vladimirtopolev/vimeo-integration. Don’t forget in this file to defend your own VIMEO_ACCESS_TOKEN (see chapter 2.2)

Thanks for reading!

React
Vimeo
Nextjs
Recommended from ReadMedium