WebRTC DAT 完全ガイド | 使い方・パラメータ解説【TouchDesigner】

記事更新の通知はXでアナウンス٩(๑❛ᴗ❛๑)
→ @maru6o6をフォロー

概要 📖 – ブラウザ間のリアルタイム通信

WebRTC DATは、ブラウザや他端末とサーバーを介さず映像・音声・データをリアルタイムに送受信する DATです。接続相手の探索には STUN / TURN サーバーを用い、NAT やファイアウォール越しでも端末同士を直接つなぎます。

主な用途 🎯

ブラウザと TouchDesigner 間のリアルタイム映像・音声通信
離れた拠点同士を結ぶ遠隔ライブ演出・テレプレゼンス
サーバーを介さない端末間 (P2P) のデータ送受信
観客のスマートフォンからの双方向インタラクティブ入力
NAT 越えを伴う低遅延ストリーミング配信

データフロー 🔄

入力: 接続先の情報 (STUN/TURN サーバー設定)
 ↓
ピア同士の接続確立とメディア交換
 ↓
出力: 接続相手との映像・音声・データのリアルタイム送受信

Tips

初心者の方は、以下日本語書籍も手元にあると安心です。

リンク

まる。

実際の案件事例まで踏み込んで紹介されていて、効率よくスキルアップするなら必携の二冊です！

パラメータ解説 ⚙️

Connection Page 🔌

接続の有効化 🔛

Active .active ✅
– Active (接続の有効化) — オンにすると相手 (ピア) と接続し、映像・音声・データの送受信が始まります。
– オフにすると、確立済みの接続はすべて閉じられます。

Reset .reset 🔄
– Reset (接続のリセット) — この DAT に紐づくピアを初期化します。
– Active を一度オフにしてから再びオンにするのと同じ動作です。

通信速度の制限 📉

Custom Bit Rate Limits .bitratelimits 🎚️
– Custom Bit Rate Limits (通信速度の上下限を指定) — オンにすると、自前の最小・最大ビットレートを設定できます。
– ここで指定した上限は kbps 単位で、この DAT に紐づくすべてのトラック (映像・音声) に適用されます。

Minimum Bit Rate (kbps) .minbitrate ⬇️
– Minimum Bit Rate (最小通信速度) — この DAT に紐づく全トラックの最小ビットレートです。
– 単位は kbps で、回線が混雑しても下回らない目安になります。

Maximum Bit Rate (kbps) .maxbitrate ⬆️
– Maximum Bit Rate (最大通信速度) — この DAT に紐づく全トラックの最大ビットレートです。
– 単位は kbps で、上げすぎると回線を圧迫するため帯域に合わせて調整します。

コールバック参照 📜

接続イベントを処理する Python スクリプトの参照先:

Callbacks DAT: Callbacks DAT (コールバック参照先) — WebRTC のコールバック関数を記述した DAT へのパスを指定します。接続状態の変化や受信イベントを Python で受け取る入口になります。

ICE Page 🧊

STUN サーバー 📡

NAT 越えに使う STUN サーバーの指定:

STUN Server URL: STUN Server URL (STUN サーバーの URL) — 自分のグローバル IP アドレスを調べるための STUN サーバーを指定します。NAT 越えの最初の手がかりになります。

TURN サーバー 🔁

TURN Username .username 👤
– TURN Username (TURN 接続のユーザー名) — 指定した TURN サーバーへアクセスするためのユーザー名です。

TURN Password .password 🔑
– TURN Password (TURN 接続のパスワード) — 指定した TURN サーバーへアクセスするためのパスワードです。

TURN Server .turn 🗂️
– TURN Server (TURN サーバーの並び) — 複数の TURN サーバー URL を順に登録できる連番パラメータです。

TURN Server URL 0 .turn0server 🌐
– TURN Server URL 0 (TURN サーバーの URL) — 直接通信できないときに中継する TURN サーバーの URL です。

実践アイデア 💡

Example 1: ブラウザ映像を取り込む 📹

Web ブラウザ (カメラ) → WebRTC DAT → Video Stream In TOP → 合成・演出

観客や演者のスマートフォン・PC ブラウザのカメラ映像を WebRTC DAT 経由で受け取り、TouchDesigner 側の映像演出にリアルタイムで取り込む基本フローです。サーバーを介さず低遅延で映像を扱えます。

WebRTC DAT に STUN サーバーの URL を設定して接続準備を整える
Callbacks DAT で接続確立のイベントを受け取る Python を記述
Active をオンにしてブラウザ側のピアと接続を確立
受信した映像トラックを映像系オペレータに渡して合成・演出

Example 2: 遠隔拠点と双方向通信 🌍

拠点A WebRTC DAT ⇄ STUN/TURN ⇄ 拠点B WebRTC DAT

離れた 2 つの会場の TouchDesigner 同士を WebRTC DAT で接続し、映像と音声を双方向にやり取りするテレプレゼンス構成です。NAT 越えが必要な環境では TURN サーバーを併用して中継します。

両拠点の WebRTC DAT に同じ STUN / TURN サーバーを設定
直接接続できない環境では TURN のユーザー名・パスワードを入力
Active をオンにして相互に接続を確立し映像・音声を交換

Example 3: 観客スマホから入力受信 📱

観客スマホ (Web) → WebRTC DAT (Callbacks) → CHOP/DAT → インタラクティブ演出

観客のスマートフォンのブラウザから送られてくるタッチ・センサー値を WebRTC DAT のデータチャネルで受け取り、コールバック経由でインタラクティブ演出に反映する用途です。多人数の同時入力にも応用できます。

Callbacks DAT に受信データを処理する Python を記述
受け取った値を演出用のオペレータへ橋渡しして反映

Info情報 📊

WebRTC DAT は接続状態やトラック情報を Info 系オペレータで参照できます。

DAT 固有情報 📋

num_rows: DAT の行数
num_cols: DAT の列数
type: DAT の型 (table / text)
is_table: テーブル形式の場合 1、テキスト形式の場合 0

汎用オペレータ情報 🔄

total_cooks: プロセス開始からのクック回数
cook_time: 最後のクック時間 (ミリ秒)
cook_frame: 最後にクックされたフレーム番号
warnings: 警告数
errors: エラー数

接続状態の確認 🔍

接続ピア数: 現在つながっている相手 (ピア) の数を把握できます。
接続状態: 接続確立中・確立済み・切断などの状態を確認できます。

トラック情報 🎬

映像トラック: 送受信している映像トラックの有無を確認できます。
音声トラック: 送受信している音声トラックの有無を確認できます。

トラブルシューティング ⚠️

よくある問題と解決策 🔧

❌ Problem: ピアに接続できない
✅ Solution:

STUN Server URL が正しく設定されているか確認
NAT やファイアウォール越えが必要な環境では TURN サーバーを併用し、ユーザー名・パスワードを入力
Active がオンになっているか確認

❌ Problem: 映像・音声が途切れる
✅ Solution:

Custom Bit Rate Limits を有効にして帯域に合った上下限を設定
Maximum Bit Rate を回線速度に合わせて調整
ネットワークの混雑時は Minimum Bit Rate を下げて安定を優先

❌ Problem: コールバックが動かない
✅ Solution:

Callbacks DAT が正しい DAT を参照しているか確認
コールバック関数名がスペルどおりに記述されているか確認
Reset でピアを初期化してから再接続を試す