The technologies I’m going to describe here are several years old, but taking into account our client questions I decided to write this post.
Imagine you need to build an online classroom solution. The core functionality will be online video, online whiteboard, online presentation, and other features that allow teacher to share materials in real time.
Let’s first take a look on video streaming. We can use WebRTC to make it possible to stream video from web-camera (or any other source between browsers). See pictures below about how WebRTC works.
In case when both (or at least on) client has real internet IP connection is established between two browsers directly. The signaling server is using just to configure session to define how to interconnect clients. Signaling server is a custom application, it can use any communication channels in most cases it’s WebSockets to connect clients to each other. Signaling server is responsible to form classroom or conference room and notify all participants about possible communication channels.
In case when both clients are behind firewalls with NAT how it usually happened in both offices and homes. There is still a chance that routers has asymmetric NAT and we can use it establish direct connection. In that case we need a STUN (Session Traversal Utilities for NAT) server. STUN server will inform clients about how they looks in the internet what are their routers IPs and what ports to use to establish connection.
I never saw such kind of routers, all routers at my home and office do not support working that kind of connection or configured to not allow this kind of connection. In that case the only working solution is to go through additional server – TURN (Traversal Using Relays around NAT).
While in first two scenarios our servers do not have significant workload in the last one all media traffic is going though TURN server and it should have enough RAM, CPU and network channel bandwidth to support required number of clients. I will not add a code here because you always can find very good examples with descriptions like HTML5 Rocks – WebRTC in the real world: STUN, TURN and signaling
The good thing here is that if you need to create unidirectional streaming (when teacher talk to students) you do not need every-to-every connection and can manage your TURN server workload by signaling server and general application logic. Correct streaming is also important from point of view of browser workload. Let’s imagine we have 20 students classroom with one teacher and we connect all students to each other. Every browser will have manage 20 incoming stream and send stream to 20 other peers. This will not work for sure even not taking into account workload of TURN server. Instead you should create stream from teacher to every student and from currently asking/answering student to teacher and other students.
And one more thing to make everything work you should use SSL with valid certificates everywhere. Usage of valid not self signed certificates may save a lot of hours of debugging. You can use Let’s Encrypt for free certificates.
If you would like to take a look how everything is working welcome to our demo Tesseris Pro LLC – WebRTC Demo
Source code of this demo can be found here Tesseris Pro LLC – WebRTC Demo Source Code
All the interesting code is stored in 2 files:
- Client index.html
- Server server.js
In addition you will need a turn server. We used coturn in our demo. It’s very simple to deploy and configure it.
So to build a web conference in browser you do not need complicated frameworks or plugins, just modern browser and several lines of code. Also please keep in mind that WebRTC is not for video/audio only. In Tesseris Pro we have done thing like TeamViewer with WebRTC you can use it for any kind of information.
We also have a desktop and mobile clients for our demo. Let me know if you are interested.