# webrtc_learn

**Repository Path**: yanbowen666/webrtc_learn

## Basic Information

- **Project Name**: webrtc_learn
- **Description**: 一个用于记录学习webrtc过程的git仓库
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 2
- **Created**: 2020-08-07
- **Last Updated**: 2024-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# WebRTC学习

## 本demo运行步骤
```bash
# 1. 安装依赖包
npm install
# 2. 安装http-server包
npm install -g http-server
# 3. 根据自身情况配置根目录下的config.js文件，指定本地host和信令服务器port，以及自定义一些配置
# 4. 启动http服务（默认8080端口）
http-server
# 5. 启动信令服务器
node server.js
# 6. 浏览器开启两个tab访问localhost:8080（局域网内的其他电脑访问也行），一方点击呼叫，另一方点击接受即可开始音视频通话
```

## 什么是WebRTC？
WebRTC，名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个Google开源、跨平台（支持网页浏览器）进行实时语音对话或视频对话的API。主要应用在音视频会议，远程教育，即时通讯，远程桌面，直播，网络游戏等领域。

## 基于WebRTC的端对端实时音视频通讯
一个完备的WebRTC音视频通讯框架，需要client端和server端的支持。
涉及到的服务器包括如下几个：
* Stun服务器 : 服务器用于获取设备的外部网络地址
* Turn服务器 : 服务器是在点对点失败后用于通信中继
* 信令服务器 : 负责端到端的连接。两端在连接之初，需要交换信令，如SDP、candidate等，都是通过信令服务器 进行转发交换的。
client端主要涉及到的平台有：
* Android
* iOS
* PC
* Broswer

## WebRTC的三个主要API接口以及它们各自的作用
* **MediaStream**：通过MediaStream的API能够通过设备的摄像头及话筒获得视频、音频的同步流
* **RTCPeerConnection**：RTCPeerConnection是WebRTC用于构建点对点之间稳定、高效的流传输的组件
* **RTCDataChannel**：RTCDataChannel使得浏览器之间（点对点）建立一个高吞吐量、低延时的信道，用于传输任意数据。
在本次的端对端音视频通讯搭建过程中，RTCPeerConnection是我们需要关注最多的API，整个功能的核心都是在利用RTCPeerConnection接口构建端对端的连接。

## WebRTC从建立连接到实现p2p通话的完整流程：
![webrtc_flow](https://gitee.com/yanbowen666/webrtc_learn/raw/master/resource/webrtc_flow.jpeg)

1. 首先我们利用node启动信令服务器（WebSocket服务）, 让客户端和服务器建立起稳定的TCP长链接。
2. 客户端通过信令服务器进行offer和SDP（均由PeerConnection所创建）的握手。
3. 客户端再次通过信令服务器，进行Candidate的握手。
4. 客户端在SDP和Candidate握手成功后, 就会主动建立起一个端对端的链接, 媒体流就能直接传输, 不需要经过服务器。

SDP握手具体流程图：
![sdp_flow](https://gitee.com/yanbowen666/webrtc_learn/raw/master/resource/sdp_flow.png)

## 如下展示client端核心Chat类的主要接口，包含sdp和Candidate处理过程接口
```javascript
class Chat {
    // 构造器，初始化环境和变量，以及对端的远程ID
    constructor () {
    }

    // 开始构建连接，这里会创建RTCPeerConnection对象，并且发送candidate到服务器，并由服务器转发给对端
    initConnect () {
    }

    // 收到对方发来的candidate时，调用此方法保存（通过创建RTCIceCandidate对象）
    addCandidate (candidate) {
    } 

    // 通过信令服务器发起呼叫
    ring () {
    }

    // 收到对方的offer后进行响应
    async answer (offer) {
    }

    // 收到对方发过来的offer和SDP时回调此方法
    async onRecvAnswer (offer) {
    }

    // 开始呼叫对方
    async call () {
    }

    // 发送offer
    async sendOffer () {
    }

    // 开启本地媒体流（通过MediaStream相关的接口）
    showMyVideo () {
    }

    // 关闭本地流
    stopMyVideo () {
    }

    // 关闭连接
    closeConnection () {
    }
}
```