Integrate with Vimeo and upload videos

This tutorial explains how to integrate with Vimeo and upload/display videos from Kuroco.

Integrate with Firebase

In order to integrate with Vimeo and upload videos, it is necessary to integrate with Firebase.
First, integrate with Firebase referring to the tutorial [Integrate with firebase and save files in the storage].

Integrate with Vimeo

1. Create a Vimeo account
Create a Vimeo account.
Ref: Regarding Vimeo's plan "Plus" is sufficient functionally, but if you use it frequently, "Business" is recommended.
Image (fetched from Gyazo)

2. Proceed to new app registration page
Access Vimeo developer, log in and click [New app].
Image (fetched from Gyazo)

3. Add new app
Enter the following information and click [Create app].

  • App name: Any preferred name
  • App description: Simple description of the app
  • Will people besides you be able to access your app?: No

Image (fetched from Gyazo)

4. Access Kuroco app screen from the Settings and go to "Upload Access"
Click [Request additional Access].
Image (fetched from Gyazo)

5. Apply for Request Upload Access
Enter the following information:

  • Will you be charging for sample?: No
  • Where will these videos be uploaded?: My account
  • Who created these videos?: Other people created these videos
  • What kind of videos will be uploaded?: Simple description of the type of videos that will be uploaded.

Image (fetched from Gyazo)

Click [Request upload access] after filling the form.

Note: The authentication of the app takes about 3 days. If it takes longer, contact Vimeo support.

6. Create Access Tokens
From My app on Vimeo developper, click on the app you have created and access the Settings page.
Image (fetched from Gyazo)

As shown below, select Authenticated -> Scopes and click [Generate].
Image (fetched from Gyazo)

Access Token is created.
Take a note of the following information:

  • Access Token
  • Client identifier
  • Client secrets

Note: The access token cannot be displayed again once this screen is closed, so make sure to save it.

Image (fetched from Gyazo)

Image (fetched from Gyazo)

7. Set it up on Kuroco's management screen.
Access Kuroco's management page and click [External system cooperation] -> [vimeo] on the side menu.
Image (fetched from Gyazo)

Enter "Client Identifier", "Client Secrets" and "Access Token" which you have copied at above step "6. Create Access Tokens".
Image (fetched from Gyazo)

Click [Update] after entering all items.
You can now integrate Kuroco with Vimeo.

If you are using a plan superior to "Plus", you can set up upload defaults so proceed to the following settings.
If not necessary, proceed to How to use integrated Vimeo.

8. Configure Vimeo
Access Vimeo setting page and click [Add new preset].
Image (fetched from Gyazo)

9. Create a preset
Configure a preset on the following part:
Image (fetched from Gyazo)

Click [Save] after completing the setup.

10. Set up upload defaults
From the Upload defaults page, configure the defaults of upload. For the preset, use the one you have just created.
Image (fetched from Gyazo)

Click [Save] after completing the setup.

How to use integrated Vimeo

1. Edit the contents structure
After completing the integration of both Firebase and Vimeo, the extension item "Movie on Vimeo" becomes available on the Content structure edit page.
Configure the "Movie on Vimeo" on the desired content structure. Image (fetched from Gyazo)

2. Upload videos in the content
Upload videos in the content add/edit page.
Image (fetched from Gyazo)

The video is uploaded on Vimeo.
Image (fetched from Gyazo)

3. Display on the front-end
You can fetch Vimeo's link as below:
Image (fetched from Gyazo) Ref: For Vimeo's link, check the actual communication with Kuroco on the [Network] tab from Chrome's developer console, or check using Swagger UI.

You can see the uploaded Vimeo video displayed as below.
Image (fetched from Gyazo)

The integration of Kuroco and Vimeo is now complete, you can directly upload videos.