OculusQuestで動くリモートデスクトップアプリを作る（Unityゆるふわサマーアドベントカレンダー2019）

## はじめに
OculusQuestでWebRTCを使えるらしいという情報をキャッチしたので、実際に使えるかどうかOculusQuestで動作するリモートデスクトップアプリを作って確かめてみましょう！

成果物のソースコードは [ここ](https://github.com/shinyoshiaki/quest-rdp) に公開しています。

近いうちにリファクタリングしたいので文中のコードが古くなりそうですが、あしからず

## WebRTCとは
WebRTCはクライアント端末同士で動画、音声、バイナリなどの様々なデータをP2Pで送受信できるようにするブラウザ発の技術です。ブラウザ発の技術ではあるものの、様々なネイティブ環境向けの実装が開発されています。今回は、Unity向けのWebRTCプラグインである、`webrtc_unity_plugin` を使って開発を進めていきます。
WebRTCについて詳しく知りたい方は[この記事](https://gist.github.com/voluntas/67e5a26915751226fdcf)が参考になると思います。本記事ではあまり詳しく説明しません。

## WebRTCプラグインのビルド
Unity用のWebRTCプラグインはアセットストア上でも販売されていますが、それらはおそらく`webrtc_unity_plugin`がベースとなっています（買ってないのでわかりません！）。自分の場合はお金をかけたくなかったので、自分でソースコードからビルドしました。ビルド方法は[このブログ](http://hammmm.hatenablog.com/entry/2018/03/03/233629)が詳しいです。このブログの筆者が`webrtc_unity_plugin`のビルドした[成果物](http://hammmm.hatenablog.com/entry/2018/04/23/233814)も配布しているのでそれを使うのもありでしょう(私のリポジトリ内にあるやつを持っていてもらっても構いません)。
ちなみに今回はデバッグをしやすくするために、android用とwindows用の`webrtc_unity_plugin`を併用しています。windows用のdllはソースコードのリポジトリに同梱しています。

## 構成
今回作成したリモートデスクトップシステムの構成を示します。

- 配信側(Windows/Linux/Mac) : `Electron + WebSocket + WebRTC`

- クライアント側(OculusQuest,OculusRift) : `Unity + WebSocket + WebRTC`

本システムでは、スクリーンキャプチャをする配信側と、映像を受信し、マウス操作やキーボード操作をするクライアント側に別れます。

WebRTCではP2P接続において発生するうまく接続できない問題を回避するためのNAT越えの手法をの一種であるICEを利用しています。ICEにおいてP2P接続を開始するための作業をシグナリングと呼びます。シグナリングではWebRTCプラグインから渡されるSDPという文字列を何らかの方法で相手のWebRTCプラグインに渡すことでP2P接続が完了します。今回はWebSocketを用いてSDP文字列の交換を行いシグナリングします。

## シグナリング
シグナリングの様子を見るために実際にソースコードを追っていきましょう。

まずは、プラグインの初期化を行います。

### クライアント(C#)
```C#:Assets/QuestView/Scripts/Connect.cs
#if UNITY_EDITOR
#elif UNITY_ANDROID
        AndroidJavaClass playerClass = new AndroidJavaClass("com.unity3d.player.UnityPlayer");
        AndroidJavaObject activity = playerClass.GetStatic<AndroidJavaObject>("currentActivity");
        AndroidJavaClass utilityClass = new AndroidJavaClass("org.webrtc.UnityUtility");
        utilityClass.CallStatic("InitializePeerConncectionFactory", new object[1] { activity });
#endif
```
WebRTCに触る前に、プラグインの初期化処理が必要です。EditorやWindowsには不要でAndroid向けのの作業です。

```C#:Assets/QuestView/WebRTC/Scripts/WebRTC.cs
 void InitPeer()
        {
            List<string> servers = new List<string>();
            servers.Add("stun: stun.l.google.com:19302");
            peer = new PeerConnectionM(servers, "", "");
            peer.OnLocalSdpReadytoSend += OnLocalSdpReadytoSend;
            peer.OnIceCandiateReadytoSend += OnIceCandidate;
            peer.OnLocalDataChannelReady += Connected;
            peer.OnDataFromDataChannelReady += Received;
            peer.OnRemoteVideoFrameReady += OnI420RemoteFrameReady;
            peer.AddDataChannel();
        }
```

ここでは、stunサーバの設定やプラグインのデリゲートへのコールバック登録、それと後で説明するDataChannelの初期化を行っています。コールバックの中身を見ていきましょう。

シグナリングを行う際に、いずれかのノードがOffer、もう一方のノードがAnswerという役割を担います。今回は、配信側がOffer、クライアント側がAnswerの役割をすることとします。

SDPの発行は必ず、Offerが先なので配信側がOfferSDPを発行する様子を見てみましょう。
配信側の実装は `Electron + TypeScript` で行っています。

### 配信側(TypeScript) 

```typescript:electron/src/domain/webrtc/signaling.ts
import WebRTC from "webrtc4me";
import { observer, action } from "../../server/signaling";

export const create = (stream: MediaStream) =>
  new Promise<WebRTC>(resolve => {
    const rtc = new WebRTC({ trickle: true, stream });

    observer.subscribe(({ type, payload }) => {
      switch (type) {
        case "join":
          rtc.makeOffer();
          break;
        case "sdp":
          rtc.setSdp(payload);
          break;
      }
    });

    rtc.onSignal.subscribe(({ type, sdp, ice }) => {
      if (sdp) {
        const payload = type + "%" + sdp;
        action.execute({ type: "offer", payload });
      } else if (ice) {
        const { candidate, sdpMLineIndex, sdpMid } = ice;
        const payload =
          type + "%" + candidate + "%" + sdpMLineIndex + "%" + sdpMid;
        action.execute({ type: "ice", payload });
      }
    });

    rtc.onConnect.once(() => resolve(rtc));
  });

```
ブラウザのWebRTC APIを何度も何度も生のまま触るのは面倒くさいので、WebRTC APIをラップしたユーティリティライブラリが世の中には存在します。有名なのは [simple-peer](https://github.com/feross/simple-peer) ですが、いまいち使いづらいので、自作したユーティリティライブラリ [webrtc4me](https://github.com/shinyoshiaki/webrtc4me) をここでは使っています。
6行目辺りの`const rtc = new WebRTC({ trickle: true, stream })`ではWebRTCのpeerの初期化を行っていますstreamというのがデスクトップの映像のことです。これでシグナリングが完了したら、クライアント側にstreamの映像が流れます。

次に

```typescript:electron/src/domain/webrtc/signaling.ts
observer.subscribe(({ type, payload }) => {
      switch (type) {
        case "join":
          rtc.makeOffer();
          break;
        case "sdp":
          rtc.setSdp(payload);
          break;
      }
    });
```
では、websocketから流れて来るデータを扱っています。クライアント側がこんな感じ`{type:"join"}`のJSONをwebsocketに送ってきたら`rtc.makeOffer()`が実行され、OfferSDPの生成が始まります。生成されたSDPは次の

```typescript:electron/src/domain/webrtc/signaling.ts
rtc.onSignal.subscribe(({ type, sdp, ice }) => {
      if (sdp) {
        const payload = type + "%" + sdp;
        action.execute({ type: "offer", payload });
      } else if (ice) {
        const { candidate, sdpMLineIndex, sdpMid } = ice;
        const payload =
          type + "%" + candidate + "%" + sdpMLineIndex + "%" + sdpMid;
        action.execute({ type: "ice", payload });
      }
    });
```

`rtc.onSignal.subscribe`で受け取れます。SDPを加工して`action.execute({ type: "offer", payload: data })`を実行してwebsocket経由でクライアント側に送り込みます。

クライアント側へと戻ります。

### クライアント側 (C#) 

```c#:Assets/QuestView/WebRTC/Scripts/WebRTC.cs
public void SetSdp(string s)
        {
            var arr = s.Split('%');

            switch (arr[0])
            {
                case "offer":
                    peer.SetRemoteDescription(arr[0], arr[1]);
                    peer.CreateAnswer();
                    break;
                case "answer":
                    peer.SetRemoteDescription(arr[0], arr[1]);
                    break;
                case "ice":
                    peer.AddIceCandidate(arr[1], int.Parse(arr[2]), arr[3]);
                    break;
            }
        }
```
websocket経由で配信側から受け取ったSDPを`peer.SetRemoteDescription`でプラグインに渡し、`peer.CreateAnswer()`でAnswerSDPを生成します。生成されたSDPは先程、デリゲートに登録していたコールバックを実行します

```C#:Assets/QuestView/WebRTC/Scripts/WebRTC.cs
peer.OnLocalSdpReadytoSend += OnLocalSdpReadytoSend;
```


```C#:Assets/QuestView/WebRTC/Scripts/WebRTC.cs
  void OnLocalSdpReadytoSend(int id, string type, string sdp)
        {
            var data = new SendSdpJson
            {
                type = "sdp",
                payload = new Sdp { type = type, sdp = sdp },
            };
            var json = JsonSerializer.ToJsonString(data);
            Debug.Log("OnLocalSdpReadytoSend " + json);
            OnSdpMethod(json);
        }
```

ここで加工したSDPをWebSocket経由で配信側に送ります。

配信側にもどります。

### 配信側 (TypeScript) 

```typescript:electron/src/domain/webrtc/signaling.ts
observer.subscribe(({ type, payload }) => {
      switch (type) {
        case "join":
          rtc.makeOffer();
          break;
        case "sdp":
          rtc.setSdp(payload);
          break;
      }
    });
```

クライアント側から`{type:"sdp",payload:sdp}`こんな感じのJSONが届くのでこれを`rtc.setSdp(payload)`でWebRTCライブラリにSDPを渡します。するとまた

```typescript:electron/src/domain/webrtc/signaling.ts
rtc.onSignal.subscribe(({ type, sdp, ice }) => {
      if (sdp) {
        const payload = type + "%" + sdp;
        action.execute({ type: "offer", payload });
      } else if (ice) {
        const { candidate, sdpMLineIndex, sdpMid } = ice;
        const payload =
          type + "%" + candidate + "%" + sdpMLineIndex + "%" + sdpMid;
        action.execute({ type: "ice", payload });
      }
    });
```

`rtc.onSignal.subscribe` が発火するのでこれまでの作業が繰り返されます。何サイクルか繰り返すと接続が完了します。接続が完了すると、接続完了のコールバックが走ります。

- 配信側

```typescript:electron/src/domain/webrtc/signaling.ts
rtc.onConnect.once(() => resolve(rtc));
```

- クライアント側

```C#:Assets/QuestView/WebRTC/Scripts/WebRTC.cs
 void InitPeer()
        {
            ~~~
            peer.OnLocalDataChannelReady += Connected;
            ~~~
        }

 public void Connected(int id)
        {
            var data = new RoomJson();
            data.type = "connect";
            data.roomId = roomId;
            var json = JsonUtility.ToJson(data);
            OnConnectMethod(json);
        }

```

これでシグナリングは完了しました。長かったですね。説明はかなり端折ってるので、詳しい部分はソースコードを見ていただけたらと思います。
シグナリングが終わったらようやく次はリアルタイム映像を流します。

##映像
配信側でPeerを作るときに映像(stream)を予め`new WebRTC({ trickle: true, stream })`こんな感じで設定していたので、接続が完了したら、配信側はクライアント側へ映像と音を送り始めます。
映像はYUV420形式でフレーム情報を受け取れるそうですが、このへんは全く詳しくないので、ほとんど[このブログ](http://hammmm.hatenablog.com/entry/2018/04/23/233814)の内容をなぞっただけです。バッファリングしてる部分が遅延に影響していたので、そこだけ消して使いました。

```C#:Assets/QuestView/Scripts/WebRtcVideoPlayer.cs
    void Start()
    {
        tex = new Texture2D(2, 2);
        tex.SetPixel(0, 0, Color.blue);
        tex.SetPixel(1, 1, Color.blue);
        tex.Apply();
        GetComponent<Renderer>().material.mainTexture = tex;
        connect.OnRemoteVideo += OnI420RemoteFrameReady;
    }

    public void OnI420RemoteFrameReady(int id,
     IntPtr dataY, IntPtr dataU, IntPtr dataV, IntPtr dataA,
     int strideY, int strideU, int strideV, int strideA,
     uint width, uint height)
    {
        FramePacket packet = frameQueue.GetDataBufferWithoutContents((int)(width * height * 4));
        if (packet == null)
        {
            Debug.LogError("OnI420RemoteFrameReady: FramePacket is null!");
            return;
        }
        CopyYuvToBuffer(dataY, dataU, dataV, strideY, strideU, strideV, width, height, packet.Buffer);
        packet.width = (int)width;
        packet.height = (int)height;
        framePacket = packet;
    }

    void Update()
    {
        ProcessFrameBuffer(framePacket);
    }

    private void ProcessFrameBuffer(FramePacket packet)
    {
        if (packet == null)
        {
            return;
        }

        if (tex == null || (tex.width != packet.width || tex.height != packet.height))
        {
            Debug.Log("Create Texture. width:" + packet.width + " height:" + packet.height);
            tex = new Texture2D(packet.width, packet.height, TextureFormat.RGBA32, false);
        }

        tex.LoadRawTextureData(packet.Buffer);

        tex.Apply();
        GetComponent<Renderer>().material.mainTexture = tex;
    }
```

OnI420RemoteFrameReadyをデリゲートに登録して、OnI420RemoteFrameReadyでフレーム情報を加工して、ProcessFrameBufferでテクスチャにしています。

# マウス、キーボード操作
最初の方で言及した`DataChannel`はここで使います。DataChannelはWebRTCを介して任意のデータをやり取りするWebRTCの機能のことです。本システムでは、VR内のレーザポインタ、バーチャルキーボードの値をDataChannelを介して配信側（PC）へと送信します。

- クライアント側

`マウス`

```C#:Assets/QuestRdp/Scripts/QrdpMouseControll.cs
 public void SendMove(float x, float y)
    {
        var data = new MouseMove
        {
            type = "move",
            payload = new MouseMovePayload
            {
                x = x,
                y = y
            }
        };
        var json = JsonSerializer.ToJsonString(data);
        connect.Send(json);
    }

```

`キーボード`

```c#:Assets/QuestRdp/Scripts/QrdpMonitorManager.cs
class Input
    {
        public string type;
        public string payload;
    }

    void OnInput(string s)
    {
        var data = new Input
        {
            type = "key",
            payload = s
        };
        var json = JsonSerializer.ToJsonString(data);
        connect.Send(json);
    }

```


    
- 配信側

```typescript:electron/src/server/robot/index.ts

import robotjs from "robotjs";
const load = (window as any).require;
const robot: typeof robotjs = load("robotjs");

export default function remote() {
  const screenSize = robot.getScreenSize();
  const height = screenSize.height;
  const width = screenSize.width;

  moveMouse.subscribe(p => {
    robot.moveMouse(width * p.x, height * p.y);
  });

  clickMouse.subscribe(() => {
    robot.mouseClick("left");
  });

  keyTap.subscribe(s => {
    robot.keyTap(s);
  });
}

```

マウスとキーボードの操作はrobotjsというNode.js用のライブラリを用いて実現しています。

## まとめ

OculusQuestでWebRTCを使えるらしいという情報をキャッチしたので、実際に使えるかどうか、リモートデスクトップアプリを実装して確かめてみました。結果としては十分使えそうな気がしました。

## あとがき
花譜、”ファーストライブ不可解” すごかったですね！今度VRライブに出るらしいので楽しみです！！