이전 포스팅에서 조사했던것 처럼 Twitch의 채팅을 끌어오고 싶은 마음에  Twitch API를 이용하여서 해당 문제를 해결하고 싶어서 간단한 조사를 해보았다.

해당 페이지가 Twitch API의 문서 페이지이다.

채팅을 불러오는 방법은 생각보다는 간단하게 흘러갔다.

인덱스에

Embedding Chat

을 치고 들어가면

<iframe src="https://www.twitch.tv/embed/<channel>/chat?parent=<parent>"
        height="<height>"
        width="<width>">
</iframe>

으로 간단하게 표현 가능하게 되어 있다.

매개변수에 대해서는 위와 같이 설정되어져 있다.

channel의 이름은 흔히 방송 채널로 들어가면 주소를 보면 알수 있는 닉네임을 가리킨다.

보통 twitch.tv/<채널명> 으로 구성되어 있다.

하지만 일일이 유저가 트위치로 가서 찾는것은 이상하다고 생각하여서 알수 있는 방법이 없을까 조사를 해보니

Twitch API Reference

가 있어서 살펴보니

Search Channels

라는 기능을 사용하면 트위치에서 검색 기능과 같은 기능을 사용할수 있어서 해당기능을 사용하고자 합니다.

레퍼런스를 살펴보면 사용 방법은

curl -X GET 'https://api.twitch.tv/helix/search/channels?query=loserfruit' \
-H 'Authorization: Bearer 2gbdx6oar67tqtcmt49t3wpcgycthx' \
-H 'Client-Id: wbmytr93xzw8zbg0p1izqyzzc5mbiz'

의 데이터를 보내면 결과로

{
  "data": [
    {
      "broadcaster_language": "en",
      "broadcaster_login": "loserfruit",
      "display_name": "Loserfruit",
      "game_id": "498000",
      "game_name": "House Flipper",
      "id": "41245072",
      "is_live": false,
      "tag_ids": [],
      "tags": [],
      "thumbnail_url": "https://static-cdn.jtvnw.net/jtv_user_pictures/fd17325a-7dc2-46c6-8617-e90ec259501c-profile_image-300x300.png",
      "title": "loserfruit",
      "started_at": ""
    },
    ...
  ],
  "pagination": {
    "cursor": "Mg=="
  }
}

의 데이터가 응답한다고 한다

여기서 의문이 인증과 클라이언트 id인데

클라이언트 id 의 경우는 twitch developers에 로그인을 한뒤에

오른쪽 위의 Yout Console을 클릭해서 들어가보면

와 같은 창이 나오는데 응용 프로그램을 등록을 한뒤에 관리버튼으로 들어가면 클라이언트 아이디를 확인할수 있다.

인증의 경우에는

의 마지막을 선택해 들어가서 보면

인증을 얻는 방식의 예제를 살펴보면

curl -X POST 'https://id.twitch.tv/oauth2/token' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-d 'client_id=<your client id goes here>&client_secret=<your client secret goes here>&grant_type=client_credentials'

으로 통신을 하게 되면

{
  "access_token": "jostpf5q0puzmxmkba9iyug38kjtg",
  "expires_in": 5011271,
  "token_type": "bearer"
}

의 데이터를 받아서 엑세스 토큰을 구할수 있다.

그런데 여기서도 알수 없는게 하나 존재하는데 그것은 클라이언트 시크릿이라는 것인데

그것은 위의 콘솔 페이지로 들어가서

등록한 응용 프로그램에 들어가면 클라이언트 시크릿을 생성하는 것이 가능해진다.

가볍게 postman으로 토큰을 얻고 스트리머 류제홍을 검색을 하게 되면

여러 검색결과가 나오지만

{
    "data": [
        {
            "broadcaster_language": "ko",
            "broadcaster_login": "wpghd321",
            "display_name": "류제홍_",
            "game_id": "21779",
            "game_name": "League of Legends",
            "id": "128035304",
            "is_live": false,
            "tag_ids": [],
            "tags": [
                "한국어"
            ],
            "thumbnail_url": "https://static-cdn.jtvnw.net/jtv_user_pictures/adb62723-be04-4b89-bae9-15c8ac9ecf54-profile_image-300x300.png",
            "title": "야심한새벽",
            "started_at": ""
        },

와 같이 broadcaster_login으로 아이디를 확인 할 수 있다.

개요

조금 시간이 지났지만 Twitch라는 스트리밍 사이트의 화질이 안좋아지고 나서 몇몇 인터넷 방송인들이 youtube와 twitch를 동시방영을 하는 경우가 생기기 시작한 시점에서

youtube에서 화질이 좋은 버전으로 보면 1080p로 좋은 화질로 시청하는것이 가능하지만 치명적인 약점으로 방송과 채팅간의 딜레이가 상당히 길기 때문에 실시간 소통이라는 느낌을 받지 못한다.

그렇다고 해당 약점을 해결하고자 Twitch에서 시청을 하기에는 720p는 확실히 1080p에 비해서는 화질이 너무 안좋아서 고화질 게임을 할때 문제가 발생한다.

그렇기 때문에 youtube영상으로 보면서 twitch의 댓글을 사용하는 식으로 고화질로 사용하거나

VPN을 사용해서 해외 서버로 접속해서 해외 ;트위치의 서비스를 이용하는 방식으로 우회 이용하는 방식으로 나름 고화질의 서비스를 받기 위해 이런 저런 방법을 사용을 한다.

VPN을 제외한 youtube와 twitch의 동시에 사용하는 방법의 경우에 여러창을 사용하는 불편함이 있기 때문에

한번 둘의 서비스를 같이 사용하는 방법이 있으면 좋지 않을까에서 해당 토이 프로젝트를 진행해보고자 한다.

youtube API의 경우에는 google cloud 서비스를 이용

로그인을 한뒤에 오른쪽 위를 보면 콘솔 버튼을 클릭하게 되

여러 서비를 이용하는 것이 가능하다.

API 및 서비스를 클릭해서 찾아보면 youtube 관련 API는 총 3개 존재한다.

왼쪽 탭의 API 및 서비스 아래에 존재하는 사용자 인증 정보를 통해서 API키 및 OAuth 2.0 클라이언트 ID를 만드는것이 가능하다.

기본적으로 API키만 필요하지만 경우에 따라서 OAuth 2.0 클라이언트 ID가 필요한 케이스도 존재하니 필요에 따라서 생성하여 사용하면 될 것 같다.

사족을 끝내고 다시 youtube로 들어가면 google에서 자세한 라이브러리를 제공하고 있기 때문에 필요에 따라서 찾아 사용하면 될 것 같아 보인다.

이번에 내가 필요한 기능은 youtube의 필요한 채널이 생방송 중인지 체크를 할 필요가 있기 때문에 여러 기능을 찾아 보니 구현 가능한 흐름으로는

1. [검색 기능]을 통해
2. 알고 싶은 채널의 [채널 ID]를 구한 뒤
3. 해당 [채널 ID]를 이용해서 해당 채널이 생방송 중인지 확인
4. 검색하는 과정에서 생방송의 [비디오 ID]를 검색

해당 흐름을 통해서 원하는 기능을 구현하는 것이 가능할것으로 생각된다.