Vimeo에 동영상 업로드하기

실무 중 Vimeo 플랫폼을 이용하여 컨텐츠를 등록하고 조회해야 하는 업무가 생겼다. Vimeo 플랫폼 내에 Library의 기능으로 동영상을 업로드하고, 썸네일 이미지를 등록하는 등의 작업이 가능하지만 사내 관리자 페이지에서 이를 수행하는 것이 최상의 요건이었다. Vimeo에서는 NodeJS 환경에서의 API 통신을 제공하고 있으며, 많은 서칭과 테스트를 통해 이 기능을 사내 관리자 페이지에 이식할 수 있게 되었다. (thanks to Vladimir Topolev) 어렵지 않은 Vimeo 내 APP 등록과 access token 발급은 제외한다.

Vimeo에 동영상 업로드하는 관리자 만들기

---

Vimeo에 동영상 업로드하기

Vimeo에서의 동영상 업로드는 두 단계로 진행된다.

1. Vimeo에 동영상 파일 사이즈와 이름을 포함한 동영상 업로드 링크 발급받기
2. 발급받은 업로드 링크에 동영상 파일 업로드하기

1. 동영상 업로드 링크를 발급받기

(1) tus-js-client 라이브러리를 설치한다.

npm install tus-js-client

(2) 다음의 URL(https://api.vimeo.com/me/videos)에 POST Method로 api를 호출하면 동영상 업로드 링크가 반환된다.

import axios from 'axios'

const generateUploadURI = async (
    video: File
): Promise<{ data: { uri: string; upload: 
    { upload_link: string } } }> => {
    /** 영상파일 업로드 URI 조회를 위한 Vimeo API URL */
    const GENERATE_UPLOAD_URI = 
        'https://api.vimeo.com/me/videos'

    const body = {
        upload: {
            approach: 'tus',
            size: video.size,
        },
        /** 업로드시 저장시킬 영상 이름 */
        name: video.name,
    }
    const headers = {
        Authorization: `bearer ${'발급받은 Access_Token'}`,
        'Content-Type': 'application/json',
        Accept: 'application/vnd.vimeo.*+json;version=3.4',
    }

    return await axios.post(
        GENERATE_UPLOAD_URI, 
        body, 
        { headers }
    )
}

2. 업로드 링크로 동영상 업로드하기

tus-js-client의 tus.Upload기능을 이용하여 동영상 업로드 한다.

import * as tus from 'tus-js-client'

const handleUploadVideo = async (
    /** 업로드할 동영상 파일 */
    video: File,
): Promise<void> => {
    /** 영상파일 업로드를 위한 URI를 조회한 API 반환데이터 */
    const response: { data: { uri: string; upload: 
        { upload_link: string } } } =
        await generateUploadURI(video)
    /** 영상파일 업로드를 위한 URI */
    const uploadURI = response.data.upload.upload_link
    return new Promise<void>(() => {
        const uploader = new tus.Upload(video, {
            uploadUrl: uploadURI,
            endpoint: uploadURI,
        })
        uploader.start()
    })
}

 

개인적으로 썸네일 업로드가 더 복잡해서 힘들었는데, 차후 업로드 해야겠다.