背景
p5.jsで描いたアニメーションをMadMapperに送ってプロジェクションしたい！プロジェクションのためにProcessingに書き直すのがめんどくさい！
だったら画面キャプチャしてキャプチャした映像をMadMapperに送れば良いのでは…？
概要
Chromeの画面にp5.jsのアニメーションを表示 -> NDIでキャプチャ -> MadMapperで受信してプロジェクション…という構成
プロジェクションマッピングソフトやVJソフトにCanvasの映像を送りたい時に使えるかも？
実験環境
- macOS 10.13
- Chrome 75.0
- p5.js
- NDI Tools 3.8
- NDI Scan Converter
- MadMapper Demo 3.6
NDIとは
【Blog】 NewTek NDI ツール 3.6 「ライブプロダクションの可能性は無限大！」 @ ishicaw / motionworks より引用
NDI (ネットワークデバイスインターフェイス) は、NewTek社によって開発された、ライブビデオをネットワーク上で配信するためのIPビデオプロトコルです。イーサネットなどのローカルエリアネットワーク環境で放送品質のビデオを送受信することができるようになります。
手法
Chrome -> NDI
下記からMac用のNDIツールをダウンロード、インストール
NewTek NDI Tools
Chromeで映像として送りたいページを開き、NDI Scan Converterを起動
File > Google Chrome を選択し、映像を送りたいウィンドウを指定
NDI Video Monitorを起動し、 File > hogehoge.LOCAL > Scan Converterを選択すると送信中の映像が確認できる
Chromeのツールバーも映像として含んでしまうので全画面表示の状態で送信したくなるが、NDI Scan ConverterにChromeが認識されなくなったり、Chrome以外のアプリケーションがアクティブだとCanvasのアニメーションが停止したりと色々問題があったのでウィンドウ表示で送ることに…
NDI -> MadMapper
MadMapperを起動し、Live Inputの欄からScan Converterを選択してChromeのウィンドウを受信
MadMapper上でChromeのコンテンツだけを表示するように(=ツールバーを表示しないように)表示範囲を調整
Syphonの利用
MadMapperはNDI Scan Converterから直接受信できたが、それ以外のアプリケーションで映像のやり取りのためにSyphonを使いたい場合、下記のソフトが使えそう
NDISyphon | VDMX Documentation
NDI Scan Converterを設定後、NDISyphonを起動し上部のNDI -> SyphonのNDI Clients欄からhogehoge.LOCALを選択して「Enabled?」にチェックするとSyphonで送信される
雑感
- NDI Scan ConverterはChromeだけでなく色々なアプリケーションの画面が送れるため、ゲーム画面のプロジェクションなど幅広く応用できそう(試してみたらSlackやFinderの画面ですら送信できた)
- Canvasのアニメーションの動作速度はやや落ちたが、PCのスペックにも依存しそう？
- Windowsでも同じようにできないか調査中…