React 360 で vnc クライアントを作って Oculus Go のブラウザから自分のPCを見る (未完成)

こんにちは

Oculus Go に Mac 用のリモートデスクトップがなかったので (現在: 2018/05/31) なんとかできないかと思って色々やっています。理想的には HMD つけながら無線キーボードでお布団に入りながらコーディングしたいという思いがあります。

でも全然完成までの道のりが見えないので、現状の整理のためのメモを書きます。

とりあえず Oculus Go のブラウザから Mac の画面に ws + vnc で繋がった！目標は布団に入ったままプログラミングしたい。(VR 時の写真も取れるようにしたい) pic.twitter.com/RqVFhqEkmo
— ushumpei (@ushumpei_) 2018年5月25日

(これ以降進展なし)

なんで作ってるんですか？

Oculus Go で使える Mac 用のリモートデスクトップアプリが見つからなかったためです (有料のやつある？)。ブラウザで画面共有できる Web サービスもあるのですが、仕事のコードとか書くことを考えるとローカルネットワークで完結するのが気分的に一番良いんじゃないか？と思ったため作り始めました。（自作すること自体はそれはそれでリスクですが）

Mac にはデフォルトで「vnc」と呼ばれる (?) リモートデスクトップのサーバーが入っているため、それ用にクライアントのコード書いたら良いんじゃないか、ということで vnc 周りを調べつつ作っています。

なんで React 360 なんですか？

Android studio で Android Mobile SDK: C++ 混じってて読めなかった
Unity: 入ってるけど使ったことない
React 360: 既存の知識使ってできる

という消極的な理由からです。 1 週間くらいで終わらせたかったのでがっつり学習する必要があるものは避けました(終わってないけど)。今考えると Unity は空間すでにあるし知見も多いため一番良い気がしてます。

どんな感じで作りますか？

Mac
- 8080 port: http で React 360 のページを返すサーバー
- 5900 port: 標準の vnc サーバー
- 5901 port: websockify というライブラリを使用して WebSocket の 5901 への接続と、 vnc の 5900 への接続をつなぐ

という構成を元に、

同じローカルネットワーク内のブラウザから WebSocket で Mac の vnc サーバーと接続
vnc サーバーから送られてくる画面データを React 360 内の canvas に描画
ブラウザのキー入力やポインター移動イベントをサーバーに通知する

していくように作っています。

できたこと

React 360 の平面オブジェクト (Plane) に canvas を貼り付ける
RFB 3.8 プロトコル (vnc のプロトコル) を実装してサーバーとの接続を確立する
ブラウザでサーバーから画面データを受信する
受信したデータを canvas に描画する

できてないこと

ブラウザのイベントをサーバーに通知する
- ブラウザ -> サーバーへの通信は、初めはいらないと思っていたんですがユーザーのサインインが必要なので、ないとログイン画面を延々とみていなければならなくなります
画面が全更新になっているので差分更新で済むようにしたい

どうします？

RFB プロトコルのコードを整理する
- RFB プロトコルが接続を確立するまでに複数回のやりとりが必要になるのですが、全てのメッセージを長い onmessage で受け取っていろんなフラグで if else と長々と書いているので破綻してる
- ドメインの知識が増えて来たのでちゃんと書いてみたい
- Redux を React 以外の文脈で使ってみたい
- オレオレイベント emitter 消す
React 360 を一旦やめる
- canvas を貼り付けた Plane の取り扱いが不安定すぎるので単純な html として書き直します (PC めちゃくちゃ熱くなるし)
  - React でも良い気がするけど
    - ブラウザ vnc クライアントの vnc.js とかあるっぽいけど

一応リポジトリ: GitHub - ushumpei/VncClient: Vnc client for browser

感想

遊んでないで仕事探す

ushumpei’s blog

生活で気になったことを随時調べて書いていきます。