4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-31

#動画の解説
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でのオンラインイベントの可能性を広げられることができんじゃね?
って思っている方いましたら是非参考にしていただければ

4
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?