什么是WebRTC

WebRTC是一個(gè)開(kāi)源項(xiàng)目，通過(guò)簡(jiǎn)單的API為Web瀏覽器和移動(dòng)的應(yīng)用程序提供實(shí)時(shí)通信功能。WebRTC支持瀏覽器之間的音頻、視頻和數(shù)據(jù)流，允許開(kāi)發(fā)人員構(gòu)建視頻聊天、文件傳輸和屏幕共享等應(yīng)用程序，而無(wú)需依賴第三方插件或擴(kuò)展。

WebRTC的關(guān)鍵組件

WebRTC由幾個(gè)關(guān)鍵組件組成，這些組件共同提供實(shí)時(shí)通信：

• getUserMedia：允許訪問(wèn)用戶的網(wǎng)絡(luò)攝像頭和麥克風(fēng)。
• RTCPeerConnection：管理建立和維護(hù)對(duì)等點(diǎn)之間連接的整個(gè)過(guò)程。
• RTCDataChannel：支持對(duì)等點(diǎn)之間的雙向數(shù)據(jù)傳輸，允許低延遲通信。

WebRTC協(xié)議

• WebRTC依賴于幾種協(xié)議來(lái)建立和維護(hù)對(duì)等體之間的連接：
• ICE（Interactive Connectivity Establishment）：通過(guò)NAT（Network Address Translators）和防火墻連接對(duì)等體的框架，ICE使用STUN和TURN服務(wù)器來(lái)發(fā)現(xiàn)和中繼網(wǎng)絡(luò)信息。
• STUN（Session Traffic Utilities for NAT）：一種允許客戶端發(fā)現(xiàn)其公有IP地址和所處NAT類型的協(xié)議。
• TURN（使用NAT周圍的中繼進(jìn)行傳輸）：為由于NAT限制或防火墻而無(wú)法建立直接連接的對(duì)等體提供中繼服務(wù)器的協(xié)議。

使用WebRTC獲取用戶IP地址

需要注意的是，使用WebRTC獲取用戶IP地址可能會(huì)引發(fā)隱私問(wèn)題。在收集任何信息（包括IP地址）之前，必須通知您的用戶并征得他們的同意。

要使用WebRTC獲取用戶的IP地址，您可以利用ICE流程，該流程在對(duì)等點(diǎn)之間交換網(wǎng)絡(luò)信息。在ICE過(guò)程中，瀏覽器收集本地IP地址并生成包含此信息的ICE候選。

創(chuàng)建RTCPeerConnection

開(kāi)始獲取用戶IP地址的過(guò)程，請(qǐng)使用ICE服務(wù)器創(chuàng)建一個(gè)RTCPeerConnection：

const iceServers = [
  {
    urls: "stun:stun.l.google.com:19302",
  },
];

const peerConnection = new RTCPeerConnection({ iceServers });

這個(gè)連接對(duì)象表示兩個(gè)對(duì)等體之間的連接，負(fù)責(zé)管理數(shù)據(jù)交換。

“stun：stun.l.google.com：19302”是由Google提供的公共STUN服務(wù)器，它是一個(gè)高度可靠的免費(fèi)公共STUN服務(wù)器。如果需要，您可以選擇使用自己的STUN服務(wù)器。

創(chuàng)建數(shù)據(jù)通道

對(duì)于某些瀏覽器（如Chrome），創(chuàng)建數(shù)據(jù)通道是觸發(fā)ICE進(jìn)程所必需的。您可以使用createDataChannel方法創(chuàng)建數(shù)據(jù)通道：

peerConnection.createDataChannel("");

處理 ICE 候選項(xiàng)

監(jiān)聽(tīng)onicecandidate事件以在生成ICE候選時(shí)收集IP地址：

peerConnection.onicecandidate = (event) => {
  console.log("RTC Peer Connection Ice Event:", event);
};

觸發(fā)ICE

調(diào)用createOffer和setLocalDescription方法觸發(fā)ICE進(jìn)程：

peerConnection
  .createOffer()
  .then((offer) => peerConnection.setLocalDescription(offer))
  .catch((error) => console.error("Error creating offer:", error));

提取IP地址

一旦我們收集了ICE候選項(xiàng)，我們就可以從中提取用戶的IP地址。每個(gè)ICE候選包含關(guān)于潛在網(wǎng)絡(luò)路徑的信息，包括IP地址和端口。

所以在onicecandidate中，我們可以創(chuàng)建一個(gè)正則表達(dá)式來(lái)提取IP地址，代碼如下：

const ipv4Regex =
  /\b((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

const ipv6Regex = /\b(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}\b/i;

const ipSet = new Set();

const onicecandidate = (ice: RTCPeerConnectionIceEvent) => {
  const candidate = ice?.candidate?.candidate;

  if (candidate) {
    for (const regex of [ipv4Regex, ipv6Regex]) {
      const [ip] = candidate.match(regex) ?? [];
      if (ip) {
        ipSet.add(ip);
      }
    }
  }
};

完整代碼

const ipv4Regex =
  /\b((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;

const ipv6Regex = /\b(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}\b/i;

// prettier-ignore
// @ts-expect-error
globalThis.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection

const publicIPs = (timeout = 1000) => {
  const ipSet = new Set();

  const onicecandidate = (ice: RTCPeerConnectionIceEvent) => {
    const candidate = ice?.candidate?.candidate;

    if (candidate) {
      for (const regex of [ipv4Regex, ipv6Regex]) {
        const [ip] = candidate.match(regex) ?? [];
        if (ip) {
          ipSet.add(ip);
        }
      }
    }
  };

  return new Promise((resolve, reject) => {
    const conn = new globalThis.RTCPeerConnection({
      iceServers: [
        {
          urls: 'stun:stun.l.google.com:19302',
        },
      ],
    });
    conn.addEventListener('icecandidate', onicecandidate);
    conn.createDataChannel('');
    conn.createOffer().then((offer) => conn.setLocalDescription(offer), reject);

    setTimeout(() => {
      try {
        conn.removeEventListener('icecandidate', onicecandidate);
        conn.close();
      } catch {
        // ignore
      }

      resolve([...ipSet]);
    }, timeout);
  });
};

publicIPs().then(console.log);

在完整代碼中，我添加了RTCPeerConnection的全局兼容性代碼?？紤]到一些網(wǎng)絡(luò)因素，您可能需要設(shè)置超時(shí)，因此我在這里設(shè)置了默認(rèn)超時(shí)1s。

限制和隱私問(wèn)題

雖然WebRTC方法在獲取IP地址方面是有效的，但它有一定的局限性，并引起了隱私問(wèn)題：

網(wǎng)絡(luò)限制

某些網(wǎng)絡(luò)和瀏覽器可能會(huì)出于隱私和安全原因限制WebRTC功能。在這種情況下，該方法可能無(wú)法按預(yù)期工作。

隱私問(wèn)題

使用WebRTC獲取IP地址可以被視為隱私問(wèn)題。在收集IP地址之前，請(qǐng)務(wù)必告知用戶您的意圖并征得他們的同意。

替代方法

除了WebRTC，您還可以使用其他方法來(lái)獲取用戶的IP地址。這些方法也可能存在局限性和隱私問(wèn)題：

HTTP請(qǐng)求

如果您可以控制服務(wù)器端應(yīng)用程序，則可以從HTTP請(qǐng)求頭中獲取用戶的IP地址。大多數(shù)Web服務(wù)器框架都提供了訪問(wèn)這些信息的簡(jiǎn)單方法。但是如果用戶位于代理或VPN后面，則此方法可能無(wú)法正常工作。

第三方api

您可以使用第三方IP地址查找服務(wù)（如ipify或ip-api）來(lái)獲取用戶的IP地址。這些服務(wù)通常提供一個(gè)簡(jiǎn)單的RESTful API來(lái)獲取JSON格式的用戶IP地址。請(qǐng)注意，依賴第三方服務(wù)可能會(huì)導(dǎo)致隱私問(wèn)題，如果提供商遇到停機(jī)或速率限制，可能會(huì)導(dǎo)致服務(wù)中斷。

結(jié)論

WebRTC是一種強(qiáng)大的技術(shù)，可以實(shí)現(xiàn)Web瀏覽器之間的實(shí)時(shí)通信。它還可以用于獲取用戶IP地址，這在某些情況下可能很有用。但是考慮與此方法相關(guān)的限制和隱私問(wèn)題至關(guān)重要。在收集任何個(gè)人信息（包括IP地址）之前，請(qǐng)始終告知您的用戶您的意圖并征得他們的同意。

以上就是詳解如何在在瀏覽器中使用WebRTC獲取用戶IP地址的詳細(xì)內(nèi)容，更多關(guān)于WebRTC獲取用戶IP地址的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論