インタラクティブなVJ配信プラットフォーム「VJest」を作りました

インタラクティブなVJの視聴体験ができるVJ配信プラットフォームを作りました。
「VJest(ブイジェスト)」といいます。
どんなものかを説明します。

どんなものか

観客はブラウザからVJを動かすことができます。

vjestイメージ

VJestの視聴ページには、いくつかのボタンとフェーダーが付いています。
観客がこれを触ると、VJに操作データが飛びます。
VJ配信者は来たデータに反応するようVJをプログラムしておきます。
すると、観客は自分の操作でリアルタイムにVJを動かすことができます。・・・楽しい💃 !!

システム構成

インタラクティブな通信を実現するWebRTC

映像・音声および操作信号のやりとりには、WebRTCの通信を使っています。そのため、非常に低遅延でのインタラクティブな通信が可能となります。
TwitchやYouTube Live、Instagramなどの一般的なライブ映像配信サービスでは、数十秒単位の遅延が発生するため、このようなインタラクティブな体験はできません。

VJに送信される情報はOSC

VJ構成図

観客の操作信号は以下のフローで、OSC通信として送信されます。

  1. 観客の操作はWebRTCのDataChannelで送信されます。
  2. この信号は、VJがローカルに立てたWebSocketサーバーに送信されます。
  3. WebSocketサーバーはこの信号を、OSCというUDPの通信規格に変換します。
  4. VJは、OSCを受けて変化するVJをプログラムしておくことで、観客の操作をVJにリアルタイムに反映させることができます。

配信の仕方

VJの画面に入ると、このような設定パネルが表示されます。
VJ配信者パネル

STEP1~5に従って、設定を進めます。
STEP3のWebSocketサーバーは、こちらのGitHubリポジトリからダウンロードし、ターミナルから以下を実行してください。

$ node server.js

成功すると、「WebSocket server is listening...」と表示され、受信の準備が整います。

このWebScoketサーバーは、ブラウザから送信された信号をOSC信号に変換します。

変換した信号はすべてターミナル上に表示されます。

詳細はGitHubのREADMEをご確認ください。

VJの作り方

まずは、配信者ページで生成した視聴者用URLを別タブで表示し、OSC通信の試験をしてみてください。

ターミナルにデータが表示されていれば、OSC変換は成功しています。

次に、TouchDesignerやopenFrameworksなど、お好みの環境でOSCの確認をしてみてください。UDPポートは8000番です。

確認ができれば、OSCに合わせたVJを作ってみてください!

ステレオで楽しむために

ステレオで視聴するには、Firefoxでの視聴が必要です。

Firefox以外のブラウザで視聴用ページを開くと、FireFoxの案内が表示されます。

firefox_recommend

(VJestの由来)

名前の由来についてです。

VJをCastするので「VJst」とか・・・? これを発音するとブイジェストになるな、、、じゃ「VJest」で・・・!という適当な感じです。。。。

今後の展望

今後は以下の機能を作っていく予定です。

  • 操作パネルUIの変更機能(VJがルームを作成する際に、操作パネルUIを決めることができる)
  • 観客がルーム一覧から、入りたいルームを選ぶ機能
  • DJとVJのコラボ配信機能
  • electronによるデスクトップアプリを作り、WebSocketサーバーを立てる手間を不要に

さいごに

夢はalgoraveというイベントに出ることなので、

twitterで作品を投稿したり、VJestでVJ配信していって腕を磨こうと思います。

なにかコメントやバグ報告があれば、twitterのDMやリプでお願いします。。