소개

YouTube Data API를 사용하여 YouTube 채널에 업로드된 동영상을 내장 HTML 형식으로 가져왔습니다.

JavaScript의 Youtube 용 라이브러리도 몇 가지있는 것 같습니다만,
이번에는 URL을 직접 치는 형태로 구현했습니다.

GET URL과 JSON 사양은 아래를 참조했습니다.
ぇぺぺrs. 오, ぇ. 코 m / 토츠 베 / v3 / cs

환경은 다음과 같습니다.
macOS Catalina 10.15.6
Node.js v14.8.0
(Node.js Library)request 6.14.7

코드 및 실행 결과

코드는 다음과 같습니다.

youtube.js

const request = require('request');

const URL_YOUTUBE_API='https://www.googleapis.com/youtube/v3/';
const YOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY;
const MY_YOUTUBE_CHANNEL_ID=process.env.YOUTUBE_CHANNEL_ID;
const URL_YOUTUBE_CHANNELS=URL_YOUTUBE_API + 'channels?key=' + YOUTUBE_APP_KEY + '&part=snippet,statistics,contentDetails&id=' + MY_YOUTUBE_CHANNEL_ID;
const URL_YOUTUBE_PLAYLISTITEMS=URL_YOUTUBE_API + 'playlistItems?key=' + YOUTUBE_APP_KEY + '&part=snippet,contentDetails&playlistId=';
const URL_YOUTUBE_VIDEOS=URL_YOUTUBE_API + 'videos?key=' + YOUTUBE_APP_KEY + '&part=player&id=';

var get_yotube_options_base = {
    url: '',
    method: 'GET',
    json: true
};

var html_data = [];

var get_youtube_options_1 = get_yotube_options_base;
get_youtube_options_1.url = URL_YOUTUBE_CHANNELS;
request(get_youtube_options_1, function (error, response, ch_info) {

    var playlistId = ch_info.items[0].contentDetails.relatedPlaylists.uploads;
    var get_youtube_options_2 = get_yotube_options_base;
    get_youtube_options_2.url = URL_YOUTUBE_PLAYLISTITEMS + playlistId;
    request(get_youtube_options_2, function (error, response, playlist_info) {
        var videoId_list = [];
        playlist_info.items.forEach(item => {
            videoId_list.push(item.snippet.resourceId.videoId);
        });
        var get_youtube_options_3 = get_yotube_options_base;
        get_youtube_options_3.url = URL_YOUTUBE_VIDEOS + videoId_list.join(',');
        request(get_youtube_options_3, function (error, response, video_info) {
            video_info.items.forEach(item => {
                html_data.push(item.player.embedHtml);
            });
            console.log(html_data);
        });
    });
});

실행 결과는 다음과 같습니다.
'XXXXXXXXXXXXX' 부분은 자신의 정보로 다시 작성해 주세요.

% export YOTUBE_APP_KEY=XXXXXXXXXXXXX
% export YOUTUBE_CHANNEL_ID=XXXXXXXXXXXXX
% node youtube.js
[
  '<iframe width="480" height="270" src="//www.youtube.com/embed/uRML4cHJKsE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
  '<iframe width="480" height="270" src="//www.youtube.com/embed/BuHrzydYE2s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
]

코드 설명

YouTube에 3번 HTTP 요청을 하는 형태입니다.

(첫 번째) 채널 ID에서 재생 목록 ID 가져 오기 => URL : "URL_YOUTUBE_CHANNELS"
(두 번째) 재생 목록 ID에서 동영상 ID 가져 오기 => URL : "URL_YOUTUBE_PLAYLISTITEMS"
(3 번째) 동영상 ID에서 내장 HTML 가져 오기 => URL : "URL_YOUTUBE_VIDEOS"

사전 준비가 필요합니다.
· App Key의 경우,
'Google APIs Console'이라는 사이트에서 게시합니다.

· YouTube Channel ID는 ID를 취득하고 싶은 채널의 페이지에 가서, 소스를 표시=>「CHANNEL_ID」로 캐릭터 라인 검색하면 나옵니다.

아래의 이미지로 말하면 「UCD0it6kq_2HBn3uMACiX_3A」의 부분입니다.


이상입니다.