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);
});