WebRTC 底子

WebRTC 底子

目次

  

• 什么是 WebRTC  
  
• WebRTC 的根本概念  
  
• WebRTC 的根本流程
  
     
  
  • 毗连创建流程图   
    
     
  
• WebRTC 的根本对象
  
     
  
  • RTCPeerConnection   
    
  • RTCSessionDescription   
    
  • RTCIceCandidate   
    
     
  
• WebRTC API 详解
  
     
  
  • RTCPeerConnection API   
    
  • 媒体流 API   
    
     
  
• 详细的代码示例
  
     
  
  • 根本毗连示例   
    
  • 完备的 WebRTC 实现示例   
    
     
  
• 总结
  

<hr> 什么是 WebRTC

WebRTC（Web Real-Time Communication）是一项技能，它使欣赏器和移动应用步伐可以或许通过简朴的 API 直接举行点对点（Peer-to-Peer，P2P）的音频、视频和数据传输，而无需借助中心折务器。WebRTC 紧张用于以了局景：

  

• 视频通话：在欣赏器之间创建实时的视频谈天功能。  
  
• 音频通话：支持高质量的语音通话。  
  
• 数据传输：用于传输恣意数据，如文件、消息等。  
  
• 实时协作：在多个客户端之间同步文档、白板等应用。
  

WebRTC 具有以下几个关键特点：

  

• 实时性：提供低耽误的音视频通讯，实用于必要即时反馈的场景。  
  
• 跨平台：支持在差别装备和欣赏器间举行通讯，广泛实用于桌面和移动端。  
  
• 安全性：通过 SRTP（Secure Real-time Transport Protocol）对传输的数据举行加密，确保通讯的安全性。  
  
• 开源性：WebRTC 是一个开源项目，开辟者可以自由利用和修改。
  

<hr> WebRTC 的根本概念

在深入相识 WebRTC 的利用之前，明白以下几个关键概念至关紧张：
1. 媒体流（MediaStream）

媒体流表现音频或视频流，是由多个媒体轨道（MediaTrack）构成的。每个轨道可以是音频轨道或视频轨道。WebRTC 通过 getUserMedia() API 获取媒体流并将其传输给对等端。

1. navigator.mediaDevices.getUserMedia({ video: true, audio: true })
2.   .then(stream => {
3.     // 使用获取到的媒体流
4.   })
5.   .catch(error => {
6.     console.error('Error accessing media devices.', error);
7.   });

复制代码

  

• 关于媒体流，可以参考：MediaStream 的媒体流对象 (stream) 和流媒体轨道 (track) 详解
  

2. 信令（Signaling）

信令是指在两个对等端之间互换元数据的过程。元数据包罗：

  

• SDP（Session Description Protocol）：形貌会话的格式信息，如媒体范例、编解码器、网络参数等。  
  
• ICE 候选（ICE Candidates）：用于 P2P 毗连的网络候选信息。
  

WebRTC 并不规定怎样实现信令，通常由开辟者通过 WebSocket、XHR 或其他协议来完成。完成信令互换相干操纵的服务称作信令服务器
3. 会话形貌协议（SDP）

SDP 是一种文本格式，用于形貌多媒体通讯会话。它包罗有关媒体格式、编解码器、带宽、网络等信息。SDP 是 WebRTC 毗连创建过程中的关键要素之一。
4. ICE（Interactive Connectivity Establishment）

ICE 是一个用于资助 P2P 毗连在差别网络环境下创建的框架。ICE 会实利用用各种网络候选(candidate)，包罗本地、STUN 和 TURN 服务器提供的候选，以确保 P2P 毗连的创建。

  

• STUN（Session Traversal Utilities for NAT）：资助客户端发现其外部网络地点。  
  
• TURN（Traversal Using Relays around NAT）：用于在 P2P 毗连无法直接创建时，通过中继服务器转发流量。
  

上面的过程剧烈发起参考这位作者的文章：

  

•