vimeo 연동하기

🎥 Vimeo Live API 써보려고 함

일단 링크부터 박고 시작한다.

👉 Vimeo Live API 개발자 문서

 

🙋 배경: 이런 흐름으로 작업 중

지금 프론트로 들어온 사이드 프로젝트에서
내가 하고 싶은 기능이 하나 있었다.

• 백엔드는 기존에 Spring으로 구성돼 있음
• 인증, 계정, 기타 설정은 기존 백엔드 담당
• 나는 NestJS 서버 하나 세워서 프론트에서 받은 토큰 검증하고 Vimeo 관련 작업만 처리하려고 함

근데…
처음이다 보니 고민이 많다.
정리도 안 되고, 뭘 먼저 해야 할지도 막막했음.

그래서 지금부터 정리 시작 ✍️

 

 

1️⃣ Vimeo 앱 등록하기 (OAuth 준비)

Vimeo에서 API를 쓰려면 앱을 등록해야 한다.
https://developer.vimeo.com/apps

• 앱 만들고
• Redirect URI 설정 (로컬이면 http://localhost:3000/callback 같은 거)
• 권한 설정
• Edit 들어가서 callback URL 작성
  → 나처럼 프론트 배포가 안 된 상황이면 그냥 로컬로 작성해도 됨

추후 배포되면 변경하면 되니까 걱정 ㄴㄴ

 

2️⃣ 인증 완료 → 액세스 토큰 발급

OAuth 흐름은 생각보다 간단했다.

1. Vimeo 로그인
2. 승인 요청
3. Redirect → Authorization Code 받기
4. Access Token 교환

결론:
생각보다 쉬움. 막히는 부분 없음.

 

3️⃣ NestJS에서 Vimeo API 요청 설계

토큰은 프론트에서 받아오고,
NestJS에서는 이 토큰의 유효성을 확인하고
실제로 Vimeo API를 호출하는 역할만 하면 될 것 같음.

고민 중인 구조는 이런 식:

@Get('vimeo/me')
@UseGuards(VimeoAuthGuard)
async getVimeoInfo(@Req() req) {
  const token = req.user.accessToken;
  return this.vimeoService.getMe(token);
}

 

이때 VimeoAuthGuard가 Authorization 헤더에 있는 토큰을 검증하는 역할을 해주면 될 듯.

 

4️⃣ Vimeo에서 할 수 있는 것들 (Live 포함)

API 보면 진짜 많음.

• 영상 업로드
• Live 스트림 생성
• 썸네일 변경
• 플레이어 커스터마이징 등등

내가 지금 주로 보고 있는 건 Vimeo Live 기능.
Live Room 만들고 → RTMP 주소 받고 → 프론트에서 라이브 송출 붙이는 방식.

이건 좀 더 실험해보면서 정리 예정!

 

🧠 하고 나서 느낀 점

• 토큰 구조 이해부터가 중요
  (OAuth로 Access Token 발급 → API 요청에 사용)
• NestJS는 Vimeo 공식 SDK가 없어서 그냥 fetch나 axios로 처리할 듯
• 처음이라 헷갈리는 건 많았지만, 하나씩 정리하니까 그림이 보이긴 함