From Derivative
Jump to navigation Jump to search


The WebRTC Remote Panel COMP is a component that can be used to share a TouchDesigner component's panel over a WebRTC connection.

It requires a Palette:signalingClient COMP connected to a supported Palette:signalingServer COMP.

Before getting started with WebRTC, it is highly recommended to give a read to the introduction available on MDN web docs.

To get a better understanding of what is WebRTC in TouchDesigner, it is recommended to have a look at the WebRTC page and the webRTC COMP page.

The receiving end of the connection should be a WebRTC Remote Panel Receiver COMP or a web page designed to receive a WebRTC stream and a signaling client supporting TouchDesigner' Signaling API and signalingServer COMP.

A web based version of the webRTCPanelRcv component is available in the following repository as well as an online demo following this link.

PythonIcon.pngPalette:webRTCPanel Ext

Shortcomings and other considerations

Unfortunately, not all components will work nicely with that specific setup, but a large array of simple setups should be covered.

Issues you might sometimes encounter are click not being registered, or dialogs not appearing.

A general rule of thumb is to avoid opening dialogs. I.e. Don't open from your custom component a Parameter dialog, but embed the parameters in your UI through widgets or Parameter COMPs.


In this example, we will consider two TouchDesigner processes running on the same machine, A and B.

To start sharing a TouchDesigner COMP panel over a WebRTC connection, drag n drop to the TouchDesigner process A:

On the Palette:signalingServer COMP, turn the Active par to ON.

On the Palette:signalingClient COMP, turn the Active par to ON. Turn the Forward to Subscribers par to ON as well.

On the Palette:webRTCPanel COMP, reference the signalingClient COMP in the matching parameter.

Pick a custom COMP with a panel you wish to share remotely (and read the Shortcomings and other considerations section if you missed it).

Reference this COMP to the Panel par of the webRTCRemotePanel COMP.

In the TouchDesigner process B, drag n drop:

On the signalingClient COMP, turn the Active par to ON. Turn the Forward to Subscribers par to ON as well.

On the Palette:webRTCPanelRcv COMP, reference the signalingClient COMP in the matching parameter.

On the Palette:webRTCPanelRcv, the drop down menu with the list of available clients should update.

You can select the client that appeared and hit the pulse button to start the negotiation process and get the WebRTC connection going.

The remote panel should now appear in the viewer of the Palette:webRTCPanelRcv.

You can embed it in a pane, or open a floating viewer. If the panel you shared is interactive with a simple mouse, all click events will be sent over the WebRTC connection and should affect the remote panel.

This is a great way to test latency.

Parameters - WebRTC Panel Page

Active Active - Start or stop the webRTCPanel.

Framerate Framerate - Set the framerate at which the panel should be streamed out. Higher framerates will use more bandwidth.

Panel Panel - The panel that will be sent over the WebRTC peer connection and will receive dataChannels events back.

Signaling Client Signalingclient - The signaling client with which this WebRTC COMP will subscribe to send or receive signaling messages.

STUN Server URL Stun - URL of the STUN server.

TURN Server URL Turn0 - URL of the TURN server. See WebRTC#ICE for more details regarding TURN.

TURN Username Username - Username for access to the specified TURN servers.

TURN Password Password - Password for access to the specified TURN servers.

Reset Reset - Reset the WebRTC COMP states and kill all ongoing peer connections.

Signaling API Version Signalingapiversion - The Signaling API version. When a signaling client is being used, the API versions of both the server and client should match.

Parameters - Logger Page

Enable Logging Enablelogging - Enable advanced logging features. Useful to debug and track the Signaling Server activity.

Log to File Logtofile - When enabled, logging messages will be written to a time rotated log file.

Log Folder Logfolder - Path to the folder in which the log files should be written.

File Rotation Filerotation - Number of backup files to be kept when rotating log.

Log to Textport Logtotextport - When enabled, logging messages will be displayed in the textport.

Log to Status Bar Logtostatusbar - When enabled, logging messages will be displayed in the status bar.

Log Level Loglevel - - Filter level of logging messages. The selected level is included as well as all levels above. I.e. if Warning is selected, Warning and Error messages will be included while Info messages will be excluded.


Parameters - About Page

Help Help - Open Help page in external browser.

Version Version - The component version number.

.tox Save Build Toxsavebuild - The TouchDesinger build in which the component was last exported from.

Operator Outputs

  • Output 0 -

TouchDesigner Build:

Palette • Palette:arcBallCamera • Palette:arcBallGeometry • Palette:audioAnalysis • Palette:audioSet • Palette:battery • Palette:bitwigClip • Palette:bitwigClipSlot • Palette:bitwigDeviceRemotes • Palette:bitwigMain • Palette:bitwigNote • Palette:bitwigProjectRemotes • Palette:bitwigRemotesDevice • Palette:bitwigRemotesProject • Palette:bitwigRemotesTrack • Palette:bitwigSelect • Palette:bitwigSong • Palette:bitwigTrack • Palette:bitwigTrackRemotes • Palette:blendModes • Palette:bloom • Palette:camera • Palette:cameraBrowser • Palette:cameraViewport • Palette:camSchnappr • Palette:changeColor • Palette:changeToColor • Palette:checker • Palette:chromaKey • Palette:colorThreshold • Palette:compareComp • Palette:convolve • Palette:cornerPinSOP • Palette:cppParsTemplateGen • Palette:customAttributes • Palette:debugControl • Palette:dent • Palette:depthExtract • Palette:dilate • Palette:encoder • Palette:equalizer • Palette:feedback • Palette:feedbackEdge • Palette:firmata • Palette:gal • Palette:geoPanel • Palette:gestureCapture • Palette:graphPlot • Palette:histogram • Palette:hsvBlur • Palette:imageSearch • Palette:julia • Palette:kantanMapper • Palette:kinectCalibration • Palette:kinectPointcloud • Palette:leapPaint • Palette:lightTunnel • Palette:logger • Palette:mandelbrot • Palette:materialDesignIcons • Palette:mesh • Palette:monochrome • Palette:motionSense • Palette:movieEngine • Palette:moviePlayer • Palette:moviePlaylist • Palette:multiLevel • Palette:multiMix • Palette:noise • Palette:onScreenKeyboard • Palette:operatorPath • Palette:opticalFlow • Palette:pixelate • Palette:pixelRelocator • Palette:pointGenerator • Palette:pointillize • Palette:pointMerge • Palette:pointRender • Palette:pointRepack • Palette:pointTransform • Palette:pointWeight • Palette:popDialog • Palette:probe • Palette:projectorBlend • Palette:pushPins • Palette:puzzle • Palette:quadReproject • Palette:radialBlur • Palette:recorder • Palette:remotePanel • Palette:rgbaBlur • Palette:rgbaDelay • Palette:rgbContrast • Palette:sceneChanger • Palette:search • Palette:searchReplace • Palette:sharpen • Palette:sickEngine • Palette:signalingClient • Palette:signalingServer • Palette:softenAlpha • Palette:solarize • Palette:sopRender • Palette:splitter • Palette:stitcher • Palette:stoner • Palette:superFormula • Palette:SVG • Palette:sweetSpot • Palette:sweetSpotPreviz • Palette:synchroCache • Palette:synchroClient • Palette:synchroFrameIn • Palette:synchroFrameOut • Palette:synchroNDIIn • Palette:synchroSDIIn • Palette:synchroVideoOut • Palette:tdBitwigPackage • Palette:TDVR • Palette:testGrid • Palette:transitMap • Palette:twirl • Palette:vectorScope • Palette:virtualFile • Palette:waveformMonitor • Palette:webBrowser • Palette:webRTC • Palette:webRTCPanel • Palette:webRTCPanelRcv • Palette:xyScope