Many of you have been asking for a simple setup that relies on WebRTC to share TouchDesigner content to a web page since we introduced WebRTC in our 2022.20k series of builds.
Today, we are happy to release an open source repository with a simple React web page that allows to connect from any browser* to a TouchDesigner panel shared through the palette's WebRTC Panel component.
If you only want to experiment and you are not familiar with NodeJS and npm, you can also run the project directly from an online web demo hosted from GitHub.
To get started, find the repository here and follow the instructions on the readme.
If you want to use the online web demo, you can find it at the following link.
Note: The online web demo is hosted on a secured server (notice the "https://") which means that you will need to run the signalingServer COMP with a certificate. Follow the details at the following link to generate a certificate.
Now that you are set with the web demo, whether you decide to run the development environment with NodeJS or the online web demo, you can setup a simple project in TouchDesigner.
For that example, we are using the online web demo from a device A (a Microsoft Surface, IP 192.168.0.105), and running the signalingServer with a development certificate on a device B (desktop computer, IP 192.168.0.101) as well as a signalingClient and a webRTCPanel component.
After generating our development certificates, we grab from the Palette a signalingServer COMP, a signalingClient COMP, a webRTCPanel COMP.
On the signalingServer COMP, we configure as follow:
- Active par -> On
- Port par -> 443
- Secure (TLS) par -> On
- Private Key File Path par -> Set to your .key file
- Certificate File Path par -> Set to your .crt file
On the signalingClient COMP, we configure as follow:
- Active par -> On
- Host par -> The IP of the machine where you are running the signalingServer COMP, in my case localhost
- Port par -> The port used to connect to the server, in our case 443
- Forward to subscribers par -> On (we will have the webRTCPanel COMP as a subscriber)
On the webRTCPanel COMP, we configure as follow:
- Active par -> On
- Panel par -> Reference a COMP of type panel, in our case we are using the palette's leapPaint COMP
- Signaling Client par -> Reference the signalingClient COMP previously created and configured
Since we are in a development environment, we are using a "hack" on device A to temporarily add the certificate of the signalingServer to our browser session: we type in the URL "https://IP_OF_THE_SIGNALING_SERVER" where you replace IP_OF_THE_SIGNALING_SERVER by the expected IP, in our case https://192.168.0.101
You will see a notice from your browser. Click Advanced and Proceed.
Note: This previous step is not required if you are not using a development certificate or if you are using the development environment in NodeJS in a non-secure development server. This step can also be replaced if you are instead adding the server certificate to your browser permanently.
You can now go back to the web demo page and enter the signaling server settings you want to connect to (make sure you use wss:// if you are in a secure environment, or ws:// otherwise).
In our case, we want to connect to the signaling server hosted on the machine 192.168.0.101. We input wss://192.168.0.101 and the port is 443, as configured on the signalingServer COMP we previously setup in our TouchDesigner project.
Once we are connected, we get a client to connect with displayed (possibly a list, if you have multiple clients connected to that signalingServer).
Hit Start to start the WebRTC session with the client you wish to connect with.
You can now interact with the Panel from within your browser.
This is of course not limited to your web browser. WebRTC is compatible with a wide range of devices. You can connect with TouchDesigner and interact with your project from a cellphone, from a tablet, or from a RaspberryPi or any device that you can think of that supports modern web technologies.
Final points to note and known issues or limitations:
- The signalingServer COMP can be swapped for any signaling server that you might want to design but note that both the webRTCPanel COMP and the WebRTC Web Demo will have to be tweaked accordingly.
- The Web Demo page might not be fully compatible with your devices, including partial support of touch events for touch interfaces.
- Keyboard events are currently not supported (adding support is planned).
- Hardware encoding and decoding for WebRTC is currently not supported in TouchDesigner (adding support is planned).
* Browser should support TLS and development certificates when testing this project in a development environment with a secured server. Browser should support the MediaStream API.
With that article, we also invite users to revisit the WebRTC COMP of the palette which enable a multi client "Meet" kind of style WebRTC session. A quick start guide was recently added to the wiki at the following link.
Additionally, users can find the webRTCPanel and the webRTCPanelRcv components in the Palette to share a panel from TouchDesigner to another TouchDesigner process over a WebRTC session.
As always, feel free to add a comment below if you have any question.
