takeda_san’s blog

KotlinとVRを頑張っていく方向。

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

やること

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

成果発表

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


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

つかったもの

websocketサーバ

Unityアプリケーション

  • websocket-sharp
    Unityでwebsocketやる用

  • 前回まで作ったScene

takeda-san.hatenablog.com

作業記録

おためし動作確認

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

UnityアプリをSpringbootのWebSocketでつないでみた - SSSSLIDE

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が超低遅延になった話 – たまには叫びたいこともある – Medium

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

vrlive.party

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

ひらがな並び替えるやつ

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

できたもの

f:id:takeda_san:20180212191336g:plain

これを、Unity上で映せばそれっぽいものが出来上がる。
(最初の動画参照)

ここから遊べます。
(監視とかしてないので、落ちてたらすいません)
http://35.203.14.233:8080/

コードはここに置いてあります。

github.com

反省

結局UnityもVRもあんまり関係なくなってしまった感がある…
この文字をSteam VR上から動かせれば、さらに楽しくなりそうなので、もう少しバージョンアップ予定。