TouchDesignerを用いたオンラインDJ/VJイベントの開催方法

現在、コロナウイルスの影響で、音楽イベントなどがほとんど中止や延期になっていますが、その中でもみんなで楽しめる方法がないか模索しています。

∀RroWsはDJ/VJ/LJなどでパフォーマンスや空間演出などをするユニットなので、オンラインでも同様なことがある程度できないか検討しました。

先週末に[zoom](https://zoom.us/)+[TouchDesigner](https://derivative.ca/)+YouTubeのLive配信の方法でオンラインDJ/VJを[@sleepJamさん](https://twitter.com/sleepJam)とやってみました。
思いの外簡単に実現できたので、そのやり方をまとめたいと思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://t.co/TcoqTHNSVz">https://t.co/TcoqTHNSVz</a><br>今日の配信、後からでも見れます。OrangeJamさんの映像炸裂してますね。∀RroWsの持ち曲増やさないと。また次回はLiveCodingとかやります！zoom+YouTube配信でやっていますが、メンバー増やしていきたい。</p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1246806083164753920?ref_src=twsrc%5Etfw">April 5, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

どんなやり方がいいか検討しましたが、今のところ、TouchDesignerの映像をカクつかずに実現できるのが、zoom(DJの音共有)+TouchDesigner(VJ映像＋zoomの映像活用)+YouTubeLive配信になります。

zoomはPro以上の有料ライセンスを買うと、そのままYouTubeのLiveなどの配信も可能ですが、VJ映像をこだわりたい場合は、zoomの映像をTouchDesignerで加工して、TouchDersignerからOBSなどを介してYouTubeLive配信するのが良さそうです。zoomの画面共有でVJ映像を共有するとカクカクするし、音を共有できません。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Zoomの配信テスト。細かい映像は特にカクカクしますね。これは仕方なさそう。 <a href="https://t.co/oWZo1JcUPQ">pic.twitter.com/oWZo1JcUPQ</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1246468621699665920?ref_src=twsrc%5Etfw">April 4, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
# ①zoomによるDJの音源(+DJ映像)の共有
zoomを使うとPC内で鳴らしている音、DJしている映像(Webカメラ映像)、またはTraktorなどのPC画面の共有が可能です。
zoomではDJが画面共有をします。このときPC内の音も共有します。

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/d5d69ecb-3c03-2f9a-f840-3876af8ccef9.jpeg)
画面を共有でデスクトップなり、TraktorなどDJソフトウェアの画面なりを共有し、詳細のコンピューターの音声を共有にチェックを入れます。

これで画面共有している人のPCの音が参加者に画面と一緒に共有されます。
しかも、ホストだけでなく、参加者でも画面とPC内の音をセットで共有ができるので、つまり複数のDJで音を切り替えることができます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">zoomでpcの音声共有は参加者もいけますね。画面共有する形になるけど。なので、DJはzoom内に複数いれば交代できる。VJはこの共有映像や参加者映像をTouchDesignerでVJ映像と組み合わせて加工してYouTube配信などすればいけますね。昨日の仕組みはこれのはず。VJは切り替えできず、個別配信になるか。 <a href="https://t.co/zTO4ibn9qR">pic.twitter.com/zTO4ibn9qR</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1247147113605033985?ref_src=twsrc%5Etfw">April 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

注意ですが、zoomは無料でもできますが、40分しばりがあるので、ホストは制限のなくなるPro以上のライセンスがあった方が良いです。2000円/月のコストになります。参加者は無料でも大丈夫です。

# ②TouchDesignerによる映像の加工
この画面と音をTouchDesignerで活用します。zoom画面をScreenGrabTopでキャプチャしてワイプなど組み込んだ映像を作り、NDIoutTopでTouchDesignerから映像を出力します。
なお、キャプチャするため、VJはデュアルディスプレイであると良いです。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/3b6569bb-b67f-05e6-06d8-519a068cef2a.jpeg)

TouchDesignerのコミュニティに情報がありますが、Topの映像をNDItoolsを使うとOBSなどに送れます(zoomのwebカメラ映像の替わりとしても送れる)。
https://derivative.ca/community-post/broadcasting-social-media-touchdesigner/62737

NDItoolsはこのサイトからダウンロードできます(無料)。
https://ndi.tv/tools/
ダウンロード後はメニューからVirtual Inputをクリックします。
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/b8d743b2-a95c-de81-67ec-33b1af47d900.jpeg)
その後、ToucuDesignerで出力したいTopをNDIoutTopにつなぎます。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/5e0222ed-e77d-6953-88fa-9f5c4d3e0bb1.jpeg)
右下の隠れたアイコンで、NDItoolsのVirtual Inputをクリックし、TouchDesignerを選びます。
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/445d13d9-2ea8-9990-df34-d0a70b51a489.jpeg)

脱線ですが、zoomでwebカメラ映像の替わりにTouchDesignerの映像を送った例(NDI以外でXSplit Broadcasterでも同様なことができます)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あっ、XSplitBroadcaster使えば、zoomの参加者のwebカメラのところデスクトップ映像映せる。これでDJ/VJやり放題では。参加のワイプクリックしたらデカくなるし。みたいVJ選べるのでは。 <a href="https://t.co/mxIVallIAx">pic.twitter.com/mxIVallIAx</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1247160832464523266?ref_src=twsrc%5Etfw">April 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

参考にzoomで共有していたDJ映像はこんな感じ(zoomからYouTubeLive配信)
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日のzoom→YouTubeLive配信より新曲「FutureSteps」(TouchDesignerで画面は合成)<a href="https://t.co/x18MZ8lqwK">https://t.co/x18MZ8lqwK</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1248981330823483393?ref_src=twsrc%5Etfw">April 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
# ③OBSによるストリーム配信
TouchDesignerからはOBSというものを使うと、これらの映像と音をストリーム配信できます。

OBSはこのサイトからダウンロードできます(無料)。
https://obsproject.com/

OBSstudioを立ち上げ、映像キャプチャデバイスを追加して、デバイスにNewTekNDI Videoを選びます。そうするとTouchDesignerの映像がきます。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/2fa57ef1-aa97-2ba1-13e2-7b0616759768.jpeg)
あとは設定で解像度やビットレートを設定し、YouTube側でLive配信(初回はアカウントの登録で24時間ほどかかります。)の設定(エンコーダ配信)をするとストリームキーを入手できるので、これをコピーします。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/ab8ada28-432b-43b3-5362-594851dbd7cd.jpeg)
OBSの設定の配信のストリームキーに貼り付けてOKをクリックし、画面右下のOBSの配信を開始します。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/9cab6eb9-3449-0b81-4a46-134e8a561ef4.jpeg)
音は下にある音声ミキサーでデスクトップ音声で、音声を有効にして音量を調整します。そうすれば映像と共に音も配信されます。デスクトップ音声ゆえ、システム音が入らないように注意は必要です。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/c20e9731-94a3-62f2-a208-ed74d12a2711.jpeg)

# ④YouTubeによるLive配信
あとはYouTube側でプレビューを確認して問題なければ、右上のライブ配信を開始をクリックすると、ライブ配信は始まります。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/7fd350a8-77cb-5a90-5ffa-6ab907d53eb1.jpeg)
設定で1080p 60FPSを選べは、比較的きれいに映像も見れます。
これで、一応配信はできると思います。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TouchDesigner→NDI→OBS→YouTube配信のテスト。カクカクしない。実際の解像度は多少落ちるけど。条件適正化がどこまでできるものか。 <a href="https://t.co/27XHE9Rjm9">pic.twitter.com/27XHE9Rjm9</a></p>&mdash; Tomoya@∀RroWs (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1247543962451103745?ref_src=twsrc%5Etfw">April 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

# 課題
この方法の欠点はVJがそのままYouTube配信する必要があるので、VJの切り替えはできず、VJ各自で配信することでしょうか。

別の方法で、zoomでのwebカメラのワイプにVJがそれぞれ同様に配信すると、zoomの参加者は、色んなVJを選んで見れて面白いんですが、VJの映像としては解像度が落ちます。ここが惜しい点です。画面共有するとカクつくし、音が共有できなくなるし、zoomだけでやらないのはこれらの理由です。

# 今後について
まだ模索中なのでベストではないと思いますが、週末には配信などして、運用などもいい方法を検討していきたいと思います。一緒にDJ/VJなどやってみたい方もいれば、その際にzoomに招待します。

随時、本記事は更新して分かりやすくしていきます。
もっといい方法などあればぜひ教えてください。

また、[∀RroWsの楽曲](https://www.arrowsofficial.com/music)はオリジナルなので、VJなどの動画配信で使いたい方がいれば、ご連絡頂ければ無償提供します。