WebRTC（Web Real-Time Communication）是一种开放源代码项目，它为网页浏览器和其他应用程序提供了实时通信（RTC）的能力，无需插件或额外的软件。这个"webrtc简易demo"很可能是为了展示如何在Web环境中实现音视频通话、数据共享等功能。让我们深入探讨WebRTC的核心组件、工作原理以及如何创建一个简单的DEMO。
### WebRTC核心组件
1. **getUserMedia**：这是JavaScript API的一部分，允许访问用户的媒体设备，如摄像头和麦克风。
2. **RTCPeerConnection**：这是WebRTC的核心，用于建立和管理两个浏览器之间的直接连接，以便进行音频、视频的实时传输。它处理信令、网络适应和错误恢复。
3. **RTCDataChannel**：用于在浏览器之间发送任意类型的数据，不仅限于音频和视频流。
### WebRTC工作流程
1. **协商（Offer/Answer）**：当一个用户（Alice）想要与另一个用户（Bob）建立连接时，Alice生成一个offer并发送给Bob。offer包含了Alice的编码参数和媒体配置。
2. **Answer响应**：Bob收到offer后，根据自身环境生成answer，包含Bob的编码参数，并返回给Alice。
3. **ICE（Interactive Connectivity Establishment）**：ICE是连接建立过程，它寻找最佳路径来穿透NAT（网络地址转换），确保双方可以通信。
4. **STUN/TURN服务器**：STUN服务器帮助浏览器确定其在网络中的公共IP地址，而TURN服务器则作为中继，当直接连接无法建立时使用。
5. **DTLS（Datagram Transport Layer Security）**：用于在WebRTC连接上提供端到端的安全性。
6. **SRTP（Secure Real-time Transport Protocol）**：加密和保护音频、视频数据的安全传输。
### 创建WebRTC简易DEMO
1. **获取媒体流**：使用`navigator.mediaDevices.getUserMedia`请求用户许可，然后获取音频和视频流。
2. **创建RTCPeerConnection**：每个参与者需要创建自己的RTCPeerConnection实例。
3. **添加本地流**：将本地媒体流添加到RTCPeerConnection，使用`addStream`方法。
4. **创建Offer**：在呼叫方，创建一个offer并发送给接收方。
5. **创建Answer**：接收方接收到offer后，生成answer并返回给呼叫方。
6. **设置远程描述**：双方都将对方的描述（offer或answer）设置为自己的远程描述，通过`setRemoteDescription`方法。
7. **ICE候选**：当ICE候选信息可用时，双方通过`addIceCandidate`方法交换。
8. **连接建立**：当所有必要的连接信息交换完成，媒体流开始传输。
9. **显示流**：将接收到的远程流添加到视频元素中播放。
### 示例代码片段
```javascript
// 获取媒体流
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
localVideo.srcObject = stream;
pc.addStream(stream);
});
// 创建RTCPeerConnection
var pc = new RTCPeerConnection();
// 创建Offer
pc.createOffer().then(function(offer) {
return pc.setLocalDescription(offer);
}).then(function() {
// 发送offer给对方
});
// 设置远程描述
pc.setRemoteDescription(answer);
// 添加ICE候选
pc.onicecandidate = function(event) {
if (event.candidate) {
// 发送ICE候选给对方
}
};
```
以上就是WebRTC的基本概念和创建简易DEMO的步骤。在实际应用中，还需要处理错误、添加信令服务（如WebSocket）来传递offer、answer和ICE候选等信息，以及考虑兼容性和性能优化。通过这样的DEMO，你可以理解WebRTC的工作原理并动手实践。
