WebRTCの深い理解

ウェブリアルタイム通信（ウェブリアルタイム通信、のWebRTC）ブラウザ間（終了）オーディオ、ビデオ、およびデータ共有を実現するための規格、プロトコル、およびJavaScript API組成物のセットで。

WebRTCは、サードパーティのプラグインと独自のソフトウェアの助けを借りずに、単純なJavaScriptのAPIにより、任意のWebアプリケーションが完成し、リアルタイム通信が標準機能になります。

WebRTCでは、これら三つの知識のポイントを理解し、知識の三つの主要なポイントは、そこにある、のWebRTCは実現の基礎となる原理を理解します。これら3点の知識は、以下のとおりです。

MediaStreamのオーディオおよびビデオストリームを取得します。
RTCPeerConnection：オーディオとビデオのデータ通信
RTCDataChannel：任意のアプリケーションデータ通信

MediaStreamの

上述したように、MediaStreamのは、主にオーディオおよびビデオストリームを取得するために使用されます。以下のように、達成することは比較的簡単であるJS：

「厳格な使用」;

navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

VARの制約= {//オーディオ、ビデオ制約
  オーディオ：真、//オーディオトラックの指定要求
  動画：{//ビデオトラックの指定要求
      必須：ビデオトラック上の{//必須制約、
          幅：{分：320}、
          高さ：{分：180}
      }、
      オプション：[//ビデオのトラック上の任意の制約
          {フレームレート：30}
      ]
  }
}。

VARビデオ= document.querySelector（ '映像'）;

関数successCallback（ストリーム）{
  IF（window.URL）{
    video.src = window.URL.createObjectURL（ストリーム）。
  }他{
    video.src =ストリーム。
  }
}

関数errorCallback（エラー）{
  console.log（ 'navigator.getUserMediaエラー：'、エラー）。
}

navigator.getUserMedia（制約、successCallback、errorCallback）。

JSでは、我々はgetUserMediaオーディオおよびビデオ機能によって対処する必要があり、機能は、オーディオとビデオ、成功コールバックコールバックと失敗を拘束されている3つのパラメータがかかります。

ブラウザの下部には、オーディオとビデオエンジンで撮影し、元のオーディオおよびビデオストリームに対処するには、強化画質と音質に加えて、あなたは、オーディオとビデオの同期を確認する必要があります。

オーディオとビデオのため、従って、送信のために使用される送信者だけでなく、クライアント出力遅延調整のビットレートとの間のネットワーク帯域幅の変化に適応するようにされています。

受信者のために、それはリアルタイムのオーディオおよびビデオストリームに復号化されなければならない、とネットワークジッタおよび遅延に適応します。これは次のように動作します：

1つ以上の同期トラックでの成功コールバックのキャリアとしてストリームオブジェクト、あなたが制約で、オーディオとビデオの両方を設定している場合は、ストリームは、オーディオとビデオトラックトラック、各トラック時間内に運ぶでしょう、真でありますこれは、同期されます。

地元のオーディオやビデオ要素は、JavaScript後処理剤、または他のリモートエンド：出力ストリームは、1つのまたは複数の宛先に送信することができます。下図のように：

RTCPeerConnection

オーディオおよびビデオストリームを取得した後、次のステップは、それを送信することです。しかし、クライアント - クライアント間で送信される異なると、クライアント・サーバモードでは、したがって、プロトコルレベルNAT越え問題に対処し、または論外転送する必要があります。

WebRTCは、主としてリアルタイム通信の問題を解決するために使用されているため、また、信頼性はしたがって、トランスポート層プロトコルのWebRTCとしてUDPを使用することなく、非常に重要である：低レイテンシと適時キーです。

在更深入讲解之前，我们先来思考一下，是不是只要打开音频、视频，然后发送UDP包就搞定了？

当然没那么简单，除了要解决我们上面说的NAT穿透问题之外，还需要为每个流协商参数，对用户数据进行加密，并且需要实现拥塞和流量控制。

我们来看一张WebRTC的分层协议图：

ICE、STUN和TURN是通过UDP建立并维护端到端连接所必需的；SDP 是一种数据格式，用于端到端连接时协商参数；DTLS用于保障传输数据的安全；SCTP和SRTP属于应用层协议，用于在UDP之上提供不同流的多路复用、拥塞和流量控制，以及部分可靠的交付和其他服务。

ICE（Interactive Connectivity Establishment，交互连接建立）：由于端与端之间存在多层防火墙和NAT设备阻隔，因此我们需要一种机制来收集两端之间公共线路的IP，而ICE则是干这件事的好帮手。

ICE代理向操作系统查询本地IP地址
如果配置了STUN服务器，ICE代理会查询外部STUN服务器，以取得本地端的公共IP和端口
如果配置了TURN服务器，ICE则会将TURN服务器作为一个候选项，当端到端的连接失败，数据将通过指定的中间设备转发。

WebRTC使用SDP（Session Description Protocol，会话描述协议）描述端到端连接的参数。
SDP不包含媒体本身的任何信息，仅用于描述"会话状况"，表现为一系列的连接属性：要交换的媒体类型（音频、视频及应用数据）、网络传输协议、使用的编解码器及其设置、带宽及其他元数据。

DTLS对TLS协议进行了扩展，为每条握手记录明确添加了偏移字段和序号，这样就满足了有序交付的条件，也能让大记录可以被分段成多个分组并在另一端再进行组装。
DTLS握手记录严格按照TLS协议规定的顺序传输，顺序不对就报错。最后，DTLS还要处理丢包问题：两端都是用计时器，如果预定时间没有收到应答，就重传握手记录。
为保证过程完整，两端都要生成自己签名的证书，然后按照常规的TLS握手协议走。但这样的证书不能用于验证身份，因为没有要验证的信任链。因此，在必要情况下，
应用必须自己参与各端的身份验证：

应用可以通过登录来验证用户
每一端也可以在生成SDP提议/应答时指定各自的"身份颁发机构"，等对端接收到SDP消息后，可以联系指定的身份颁发机构验证收到的证书

SRTP为通过IP网络交付音频和视频定义了标准的分组格式。SRTP本身并不对传输数据的及时性、可靠性或数据恢复提供任何保证机制，
它只负责把数字化的音频采样和视频帧用一些元数据封装起来，以辅助接收方处理这些流。

SCTP是一个传输层协议，直接在IP协议上运行，这一点跟TCP和UDP类似。不过在WebRTC这里，SCTP是在一个安全的DTLS信道中运行，而这个信道又运行在UDP之上。
由于WebRTC支持通过DataChannel API在端与端之间传输任意应用数据，而DataChannel就依赖于SCTP。

以上讲了这么多，终于到我们的主角RTCPeerConnection，RTCPeerConnection接口负责维护每一个端到端连接的完整生命周期：

RTCPeerConnection管理穿越NAT的完整ICE工作流
RTCPeerConnection发送自动（STUN）持久化信号
RTCPeerConnection跟踪本地流
RTCPeerConnection跟踪远程流
RTCPeerConnection按需触发自动流协商
RTCPeerConnection提供必要的API，以生成连接提议，接收应答，允许我们查询连接的当前状态，等等

我们来看一下示例代码：

var signalingChannel = new SignalingChannel();
var pc = null;
var ice = {
    "iceServers": [
        { "url": "stun:stun.l.google.com:19302" }, //使用google公共测试服务器
        { "url": "turn:[email protected]", "credential": "pass" } // 如有turn服务器，可在此配置
    ]
};
signalingChannel.onmessage = function (msg) {
    if (msg.offer) { // 监听并处理通过发信通道交付的远程提议
        pc = new RTCPeerConnection(ice);
        pc.setRemoteDescription(msg.offer);
        navigator.getUserMedia({ "audio": true, "video": true }, gotStream, logError);
    } else if (msg.candidate) { // 注册远程ICE候选项以开始连接检查
        pc.addIceCandidate(msg.candidate);
    }
}
function gotStream(evt) {
    pc.addstream(evt.stream);
    var local_video = document.getElementById('local_video');
    local_video.src = window.URL.createObjectURL(evt.stream);
    pc.createAnswer(function (answer) { // 生成描述端连接的SDP应答并发送到对端
        pc.setLocalDescription(answer);
        signalingChannel.send(answer.sdp);
    });
}
pc.onicecandidate = function (evt) {
    if (evt.candidate) {
        signalingChannel.send(evt.candidate);
    }
}
pc.onaddstream = function (evt) {
    var remote_video = document.getElementById('remote_video');
    remote_video.src = window.URL.createObjectURL(evt.stream);
}
function logError() { ... }

DataChannel

DataChannel支持端到端的任意应用数据交换，就像WebSocket一样，但是是端到端的。
建立RTCPeerConnection连接之后，两端可以打开一或多个信道交换文本或二进制数据。

其示例demo如下：

var ice = {
    'iceServers': [
        {'url': 'stun:stun.l.google.com:19302'},   // google公共测试服务器
        // {"url": "turn:[email protected]", "credential": "pass"}
    ]
};

// var signalingChannel =  new SignalingChannel();

var pc = new RTCPeerConnection(ice);

navigator.getUserMedia({'audio': true}, gotStream, logError);

function gotStream(stram) {
    pc.addStream(stram);

    pc.createOffer().then(function(offer){
        pc.setLocalDescription(offer);
    });
}

pc.onicecandidate = function(evt) {
    // console.log(evt);
    if(evt.target.iceGatheringState == 'complete') {
        pc.createOffer().then(function(offer){
            // console.log(offer.sdp);
            // signalingChannel.send(sdp);
        })
    }
}

function handleChannel(chan) {
    console.log(chan);
    chan.onerror = function(err) {}
    chan.onclose = function() {}
    chan.onopen = function(evt) {
        console.log('established');
        chan.send('DataChannel connection established.');
    }

    chan.onmessage = function(msg){
        // do something
    }
}


// 以合适的交付语义初始化新的DataChannel
var dc = pc.createDataChannel('namedChannel', {reliable: false});

handleChannel(dc);
pc.onDataChannel = handleChannel;


function logError(){
    console.log('error');
}

　　原文：https://segmentfault.com/a/1190000011403597

仅供个人学习和交流

MediaStreamの

RTCPeerConnection

DataChannel

おすすめ