バーチャルユーチューバーになりたいその２～websocketを添えて～

やること

WebアプリケーションのUIからUnityアプリケーションのオブジェクト操作できるようにする。
YoutubeLive中のUnityアプリケーションに外から干渉出来たら楽しそうじゃないかって思いました。
通信の方法として、websoketを使うんだけれどもYoutubeLiveを通したときの遅延具合はどんなもんかも確認してみる。

成果発表

今回もおじさんが登場しますので、ご注意ください。

生放送向けの機能をつくりました

つかったもの

websocketサーバ

Spring Boot
Spring MVC
いつもの
spring-boot-starter-websocket
Springでwebsocketやる用
uDesktopDuplication:title Unity上でデスクトップを表示できる。
GitHub - hecomi/uDesktopDuplication: Desktop Duplication API implementation for Unity (only for Windows 8/10)

Unityアプリケーション

websocket-sharp
Unityでwebsocketやる用
前回まで作ったScene

takeda-san.hatenablog.com

作業記録

おためし動作確認

ここを参考にしました。
ブラウザからのアクセスして使う例としてSTOMPのサンプルがあったんだけど、今回はUnityがあるから使えないという認識。
コード見る限りSTOMPのほうがコード量が少なくて楽そう…

http://sssslide.com/speakerdeck.com/masanori840816/unityapuriwospringbootfalsewebsocketdetunaidemita

SpringでSTOMPを使わずにWebSocket - vaguely

あと、当たり前すぎて書いてないんだろうけどスクリプトを空のオブジェクトにかなんかにアタッチして動作確認が必要…
確かにひよこ本でも、さんざんやったね。
で、Unityアプリケーションから、websocketサーバのメッセージを受け取れるか確認する。

f:id:takeda_san:20180208210515p:plain

ほぼ、そのまんまでテキストデータのやり取りができた。

座標データを送る

つぎはオブジェクトのデータをやり取りしよう。
といっても同じテキストデータでjson形式でやりとりなんだけどもね。

Unity側のスクリプトをこんな感じで書き換えて。

[Serializable]
public class Item
{
    public float x;
    public float y;
    public float z;
}

public class ClientExample : MonoBehaviour
{

    private WebSocket ws;
    private Item item;

    private void Start()
    {
        ws = new WebSocket("ws://localhost:8080/ws");
        item = JsonUtility.FromJson<Item>("{ \"x\": 0, \"y\": 0, \"z\": 0 }");

        // 接続開始時のイベント.
        ws.OnOpen += (sender, e) =>
        {
            Debug.Log("Opended");
        };
        // メッセージ受信時のイベント.
        ws.OnMessage += (sender, e) =>
        {
            Debug.Log("Received " + e.Data);
            item = JsonUtility.FromJson<Item>(e.Data);
            Debug.Log(item.x+ ":" + item.y+ ":" + item.z);
        };
        // 接続.
        ws.Connect();

    }

    private void Update()
    {
        transform.Translate(item.x * 0.08f, item.y, item.z);

        if (Input.anyKey)
        {
            ws.Send("Unityから疎通テスト");
        }
    }

    private void OnDestroy()
    {
        ws.Close();
    }

実行、そして、Webから入力を受け取って等速直線運動をする何か。
壮大な遠回りである。
f:id:takeda_san:20180208221324g:plain

これでWebページから入力をUnityのアプリケーションに伝えられるようになった。

やりたいこと

WebページにYoutubeLiveを埋め込んで、UIつけてUnityアプリケーション内のオブジェクトを動かせたら楽しいだろうなぁと、妄想していたのですが動画配信時の遅延のことを忘れていました。
YoutubeLiveの遅延は、超低遅延設定で3～5秒ぐらいとのこと。

YouTube Liveが超低遅延になった話

普通にコメントを拾ってお話しする分には、十分すぎるぐらいに早いが今回やろうとしていたことは無理そうね。
そもそも、こういう用途は専用のクライアントを事前に配布→サーバで映像にしたものを配信するのが大正解な気がする。
VRLIVEとかって、そんな感じっぽいよね。

vrlive.party

でもでも、アプリインストールとかしなくて、もうちょっと気楽に参加したいし、サーバの規模も最小限にしたい。
というわけで、数秒遅延してもそんなに気にならないようなものを考える。

ひらがな並び替えるやつ

なんか昔に、みんなでよってたかってアルファベットを並び替えるFLASHゲームがあったのを思い出した。
あれをちょっと変えて、ひらがなで実装してみよう。
頑張ってメッセージを作ろうとすると妨害されてムキになって、人生の貴重な数十分を無駄にした思い出がある。
これ、生配信の背景とかでやったら、意外にたのしいんじゃなかろか。
放送禁止用語になっちゃう、アッ、アッみたいなハラハラドキドキ。