Edited at

TouchDesignerでリアルタイム番組を作る【Wowza連携】

More than 1 year has passed since last update.

TouchDesigner Advent Calendar 2017 12日目

TouchDesignerのVideo Stream Inオペレーターを使った記事です。

きっと国内未踏!:older_man_tone1:

担当はTouchDesigner日本コミュニティWEBページの更新さぼりのキリョウ(@_kiryo)がお送りします!(ごめんなさい)


できること

国内外どこのスマホからでも自分のTouchDesignerに向けて動画がリアルタイムで取り込めて、

エフェクトやテロップの画像を動かせる


事前知識

・TouchDesignerの基礎知識

オペレーターの意味がわかるくらい。

・AWSの基礎知識

インスタンスたてられるくらい。

リアルタイムで動画を取得するには、

動画の一時的なデータを格納しておくストリーミングサーバーを建てる必要があります。

今回は、AWSで自前で建てられるWOWZAを使います。


ストリーミングサーバーの構築

EC2インスタンス群にWOWZAエンジンを搭載したインスタンスを作ります。

手順記事


  • 今回は、VODではなくLiveStreamingです。

  • スマホにインストールしたwowza GoCoderから、PCブラウザで配信を確認できるところまですすめてみてください。

WOWZAも比較的新しく、2年前は公式の英語文献だけでした。。日本語マジ感謝:innocent:


TouchDesignerにつなぐ

先にWOWZAの方で、TouchDesigner内で利用する動画のアドレスを確認します。

ブラウザから、自分で作成したアプリを選び、test playerを選択。

1.PNG

↓ モバイルタブをクリック。Androidの方に表示されているのが、使用する動画のアドレスです。コピーします。

2.PNG

ここまできたら、TouchDesignerを開き、Video Stream Inオペレーターに貼り付けます。

アドレスを一文字変更します。

rtsp://インスタンスのIP:1935/



rtmp://インスタンスのIP:1935/

3.png

スマホのGocoderで配信が開始されていれば、この時点でオペレーターの縦横比がスマホのサイズにかわり、

映像が流れてきます。


適当にテロップ作る

あとはお好きなタッチでデザイナるだけ:muscle:

今回はphotoshopで適当なpng画像を用意したので、addで重ねていきます。

モノクロにしたりグリッジやブラーといったエフェクト系をかけてもいいですね。

一人で番組さみしい…

5.PNG

これは自室ですが、勿論スマホはAWSとつながっているので、USAのオバマのスマホにGoCoder入れれば、オバマが映ります:hugging:なお、画像を作るときに、スマホの解像度とあわせないと調整のめんどみが深いので気を付けましょう。。。

また、WOWZAは同一サーバー内で複数のストリームアプリケーションを作成できます。

VideoStreamInを2個用意して、サイズを調整してかさねれば、ワイプも作れますね。

PCからWOWZAに動画をいれたい場合は、FFMPEGやadobeMediaEncoderを使ってもOKです。

-ストリーミングプロトコル備考-

ストリーミング通信には、rtmp/rstp/hlsなど、専用のプロトコルが多く存在します。

国内では、低ビットレートでも劣化しずらいHLSを使用しているアプリをよく見かけますが、

touchdesignerではHLSは使いません。また、rtspはなぜか通らなかったので、rtmpに変更しました。。。

4.png


感想

遠隔地の動画をリアルタイムでタッチにとりこめるのは、とても可能性があると思うんです…

今後の予定としては、音声用のAudioStreamInがまだためせていないのと、

逆にStreamOutが使えればツイキャスの放送に自分でエフェクトかけながら放送もできたらいいな!

ちなみに実務的なところでいうと、WOWZAオンリーだと、AWSはスパイク的なリクエスト増に対応していなかったり、

負荷分散となるwowzaEdgeの機能がcloudfrontでのCDNに対応していないので、

現状大勢に映像配信というよりは、イベントなどで1台で大きく映すような用途が向いていると思います:joy:

連携系は、WATSONでリアルタイム字幕あたりをくみあわせてみたいと思います!

ではでは!キリョウ(@_kiryo)がお送りしました:v: