Blog
All Blog Posts | Next Post | Previous Post
Another visit in the TMS labs: WebRTC
Thursday, February 23, 2023
While we are working hard on bringing TMS WEB Core v2.1 to
you, we are always on the lookout to investigate and research exciting
technologies that we can bring to a future TMS WEB Core version to offer valuable additions to
your applications.
Today we'd like to show a sneak peek of something that has been cooking in our labs: WebRTC peer-to-peer communication.
We've explored WebRTC before and we even offer a free set of components that allows you to use existing WebRTC servers. You can read our previous article on using Jitsi and Vonage (formerly OpenTok) from a TMS WEB Core application in this blog article if you missed it.
These existing server solutions are convenient but what happens if you want to manage your own signaling server or you want some more flexibility in terms of integration? Perhaps you also have your own vision on how the application should look like and what the flow of the communication should be. This is where the WebRTC API comes into play. It is supported by all major browsers and you don't need to install a plugin or native application to use it! The direct peer-to-peer communication will be handled by the web browsers while you can be in full control of the process.
The flow of a direct P2P connection with WebRTC
This is the most simple connection form you can use with WebRTC. It has the following elements:
- 2 browsers that want to connect to each other.
- A STUN and/or TURN server: This is used to find the public IP address of the peers/browsers.
- A signaling server: This is used to connect the browsers. The peers can exchange negotiation messages via this server. It's worth to mention WebRTC does not specify a transport mechanism and you can use anything you'd like. It can be WebSockets, XMLHTTPRequests or even carrier pigeons as long as the necessary messages can be communicated between the peers.
First the peers will ask for their public IP address through the STUN/TURN server. After that the connection offer is created by one peer and sent to the signaling server which forwards it to the recipient peer. The recipient peer creates an answer to the offer and sends it back. When the offer and answer are created/accepted, the peers will start proposing ICE (Interactive Connectivity Establishment) candidates. These candidates are also exchanged through the signaling server and are used to negotiate the actual connection between the peers.
How does this work in practice?
We've prepared a proof of concept demo application that you can play around with! A simple signaling server for the demo was also implemented by us using TTMSFNCWebSocketServer from our TMS FNC WebSocket product.
The demo follows the steps explained above. When you open the demo you are connected to the WebSocket server that is used for signaling. You can pick a room you want to join or leave it empty and have a random room assigned to you. After that, you'll need to wait until another peer connects to the same room. Once both of you are in the same room, a call can be started (= offer is created). After accepting the call, the other peer will create an answer, send it back and then the peers will exchange ICE candidates.
Click the button below to open the demo.
Tip for opening the demo via a desktop browser:
If you don't have multiple desktop cameras for testing, you can either use your smartphone as the other peer or open the demo twice in the same browser instance. That way the camera can be accessed twice from the same website.
What's next?
As we mentioned, this demo is a proof of concept only and it will be a while before we can bring this to you. However, we are eager to learn what your thoughts are! Do you have possible use cases in your mind? Let us know what would you like to see in a WebRTC based component!
Tunde Keller
This blog post has received 2 comments.
2. Sunday, March 5, 2023 at 6:26:24 PM
Not at this moment, it will become part of a future TMS WEB Core release.
Bruno Fierens
All Blog Posts | Next Post | Previous Post
DERNEGI CANSUYU