webrtcice的详细阐述

一、webrtcice简介

WebRTC是一种实时的Web通信协议，它可以在不需要安装任何软件或插件的情况下建立点对点（P2P）连接。 WebRTC协议有三个核心的组成部分：

• 获取音频/视频流的getUserMedia API
• 点对点连接的PeerConnection API
• 数据交换的DataChannel API

webrtcice是一种基于ICE协议的开源库，主要用于WebRTC中的NAT穿越、防火墙穿越以及IP地址交换的功能。

二、webrtcice的作用

WebRTC在进行本地主机和远程主机之间的连接时，需要通过NAT穿透、防火墙穿透等过程，这个过程是由ICE（Interactive Connectivity Establishment）协议来实现的。webrtcice作为一种基于ICE协议的库，可以协助WebRTC进行NAT穿越、防火墙穿越等操作，保证双方能够建立稳定的连接。webrtcice实际上是对STUN和TURN服务器端的封装，让使用者便于调用。

三、webrtcice的使用

使用webrtcice需要包含以下步骤：

• 准备STUN/TURN服务器
• 初始化webrtcice库
• 构造PeerConnection对象
• 添加ICE服务器
• 连接远程主机
• 数据交换

//准备STUN/TURN服务器
var iceServers = [
  { urls: "stun:stun.example.org" },
  { urls: "turn:turn.example.org", username: "user", credential: "password" }
];
//初始化webrtcice库
var iceTransportPolicy = "relay"; // 强制使用TURN服务器进行连接
var config = { iceServers: iceServers, iceTransportPolicy: iceTransportPolicy };
var pc = new RTCPeerConnection(config);
//构造PeerConnection对象
pc.createOffer().then(function(offer) {
  return pc.setLocalDescription(offer);
}).then(function() {
  // 添加ICE服务器
  pc.onicecandidate = function(event) {
    if (event.candidate) {
      peerConn.addIceCandidate(event.candidate)
        .then(() => console.log("addIceCandidate success"))
        .catch(e => console.error("addIceCandidate failed", e));
    }
  };
}).catch(function(e) {
  console.error(e);
});
//连接远程主机
pc.createAnswer().then(function(answer) {
  return pc.setRemoteDescription(answer);
}).catch(function(e) {
  console.error(e);
});
//数据交换
pc.ontrack = function(event) {
  // ...
};

四、webrtcice的示例代码

以下示例演示了如何使用webrtcice库建立点对点连接：

//获取本地音视频流
navigator.mediaDevices.getUserMedia({
  audio: true,
  video: true
})
.then(function(stream) {
  //初始化webrtcice库
  var config = {
    iceServers: [
      { urls: "stun:stun.example.org" },
      {
        urls: "turn:turn.example.org",
        username: "user",
        credential: "password"
      }
    ]
  };
  var pc = new RTCPeerConnection(config);
  //添加本地音视频流
  pc.addStream(stream);
  //监听远程音视频流的到来
  pc.addEventListener("addstream", function(evt) {
    remoteVideo.srcObject = evt.stream;
  });
  //添加对等连接的ICE服务器
  pc.addEventListener("icecandidate", function(evt) {
    if (evt.candidate) {
      //发送ICE候选到对等体
      send({
        type: "candidate",
        candidate: evt.candidate
      });
    }
  });
  //监听SDP offer并作出响应
  pc.addEventListener("negotiationneeded", function() {
    pc.createOffer().then(function(offer) {
      return pc.setLocalDescription(offer);
    }).then(function() {
      //将SDP offer发送给远程对等体
      send({
        type: "offer",
        offer: pc.localDescription
      });
    }).catch(function(e) {
      console.error(e);
    });
  });
  //处理来自远程的SDP offer
  function handleOffer(offer) {
    pc.setRemoteDescription(new RTCSessionDescription(offer))
      .then(function() {
        return pc.createAnswer();
      })
      .then(function(answer) {
        return pc.setLocalDescription(answer);
      })
      .then(function() {
        //向远程对等体发送SDP answer
        send({
          type: "answer",
          answer: pc.localDescription
        });
      })
      .catch(function(e) {
        console.error(e);
      });
  }
  //处理来自远程的candidate事件
  function handleCandidate(candidate) {
    pc.addIceCandidate(new RTCIceCandidate(candidate))
      .catch(function(e) {
        console.error(e);
      });
  }
  //WebSocket服务器的回调函数
  function onMessage(event) {
    var data = JSON.parse(event.data);
    switch (data.type) {
      case "offer":
        handleOffer(data.offer);
        break;
      case "answer":
        pc.setRemoteDescription(new RTCSessionDescription(data.answer))
          .catch(function(e) {
            console.error(e);
          });
        break;
      case "candidate":
        handleCandidate(data.candidate);
        break;
    }
  }
})
.catch(function(e) {
  console.error(e);
});