基于Flutter的WebRTC学习

学习WebRTC之前，先需要了解几个名词：

信令服务器：
是用来交换数据的，例如交换SDP等。
信令服务器的协议由多种方式，最常用的是XHR和WebSocket进行数据交换

SDP:
Session Discription Protocol(会话描述协议)
双方进行媒体协商(也就是交换SDP)的时候使用(例如：双方使用的音视频编码格式等等)
通过信令服务器进行传输

Candidate:
网络信息，通过信令服务器进行交换

ICE:
是一种框架，使各种NAT穿透技术可以实现统一，该技术可以让客户端成功地穿透远程用户与网络之间可能存在的各类防火墙。

Stun服务器：
STUN服务器能够知道Peer-A以及Peer-B的公网IP地址及端口

WebRTC主要流程分为三个部分：

1. 媒体协商
   Peer-A和PeerB通过信令服务器进行媒体协商，双方交换的数据由SDP描述
2. 网络协商
   Peer-A和PeerB通过Stun服务器获取到各自的网络信息(如：IP，端口等)，然后通过信令服务器转发
3. 建立连接
   如果没有直连，那就通过TURN中转服务器进行转发音视频数据, 最终完成视频通话

WebRTC代码部分的流程

RTCVideoRenderer _localRenderer = RTCVideoRenderer(); //本地流渲染
RTCVideoRenderer _remoteRenderer = RTCVideoRenderer(); //远程流渲染
MediaStream? _localStream; //本地流

1.获取媒体流

使用 getUserMedia获取媒体流，返回一个stream对象，可以用RTCVideoRenderer来进行渲染。

navigator
    .mediaDevices
    .getUserMedia(P2PConstraints.MEDIA_CONSTRAINTS)
    .then(stream) {
        _localStream = stream;
        //渲染本地流
        setState(() {
          _localRenderer.srcObject = stream;
        });
    }

2.生成pc对象

pc对象其实就是是RTCPeerConnection对象，该类是最主要的WebRTC类，负责建立WebRTC连接，处理音视频数据流的传输

RTCPeerConnection? pc;
pc = await createPeerConnection(P2PConstraints.PC_CONSTRAINTS);

3. 将stream添加到peer-A对象

将第1步获取到的stream添加到peer-A对象

_localStream!.getTracks().forEach((track) {
    pc!.addTrack(track, _localStream!);
});

4.peer-A创建offer

创建offer会返回一个RTCSessionDescription对象，也就是sdp

RTCSessionDescription sdp =
          await pc!.createOffer(P2PConstraints.SDP_CONSTRAINTS);

5.设置本地描述

设置本地描述
调用setLocalDescription方法后，会触发pc的iceCandidate方法

await pc!.setLocalDescription(sdp);

6.将peer-A的sdp通过信令服务器发送给peer-B

//这个是自己实现的方法，
//通过websocket 或者 XHR 发送sdp到远端(peer-B)
await sendOfferSdp(sdp);

7.收到远端sdp

根据信令服务器返回的信息，获取远端的sdp信息

RTCSessionDescription answerSdp =
          RTCSessionDescription(sdp, type);

8.设置远端描述

至此，我们实现了交换sdp信息

pc!.setRemoteDescription(answerSdp);

9.交换ice地址信息

在第2步中生成创建pc后，实现监听onIceCandidate，第5步以后会自动调用此方法，获取candidate信息

pc!.onIceCandidate = (candidate) {
    //发送candidate，自己实现的方法，通过信令服务器发送candidate
    sendCandidate(candidate);
};