はじめに

この記事はVRChat Advent Calendar 2018の4日目の記事です。
昨日の記事は@joniburnさんによる、BlenderでVRChat向けアバターの体型を改変するです。

はじめまして。meihei(@app1e_s)です。

VRChat Advent Calendarでは、Unityやモデリング関連の記事が多いだろうなぁと思ったので
ちょっと路線を変えて、バックエンド寄りのことを書いていきたいと思います。

VRChatにはライブ配信を視聴する手段として、VRC_SyncVideoStreamというものが用意されています。
VRC_SyncVideoStreamにライブ配信のURLを設定することで、簡単に視聴することが出来ますが
そこにサーバーのURLを設定し、最終的にライブ配信のURLにリダイレクトすれば
サーバーで色々しても問題なく視聴することが出来ます。

完成形はこんな感じ。

ツイキャス on VRChat pic.twitter.com/m2NzLlYweJ
— 迷える兵士/meihei (@app1e_s) 2018年12月19日

ということで、この記事では「FlaskでツイキャスAPIを叩くサーバーを建てる」「VRChatでライブ配信を視聴する」の２つについて書いていきます。

概要

環境
仕組み
1. Flaskとは？
2. APIとは？
3. HLS(m3u8)とは？
4. VRC_SyncVideoStreamとは？
実装
1. ツイキャスでアプリケーション登録
2. FlaskでAPIサーバー作る
3. VRChatで設定
結果
ソースコード

環境

Python3.6
Unity 5.6.3p1
macOS 10.14

仕組み

1. VRC_SyncVideoStreamから設定してあるURL(Flaskサーバー)にアクセス
2. pythonでツイキャスのsearchAPIを叩いて、特定のカテゴリーの検索結果をもらう
3. 結果から、視聴者数の最も多い配信のURLをとりだす
4. そのURLにVRChat側がリダイレクトするように返す
5. リダイレクトして、VRC_SyncVideoStreamからツイキャスが視聴できるようになる

Flaskとは？

python用の軽量ウェブフレームワークです。
VRChatからアクセスされたときに、プログラムを実行して、実行結果を返すサーバーを
pythonで簡単に書けるもの。と思ってもらえれば大丈夫です。

APIとは？

Application Programming Interfaceの略です。
今回はツイキャスなので、ツイキャスというアプリケーションをプログラム(Flask)から操作したい時に
データのやり取りのルールを決めたインターフェイス(通り門的なもの)です。

こちらはツイキャスのAPIのリファレンスになりますが
単純にRequestに対して、Responseが返ってくると思って見てもらって大丈夫です。

HLS(m3u8)とは？

HLSとは、HTTP Live Streamingの略で、ライブ配信の仕組みについての名称です。
m3u8とは、HLSで使われるファイルフォーマットです。
つまり、そういうライブ配信の仕様があるというだけのことです。

詳しく知りたい人は以下がオススメです。

参考

VRC_SyncVideoStreamとは？

VRC_SDKで用意されているVRC_SyncVideoPlayerの上位互換です。
これをComponentsに追加して、少し設定をするとm3u8も再生できます。
→VRChat内でのライブ配信の視聴を可能にしてくれます。

VRChat 技術メモ帳に詳しい挙動などが載っています。

実装

ツイキャスでアプリケーション登録

APIを叩く用のアプリケーションを登録します。
登録までの手順は、こちらにそって登録していきます。~~(それにしても、ドワンゴのAdvent CalendarでツイキャスAPIの記事…？)~~

そして、そこからClientIDとClientSecretを取り出します。

このプログラムではユーザー単位での利用を想定していないので、ユーザーのアクセストークンを取得する必要もありません。

アプリケーション単位でツイキャスAPIを使う場合、{ClientID}:{ClientSecret}をBase64エンコードし、ヘッダーにAuthorization: Basic {BASE64_ENCODED_STRING}の形式で指定することで使えます。

config.py

import base64

ClientID = "your client ID"
ClientSecret = "your client secret"

BASE64_ENCODED_STRING = base64.b64encode(("%s:%s" % (ClientID, ClientSecret)).encode("utf-8"))

これで、APIを利用するためのキーの設定は完了です。

from config import BASE64_ENCODED_STRING

HEADER = {
    "X-Api-Version": "2.0", 
    "Authorization": "Basic %s" % BASE64_ENCODED_STRING.decode("utf-8")
}

といった形で読み込まれます。

FlaskでAPIサーバー作る

まず、Flaskで簡単なHello Worldをして、それを拡張していきます。

hello.py

from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    return "Hello World"


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

app.route()で、そこにアクセスされた時の処理を書いていきます。
つまり、localhostでサーバーを立てていれば、http://0.0.0.0:5000/にアクセスされたときに、Hello Worldと返します。

では次に、ツイキャスのAPIを叩く関数を作ります。

app.py

from config import BASE64_ENCODED_STRING

BASE_URL = "https://apiv2.twitcasting.tv"
SEARCH_URL = BASE_URL + "/search/lives"

HEADER = {
    "X-Api-Version": "2.0", 
    "Authorization": "Basic %s" % BASE64_ENCODED_STRING.decode("utf-8")
}

def get_hls_url(sub_categorie):
    # TwitCastingのSearch APIを叩く
    res = requests.get(SEARCH_URL+"?limit=25&type=category&context=%s&lang=ja" % sub_categorie, headers=HEADER)
    if res.status_code != 200:
        return res.content
    # 結果からmovieオブジェクトのlistを取り出す
    movies = json.loads(res.text)['movies']
    # 最もトータルの視聴者数の多い配信を選択
    best_movie = sorted(movies, 
                        reverse=True, 
                        key=lambda m: m['movie']['total_view_count'])[0]
    return best_movie['movie']['hls_url']

こちらの通りにパラメーターを用意すると、ツイキャス内でのカテゴリー検索ができ、その結果から最も人気な配信のhls_urlを返すようになっています。

そして、Flaskの方から呼び出せるようにします。

@app.route('/api')
def tc2vrc_api():
    # カテゴリー -> 音楽：弾き語り(女性Vo)
    url = get_hls_url(sub_categorie="music_recite_girls_jp")
    return redirect(url)

これで、http://localhost:5000/apiにアクセスすると、ツイキャスAPIを呼んで、結果のurlにリダイレクトするようになりました。

最後に、ターミナルでpython app.pyと打ってサーバーが建てられれば完成です。

VRChatで設定

公式ドキュメントにStarter Guideがあります。
一度この通りに作って、YouTube liveでライブ配信が流せるか確認します。

上手くいったら、Video Search Rootの中を空にし、VideosのURLに先程立てたサーバーの
URLを貼ります。

サーバーのURLは、VRCとサーバーが同じPC上で動いているならhttp://localhost:5000/api
違うPC(同じLAN上)ならば、そのPCのローカルIPアドレスを確認し、http://{local-IP-address}:5000/apiで設定します。
IPアドレスの確認方法はMacならこちら、Winならこちら。

これで、VRChatでツイキャスを視聴できるようになりました。

結果

サーバー側は以下のようなログが表示され、VRCからアクセスされている事がわかります。

そして、ワールド側ではツイキャスから弾き語りの配信を流すということができました。
（ラジオ配信なので、配信感があまり感じられないですが。）

ツイキャス on VRChat pic.twitter.com/m2NzLlYweJ
— 迷える兵士/meihei (@app1e_s) 2018年12月19日

ツイキャon VRChat 2 pic.twitter.com/wk4JE7wIWu
— 迷える兵士/meihei (@app1e_s) 2018年12月19日

ソースコード

こちら

その他

今回はツイキャスでやりましたが、それ以外のライブ配信サービスを使いたい、プログラム書きたくないって人はYUKIMOCHI VRChat HLS Bridgeというのがオススメです。

私の記事は以上になります。
明日のVRChat Advent Calendarは@akiakishitaiさんの「はじめてのシェーダー体験談」です。お楽しみに。

Flask+ツイキャスAPI、VRChatでライブ配信を見る