This article is simultaneously published on the WeChat public account nashaofu on the road , welcome to pay attention.
Lazy people are always pushed by the world to do things, suffer from "have to" in passivity, and enjoy the comfort of self-deception in emptiness. I haven’t written anything for a long time. People are always lazy. Every time I finish writing the code, I don’t want to write an article. I am always afraid of summarizing. I think it is too troublesome. It took me a few days to sort out the code and write this Click on the text. This article
mainly describes the establishment process of webRTC, and includes a demonstration example, the online preview address https://nashaofu.github.io/webrtc-
demo/, the source code of Github warehouse is: github.com/nashaofu/we… . And this demonstration example was also selected into Teacher Ruan Yifeng's Science and Technology Enthusiast Weekly (No. 115) www.ruanyifeng.com/blog/2020/0…
This example recommends cloning the warehouse and then running it locally. The online version can only demonstrate the page that establishes a connection without a server. The following is an explanation in the form of a clone warehouse.
1. Execute git clone github.com/nashaofu/we…
2. Enter the project folder and generate ssl certificate related files (to ensure that the LAN can be accessed normally)
mkdir ssl
cd ssl
openssl genrsa -des3 -passout pass:x -out server.pass.key 2048
# writing RSA key
openssl rsa -passin pass:x -in server.pass.key -out server.key
rm server.pass.key
openssl req -new -key server.key -out server.csr
openssl x509 -req -sha256 -days 365 -in server.csr -signkey server.key -out server.crt3. Install dependencies and start the service
# 安装依赖
yarn
# 启动服务
yarn start4. Open the address of the terminal output in the browser. If you encounter certificate security issues, please refer to https://blog.caojun.xyz/posts/macos_trust_ssl/
5. index.html is an example of handshake using copy text, http.html is an example of using http to establish a connection, socket.html is an example for demonstrating socket establishment of a connection, dataChannel.html is an example of using webRTC to transmit text content
webRTC Connection establishment process
The exchange of offer and iceCandidata is usually exchanged through sockets, the purpose is to facilitate the exchange of information to the participants after the other party’s network situation changes. In fact, this exchange process can also be used in any other way, as long as information can be exchanged with each other. For example, after A creates a session, he sends his offer and iceCandidata to B via email, and B sets these information into his session, and then sends his answer and iceCandidata to A, as long as the network status does not change during this period , you can talk normally. Regarding webRTC, this article ( juejin.cn/post/684490… ) is quite good. The description of the webRTC connection process on MDN is as follows
The following will mainly talk about the process of establishing a connection by manual copying in index.html. As long as you understand this process, you can basically understand other methods. 1. Enter the page and choose to create a session
2. Copy the generated information to the person you want to invite. The content generated here is the object composed of offer and icecandidate generated by createOffer, and the content after base64 encoding.
function tokenEncode(data) {
// data为：｛ offer: string, candidate: object[] ｝
// candidata为：
// {
// sdpMLineIndex: number,
// sdpMid: string,
// candidate: string
// }
return btoa(JSON.stringify(data))
}3. The invitee opens the web page and chooses to join the session , then fills in the information sent by the inviter into the input box, clicks submit after inputting, the offer and icecandidate will be decoded according to the submitted content, and then the answer and icecandidate will be generated in the area in Figure 2 base64 encoding, and send the base64 encoding to the inviter
4. After receiving the receipt of answer and icecandidate, the inviter fills in the receipt content input box, clicks submit, and then decodes the answer and icecandidate. Then if it goes well, you can make a video call.
Network impenetrability problem
Generally speaking, if we only rely on the above steps to realize the P2P connection of the LAN, and cannot penetrate the gateway, the specific reason is mainly because of NAT and firewalls. Because of this reason, webRTC has STUN (Session Traversal Utilities for NAT) and TURN
(Traversal Using Relays around NAT) Two types of servers, these two are mainly used as relay servers when the P2P connection is unavailable, so when using the relay server, the traffic will pass through the relay server instead of the direct P2P connect. So in the example, I use a free relay server to ensure that I can connect to the network.
const pc = new RTCPeerConnection({
iceServers: [ // 信令服务器列表
{
urls: 'stun:stun.l.google.com:19302'
}
]
})Applications of webRTC
We can use webRTC to build a chat room, and it can also be used for live broadcasting (traffic for free) and so on. I have also seen an idea that uses electron to make software, and a webRTC signaling server is also built in the client (exchange offer and icecandidate), so if enough clients are installed, we can form a huge P2P network and do a lot of things. This decentralized thing may still have great potential in the future.
The server that webRTC establishes a connection to exchange offers and ice candidates is usually called a signaling server. The first server that establishes a P2P network is generally called the creation server, and other clients will also serve as servers to access the network at the same time.
Demonstration of the original webRTC connection establishment principle - Nuggets
★The business card at the end of the article can receive audio and video development learning materials for free, including (FFmpeg, webRTC, rtmp, hls, rtsp, ffplay, srs) and audio and video learning roadmaps, etc.
see below!