Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@miwa_maroon

[ビギナー向け]TouchDesignerとYoutubeLiveを連携させてコメント取ってきちゃうよ vol.2

動画の解説

vol1の続きです
実際にAPIを使ってコメントの取得までやっています
画像クリックで飛べます!
thnb_youtube_2.jpg

APIをいじくり倒す

前回vol.1google cloud plattformでAPIのkeyを取得したりしました
つまらない環境設定みたいな感じで大変申し訳ない



ここからはついにYoutube Data APIをいじくり倒して
ライブチャット取得まで駆け抜けるぜ!

今回使うAPIはこいつだあ~!!

1つ目は、
でれでれでん

Youtube Data API

いえーいっていう効果音入ってます
こいつは、YoutubeのAPIの兄貴分てきな役割で、

  • 動画の検索
  • サムネイルの編集
  • 動画のアップロード

などなど
Youtubeに関する 基本的な操作 ができます

その中でも、今回は、前回作ったパラメーターをもとに動画のリストを取得する
https://www.googleapis.com/youtube/v3/videos
を使いやす

API keyで僕こういうものなんですけどって自己紹介したのち
Video Idでこの動画の情報欲しいんですけどっていうと

兄貴が任せい!!

という感じで持ってきてくれます

あにきいい!いつもお世話になります。
取ってきた 情報(items) の中に、
chat id
たるもんがありますのでこいつが大事になるので
こいつを自分の懐にしまいます。

そして2つ目

Youtube LiveStreaming API

ドドン!っていう効果音入ってます。

こいつは、Youtubeの中でも Live を専門に仕切ってる特殊部隊
YoutubeLiveのことは俺に任せろと言わんばかりの機能を持っています

さっき兄貴からもらった
chat id
をAPI keyや
他のパラメーターを一緒に渡すと

  • Liveの始まった時間
  • LiveChatを送った人のアカウント名
  • SuperChat

などなど、 Liveに関する情報(items) ならなんでも持ってきます
さすが特殊部隊

今回は、その中でもLiveChatに関する情報取得する
https://www.googleapis.com/youtube/v3/liveChat/messages
を使い、LiveChatの内容とアカウント名をとってきます

非同期処理とは

具体的にどうTouchDesignerで実装すんねん!
っていうところですが、
TextDATに

TextDAT
import requests

url ='https://www.googleapis.com/youtube/v3/videos'

data = requests.get(url)

#この後にdataというlistに入ってるchat idを取り出す処理を書く

みたいな処理を書いて、
任意のタイミングでこのScriptをRunさせるみたいなことができる

んですが!!!
これだと取得している間、

TouchDesignerが止まってしまいます!!

(ちなみに、上のコードを鬼適当なので動きもしないし正しくもありません)

これは不便すぎる!
それを解決してくれるのが

Web Client DATです

なにそれ、どこにあるんだよ、使ったことないわ
そんな声が聞こえてきそうですが。。。
DATの中でも圧倒的優秀さを誇り
今回のようなAPIを使ってwebの情報を取ってきたり、逆に渡したりなどする処理をすることができます

こいつを使えばTouchDesiignerが止まることがありません!!

え、なんでかって??

それはWeb Client DATが非同期処理だからです。

来ました!非同期処理!!

非同期処理というのは、
あるタスクを実行している最中に、その処理を止めることなく別のタスクを実行できる方式を指します。
API自体が動画を取得している処理の間も、TouchDesigner側の処理を止めなくて済みます!

逆に言うと先ほどのtextDATでRunしていた方は、
APIの処理が完了するまで、TouchDesignerの処理が止まっていた

ということですね。はい。。。

WebClientDATあるある言いたい

ここまでいろいろ説明してきて
ようやくTouchDesignerの画面戻るが、
前回でAPIkeyやidなどをmergeしたDATをWeb Client DATのInputに詰め込むんだけど、
ここで、mergeからノードひぱってきてWeb Client DAT置いて
putting_webclient.jpg

よしurlにAPIも入れたぞ
ほれ!GET!
push_request.jpg

ってやると、
あれ?なんかAPIkeyがダメって言われて取ってこれない、、、
forbidden.jpg

おい!なんでだよー
ってよくなります。

これ Inputが上に入ってるからなんですね。
に入れないとダメみたい。
Input_2.jpg

お気をつけあそばせ

GETした後の処理

chad idを取得するWeb Client DATには
次ようにchat id をほかのtextDATに入れる処理を
WebClientDAT右下の↓ からTextDAT(callback)開いて書きます

webclient_callbacks
# me - this DAT.
# webClientDAT - The connected Web Client DAT
# statusCode - The status code of the response, formatted as a dictionary with two key-value pairs: 'code', 'message'.
# headerDict - The header of the response from the server formatted as a dictionary. Only sent once when streaming.
# data - The data of the response

import json

table = op('chatid')
commentOp = op('comment')

table = op('chatid')

def onConnect(webClientDAT):
    return

def onDisconnect(webClientDAT):
    return

def onResponse(webClientDAT, statusCode, headerDict, data):
    table.clear()
    commentOp.clear()
    tdata = json.loads(data)
    liveStreamingDetails = tdata['items'][0]['liveStreamingDetails']
    if 'activeLiveChatId' in liveStreamingDetails.keys():
        chat_id = liveStreamingDetails['activeLiveChatId']
        table.appendRow(['liveChatId',chat_id])
    return

謎にオペレーター追加されてるけどそれは、 動画見てね
一旦、jsonに変換してそこから検索してtableDATに入れてます

LiveChatのメッセージを取得する処理も2つ目のWebClientDATのcallbackに書いていきます

webclient4_callbacks
# me - this DAT.
# webClientDAT - The connected Web Client DAT
# statusCode - The status code of the response, formatted as a dictionary with two key-value pairs: 'code', 'message'.
# headerDict - The header of the response from the server formatted as a dictionary. Only sent once when streaming.
# data - The data of the response

import json

commentOp = op('comment')

def onConnect(webClientDAT):
    return

def onDisconnect(webClientDAT):
    return

def onResponse(webClientDAT, statusCode, headerDict, data):
    tdata = json.loads(data)
    for item in tdata['items']:
        usr = item['authorDetails']['displayName']
        msg = item['snippet']['displayMessage']
        commentOp.appendRow([usr, msg])
    return

こちらも同じようにjsonに変換して、他のTableDAT(commentって名前の)

WebClientDATにてGETしたあとの処理がこれなわけですね

コメントゲットだぜ

そんなわけでYoutubeAPIを使ってLiveのコメントを取ってくることができました!
ここからビジュアルに起こしていきます
次回vol3で

アデュー

そして、
TouchDesignerでのオンラインイベントの可能性を広げられることができんじゃね?
って思っている方いましたら是非参考にしていただければ

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
2
Help us understand the problem. What is going on with this article?