LMS 가 팀프로젝트의 주제로 정해졌다.
AI, Compiler, 동영상 API, Three.js 같은 새로운 기능을 시도해보자는 이야기가나왔다.
AI, Compiler 모두 재밌어보이는데 팀장님이 동영상 API를 맡기시며 이렇게 말했다 "저는 믿어요 이제. 저번 프로젝트때...아무튼 엄청난 칭찬의 말"
흐어어 부담감이..! 하지만 이번에도 어떻게든 되겠지!
0. 생각 정리
1. 어떤 동영상 API를 쓸까? => 고민할 필요도 없이 회의때 Youtube로 만장일치
2. Youtube에서 원하는 기능을 구현 할 수 있을까?
1. 프로젝트 생성하기
Google 클라우드 플랫폼
로그인 Google 클라우드 플랫폼으로 이동
accounts.google.com
저는 새로운 프로젝트이기때문에 프로젝트 만들기를 선택한다.
원하는 프로젝트 명을 입력하고 만들기를 클릭.
프로젝트가 완성되면 프로젝트로 들어와서 검색바에 youtube를 입력한다.
가이드를 4개 정도 읽어보니 Youtube Data API v3와 Youtube Embeded Player API를 사용해야 할거 같은데..
일단 스프링에서 주소를 저장하고 프론트에 보내주기위해 YouTube Data API v3를 먼저 사용해보았다.
YouTube Data API에 대한 설명은 아래의 주소에서 확인할 수 있다.
YouTube Data API 개요 | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. YouTube Data API 개요 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube와 상호작용하
developers.google.com
API를 시험삼아 사용해보고싶으시다면 아래의 사이트에서 사용해 보실 수 있습니다.
Videos: list | YouTube Data API | Google for Developers
이 페이지는 Cloud Translation API를 통해 번역되었습니다. Videos: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청 매개변수와 일치하는 동영상의 목록
developers.google.com
입력예시
더보기
간단하게 snippet과 chart, maxResult만 설정하여 테스트 해보았다.
{
"kind": "youtube#videoListResponse",
"etag": "gsN5NQe79gArzolEpHMCP7SafRA",
"items": [
{
"kind": "youtube#video",
"etag": "t-gEyI5kBmLUr_FGJDYUW1haiso",
"id": "6Rb9b8rYhII",
"snippet": {
"publishedAt": "2024-07-23T16:06:28Z",
"channelId": "UCCxF55adGXOscJ3L8qdKnrQ",
"title": "Can I Break 50 With President Donald Trump?",
"description": "I attempted to Break 50 from the red tees with former President Donald Trump...\n\nPresident Donald Trump\nInstagram ➤ https://www.instagram.com/realdonaldtrump/\n\nThe Crushers ➤ https://www.youtube.com/@CrushersGC\n\nMy Socials\nInstagram ➤ https://www.instagram.com/brysondechambeau/\nTwitter ➤ https://twitter.com/b_dechambeau\n\nVideo Production ➤ https://www.instagram.com/akacollective/",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/6Rb9b8rYhII/default.jpg",
"width": 120,
"height": 90
},
...
}
}
]
}
2. API 키 생성하기
프로젝트가 생성되었다면 사용자 인증 정보 만들기 의 API 키를 눌러 API 키를 생성한다.
이제 API 키를 사용하여 Postman으로 요청을 보내볼 수 있다.
3. Postman 요청 보내기
일단 검색했을때 어떤 데이터가 반환되는지 확인하기위해 검색어로 검색했을때 3개의 값들을 요청하였다.
1) 프론트엔드로 검색
https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q=프론트엔드&maxResults=3&key=MY_API_KEY
응답결과
더보기
{
"kind": "youtube#searchListResponse",
"etag": "PwH_ie-pi32v4yAL-3HaClZVWYM",
"nextPageToken": "CAMQAA",
"regionCode": "KR",
"pageInfo": {
"totalResults": 1000000,
"resultsPerPage": 3
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "QgwQGatuj4d-B-DHuYeXX79KIRs",
"id": {
"kind": "youtube#video",
"videoId": "S9qAtvvvxio"
},
"snippet": {
"publishedAt": "2022-01-30T11:00:13Z",
"channelId": "UCnrvn64IsKNr69ep-yFjhwA",
"title": "프론트엔드? 백엔드? 진로고민 하시는 분은 보세요 | 개발자 직군별 차이, 성향, 연봉",
"description": "새해 복 많이 받으세요!",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/S9qAtvvvxio/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/S9qAtvvvxio/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/S9qAtvvvxio/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "테헤란밸리",
"liveBroadcastContent": "none",
"publishTime": "2022-01-30T11:00:13Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "sSMqv8hJELSmmBjB-kjMPfY2MG4",
"id": {
"kind": "youtube#video",
"videoId": "jYJ3ygUfPrU"
},
"snippet": {
"publishedAt": "2023-04-12T04:07:54Z",
"channelId": "UCSLrpBAzr-ROVGHQ5EmxnUg",
"title": "(Next.js 0강) 요즘 프론트엔드만으로 먹고살기 힘든 이유",
"description": "대충 Next.js 13 안쓰면 도태된다고 호들갑떨면서 겁주기) Next.js 강의 오픈 (얼리엑세스 50% 할인 중) ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/jYJ3ygUfPrU/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/jYJ3ygUfPrU/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/jYJ3ygUfPrU/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "코딩애플",
"liveBroadcastContent": "none",
"publishTime": "2023-04-12T04:07:54Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "3DOYNBQed1c1JrHOnDVAS2Pb1WU",
"id": {
"kind": "youtube#video",
"videoId": "aXi1H_4ncvs"
},
"snippet": {
"publishedAt": "2021-06-10T11:01:38Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "프론트엔드 백엔드란 무엇인가? | 클라이언트 서버란 무엇인가? | 초보자를 위한 쉬운 개념 정리!",
"description": "프론트엔드 #백엔드 #프론트엔드백엔드차이 이번시간에는 프런트엔드, 백엔드, 클라이언트, 서버 이러한 용어가 무엇인지에 대해 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/aXi1H_4ncvs/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/aXi1H_4ncvs/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/aXi1H_4ncvs/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2021-06-10T11:01:38Z"
}
}
]
}2. 채널Id로 검색
https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCZ30aWiMw5C8mGcESlAGQbA&key=MY_API_KEY
응답 결과
더보기
{
"kind": "youtube#searchListResponse",
"etag": "oJyKu-U5NHGqM7j6AcLAPKghkw8",
"nextPageToken": "CAUQAA",
"regionCode": "KR",
"pageInfo": {
"totalResults": 197,
"resultsPerPage": 5
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "z08_6xkUzq8ROEJURgKA6IXK-gA",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK91TqXFJQ7PVX5pOKoOA9v3"
},
"snippet": {
"publishedAt": "2021-03-07T03:06:56Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "Vuetify Admin Template 기본편",
"description": "Vuetify 란 무엇인지 그리고 Grid System, Breakpoint, Typography와 같이 Vuetify를 사용하기 전에 숙지해야 할 기본적인 특성에 대해 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/m2hjzOOxCG8/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/m2hjzOOxCG8/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/m2hjzOOxCG8/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2021-03-07T03:06:56Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "43QR8bjR_vFv9hESTgXLuHmgx0k",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK-owEPYrrEOBuSLE2VJ50Ph"
},
"snippet": {
"publishedAt": "2021-04-10T15:44:39Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "IT & Tech",
"description": "",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2021-04-10T15:44:39Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "Hg9CjUl_W_MjqFyJBuoKKy5s6_0",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK9cv0bLXMmuDJ0-A3je6CrK"
},
"snippet": {
"publishedAt": "2023-08-06T14:52:38Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "Promise, async/await 끝장내기 강의",
"description": "promise #async #await.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/sN4E9_u7xQk/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/sN4E9_u7xQk/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/sN4E9_u7xQk/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2023-08-06T14:52:38Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "xPBAuuIBAwMLlU34mZ7F6-ZAaqc",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK8B1lKghwKMbYjQRvL7CVpN"
},
"snippet": {
"publishedAt": "2023-07-12T06:37:07Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "【맛보기 강의】 Vue3 완벽 마스터 : 실전편",
"description": "Vue.js 3 유료 강의 맛보기 영상입니다 맛보기 영상을 보시고 \"괜찮다!\"라고 느껴지신다면 아래 링크로 강의를 수강해주시면면 감사 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/DTvCADIFjSQ/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/DTvCADIFjSQ/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/DTvCADIFjSQ/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2023-07-12T06:37:07Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "yWUQacK1NIvw_F6lO7ZmB1c_Tic",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK8oBCKiL4_U-I_NAAP-8xt1"
},
"snippet": {
"publishedAt": "2023-09-15T23:10:58Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "Vue3 & Firebase 커뮤니티 만들기 (with Pinia, Quasar, Vueuse)",
"description": "Vue3 & Firebase를 활용한 커뮤니티 만들기 강의입니다. 본 강의에서는 Firebase 기초부터 배우면서 만드는 과정으로 기존 짐코딩 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/4PS14XwuWwI/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/4PS14XwuWwI/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/4PS14XwuWwI/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2023-09-15T23:10:58Z"
}
}
]
}
3) 동영상 타이틀로 검색
https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCZ30aWiMw5C8mGcESlAGQbA&q=프론트엔드 백엔드란 무엇인가? | 클라이언트 서버란 무엇인가? | 초보자를 위한 쉬운 개념 정리!&key=MY_API_KEY
응답결과
더보기
{
"kind": "youtube#searchListResponse",
"etag": "obkBJXvnQVgCsoODnt56yc8_4Po",
"nextPageToken": "CAUQAA",
"regionCode": "KR",
"pageInfo": {
"totalResults": 11,
"resultsPerPage": 5
},
"items": [
{
"kind": "youtube#searchResult",
"etag": "3DOYNBQed1c1JrHOnDVAS2Pb1WU",
"id": {
"kind": "youtube#video",
"videoId": "aXi1H_4ncvs"
},
"snippet": {
"publishedAt": "2021-06-10T11:01:38Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "프론트엔드 백엔드란 무엇인가? | 클라이언트 서버란 무엇인가? | 초보자를 위한 쉬운 개념 정리!",
"description": "프론트엔드 #백엔드 #프론트엔드백엔드차이 이번시간에는 프런트엔드, 백엔드, 클라이언트, 서버 이러한 용어가 무엇인지에 대해 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/aXi1H_4ncvs/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/aXi1H_4ncvs/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/aXi1H_4ncvs/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2021-06-10T11:01:38Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "uk4KAe-IpOOMu7Wf9ys3Bth_aeE",
"id": {
"kind": "youtube#video",
"videoId": "Jg3FFBLyhK0"
},
"snippet": {
"publishedAt": "2021-04-11T03:22:15Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "API란 무엇인가? | 초보자를 위한 쉬운 개념 정리!!",
"description": "API #openapi #오픈api 이번시간에는 API란 무엇인지에 대해 일반적인 의미부터 ~ 넓은 의미까지 시원하게 설명해보도록 하겠습니다 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2021-04-11T03:22:15Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "AEMyT6ppBbmCOll0BNn3Lj_UVU0",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV"
},
"snippet": {
"publishedAt": "2023-08-02T00:49:25Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "프론트엔드 날개달기",
"description": "이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/5VxdeXfh0Ew/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/5VxdeXfh0Ew/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/5VxdeXfh0Ew/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2023-08-02T00:49:25Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "43QR8bjR_vFv9hESTgXLuHmgx0k",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK-owEPYrrEOBuSLE2VJ50Ph"
},
"snippet": {
"publishedAt": "2021-04-10T15:44:39Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "IT & Tech",
"description": "",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/Jg3FFBLyhK0/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2021-04-10T15:44:39Z"
}
},
{
"kind": "youtube#searchResult",
"etag": "6YZBUrQ0ChwTyAd8y0iblUgGUfs",
"id": {
"kind": "youtube#playlist",
"playlistId": "PLlaP-jSd-nK-nRWstWs_MvCWhVHb7Auuc"
},
"snippet": {
"publishedAt": "2022-01-19T16:14:47Z",
"channelId": "UCZ30aWiMw5C8mGcESlAGQbA",
"title": "입문자를 위한, ES6+ 최신 자바스크립트 강의",
"description": "자바스크립트 #강의 #강좌 안녕하세요. 짐코딩입니다 💪 자바스크립트 입문 강의를 무료전환 하게 되어 안내해 드립니다. 【무료전환 ...",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/z_o638sr5s0/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/z_o638sr5s0/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/z_o638sr5s0/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "짐코딩 GYM CODING",
"liveBroadcastContent": "none",
"publishTime": "2022-01-19T16:14:47Z"
}
}
]
}일단 눈에들어오는것은 channelId와channelTitle, videoId, thumbnails의 url인데
동영상에 어떻게 접근해야할지 동영상을 틀어보니 아래와같은 url이 나왔다.
# 유튜브 동영상 재생시 주소
https://www.youtube.com/watch?v=3wkpQziMLxI&ab_channel=MBCNEWS
https://www.youtube.com/watch?v=aXi1H_4ncvs&ab_channel=%EC%A7%90%EC%BD%94%EB%94%A9GYMCODINGvideoId만으로도 데이터를 조회할 수 있을꺼같아서 찾아보니 v를 사용해서 videoId를 조회할 수 있었다.
조회하면 위와같은 주소로 변경된다.
https://www.youtube.com/watch?v=videoId
흠 ..
검색시의 데이터와 LMS에서 학생들에게 어떤기준으로 랜덤하게 보여줄지를 모르곘다.