Location>code7788 >text

Building small video chat pages using WebRTC technology

Popularity：420 ℃/2024-11-19 12:43:40

catalogs

  • catalogs
  • bibliography
  • What is WebRTC?
  • What can I do?
  • architecture diagram
  • Personal understanding (analogies)
    • Core Knowledge Points
    • Core Knowledge Point Analogies
      • ICE Framework
      • STUN (protocol)
      • NAT (Network Address Translation)
      • TURN
      • SDP (Session Description Protocol)
      • Core APIs for WebRTC
  • Now start cooking.
  • preparatory phase
    • environmental preparation
    • Server setup
    • Coturn TURN server (open source service) deployment
    • Signal Server
    • Signaling Service and Client Source Code
    • beta (software)
  • summarize
  • common problems

bibliography

  • WebRTC Detailed Documentation
  • WebRTC samples (official)
  • How to build a simple webrtc server (other blogger documentation)
  • WebRTC Official Demo
  • webRTC open source library
  • coturn Server Deployment and Docker
  • WebRTC server test address

What is WebRTC?

  • WebRTC (Web Real-Time Communication) technology
  • Exchange arbitrary data between browsers without intermediaries
  • Does not require users to install plug-ins or any other third-party software

What can I do?

With Media Capture and Streams APIs
  • Support for audio and video conferencing
  • file exchange
  • screen sharing
  • identity management
  • and interfaces with traditional telephone systems, including support for sending DTMF (push-button dialing) signals

architecture diagram

Personal understanding (analogies)

The official documentation is obscure, so follow your own thinking and organize the summary.

Core Knowledge Points

First organize the official core knowledge points, do not understand here, it does not matter, we continue to summarize according to their own ideas
  • ICE (framework) allows your web browser to connect to a peer
  • STUN (protocol) is used to discover your public address and identify any restrictions in the router that prevent direct connections to peers
  • NAT is used to provide public IP addresses for your devices
  • TURN means bypassing symmetric NAT restrictions by opening a connection to a TURN server and relaying all information through that server
  • SDP Technically Session Description Protocol (SDP is not really a protocol, but a data format)

Core Knowledge Point Analogies

Let's use a restaurant (or whatever) as an analogy to the core WebRTC concepts. Imagine you're inside a restaurant right now.clientIt can be directly linked to theKitchen (server)to communicate without having to go through theWaiter (intermediary). In this restaurant, customers canOrdering (sending audio/video requests)、Enjoying food (receiving audio and video streams)，Direct communication with other customers (other users) is also possible (data transfer)And it's allwill notextraTool or device (plug-in)

Note:If you understand, the above description, then we'll move on.

ICE Framework

Think of ICE like a restaurant.Overall layout and designIt ensures thatclientBeing able to find a seat without any problems and communicate withKitchen (peer-to-peer)Establishing Connections ICE is responsible for coordinating all means of connectivity between the customer and the kitchen to ensure they can communicate smoothly.

STUN (protocol)

STUN is like the entrance to a restaurantclerk, is responsible for helping customers find the public entrance to the restaurant. The receptionist willTell customers their public address (public IP address), and to help them understand if there are anyBarriers (e.g., router restrictions, firewalls, etc.) preventing them from having direct access to the restaurant (direct connection to the peer)。

NAT (Network Address Translation)

NAT is like a restaurant façade, it provides aPublic door number (public IP address). While the interior of the restaurant is full offurnitureBut people on the outside only know this public door number, not the exact location on the inside.

TURN

TURN is like the restaurant'stakeaway service. If customers are unable to access the restaurant directly (due to symmetric NAT restrictions), they have the option of accessing the restaurant via theTake-out service (TURN server) to get food. All orders and exchanges take place through the takeaway service so that even if customers can't get to the restaurant directly, they can still enjoy their meal.

SDP (Session Description Protocol)

SDP is like the restaurant'smenu, which describes the dishes and beverages available (the format and parameters of the audio and video streams), and while the menu itself is not a true agreement, it provides the information needed between the customer and the kitchen so that they can come to a consensus to ensure that the dishes ordered by the customer are prepared correctly by the kitchen.

Core APIs for WebRTC

  • getUserMedia (a la carte):

This API is like a customer ordering food in a restaurant. The customer tells the kitchen what they want (audio or video) and the kitchen prepares those ingredients (getting the user's audio and video streams).

  • RTCPeerConnection (kitchen workbench):

This API is like a workbench in the kitchen that handles the customer's order (establishes the connection). It ensures smooth communication between the customer and the kitchen, handling the transmission of audio and video streams, just as the kitchen prepares and sends the food.

  • RTCDataChannel (customer-to-customer communication):
    This API is like a dialog between customers. Customers can communicate (transfer data) directly with other customers, such as sharing their dining experience or exchanging recipes, without going through a server.
    summarize
    In this restaurant analogy, WebRTC is like an efficient restaurant where customers can communicate directly with the kitchen and other customers to enjoy their food and share information without the intervention of an intermediary. The core API is the tool that makes all this possible, helping the customer to order, the kitchen to prepare the food and the customers to communicate with each other. In this way, WebRTC makes real-time communication simple and efficient.

Now start cooking.

If you're reading this, congratulations, we're in agreement, now on to the cooking.

preparatory phase

environmental preparation

Install Docker, Nginx, Nodejs, etc., consult additional documentation
  • One server
  • Debian 12 x86_64 operating system
  • Docker
  • Nginx
  • Nodejs

Server setup

First we need two services, STUN/TURN, Signal Server, What's Signal Server? Don't be nervous I'll explain later, will explain now we first focus on with STUN/TURN, again before we need to understand Coturn TURN server (open source framework, thanks to the developers)
  • STUN/TURN
  • Signal Server

Coturn TURN server (open source service) deployment

Yes, you read that right, just one line of command, that's why I recommend using Docker, detailed Dockerfile please see the references

docker run -d --network=host coturn/coturn

beta (software)

Open our test site/samples/src/content/peerconnection/trickle-ice/ Add servers, wait where did we get our passwords?

User name and password

Username and password in the Dockerfile file, I use the default configuration, did not set any configuration file, so the password is the default password, you can modify the
/coturn/coturn/blob/master/docker/coturn/debian/Dockerfile

Signal Server

Imagine a restaurant where customers (users) need to communicate with the kitchen (peers), but they don't have a direct view of the inside of the kitchen. The signaling server is like the receptionist or front desk of the restaurant, responsible for coordinating communication and information transfer between customers.
  • Passing messages, for example, if customer A wants to make a video call with customer B, customer A's request will be sent to the signaling server first, and then forwarded by the signaling server to customer B.

Signaling Service and Client Source Code

Note: WebRTC requires an SSL/TLS certificate, which is the https protocol.
  • source code (computing)

beta (software)

summarize

  • Build Signal Server signaling service
  • Setting up the STUN/TURN service
  • Docker deployment of Coturn TURN server (saves tons of deployment time)

common problems

  • I'll add it later.

source code (computing)

  • Signaling services and clients
<Previous Next>