Youtube data API로 라이브 방송 가져오기

학교 졸업프로젝트를 하는데 기업으로부터 라이브 커머스 기능을 요구받았다. 프로젝트 진행이 후반부에 들어간 상태라 아예 처음부터 라이브 방송을 켜고 송출되도록 하는 건 불가능했다ㅜㅜ 그래서 방법을 찾아보는중에 youtube에서 라이브 방송을 키면 저절로 우리 앱에서 라방이 송출되도록 하는 정도면 괜찮지 않을까? 싶었고 그렇게 진행하기로 했다.

Youtube Data API를 활용하는 블로그들이 몇 있어서 참고했는데 그냥 유튜브 영상이나 영상에 대한 정보(제목같은..) 를 가져오는 예시는 많았지만 "라이브방송"만 가져오는 레퍼런스는 따로 찾지못했다.

그래서 외국 유튜브 영상이랑 공식 문서 보면서 이리저리 테스트해보다가 방법을 알아냈다.
API KEY를 발급받는 과정은 다른 곳에 많이 있으니.. 생략

const fetchData = async () => {
      try {
        const response = await axios.get( `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCbsHYIZwk9pZIMp53ciDjOw&maxResults=5&eventType=live&type=video&key={api키}`); 
        setPlaylist(response.data.items[0].id.videoId)
      } catch (error) {
        console.error(error);
      }
    };

요청을 보내는 부분을 잘 보면 다음과 같이 되어있으니 자신의 상황에 맞게 잘 적용시키면 된다.

channelId : 말그대로 유튜브 채널을 의미(라이브방송을 키는 채널)
maxResults : 결과를 몇 개까지 불러올 것인지 설정
eventType=live : 이 부분이 오직 "라이브" 방송만 가져올 수 있게 하는 포인트
type=video : 데이터의 타입 (영상을 가져올 거니까)
key={api키} : 발급받은 자신의 API키

그리고 라이브 영상이 들어갔으면 하는 위치에 아래처럼 넣어주면 된다.

 <YoutubePlayer
    height={300}
    videoId={playlist}
 />