HTML5 WebRTC API無需網絡獲取本地IP

因需求須要獲取客戶端的本機IP，國內資料基本上都是經過向一個IP網站發送請求並獲取IP，這樣有必定概率泄露本身的IP，在內網環境下也並不適用。

後來在stackoverflow上找到一種解決辦法，用WebRTC API直接在本地獲取IP，在目前的情境下相對可行，但目前WebRTC只支持Chrome和Firefox、以及Webkit內核的Opera。IE/Edge的兼容彷佛須要用Object RTC，後者仍有待商榷。

注：createOffer方法使用Promise方式進行成功後的處理。

function findIP(onNewIP) { //  onNewIp - your listener function for new IPs
  var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
  var pc = new myPeerConnection({iceServers: []}), // 空的ICE服務器（STUN或者TURN）
    noop = function() {},
    localIPs = {}, //記錄有沒有被調用到onNewIP這個listener上
    ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
    key;

  function ipIterate(ip) {
    if (!localIPs[ip]) onNewIP(ip);
    localIPs[ip] = true;
  }
  pc.createDataChannel(""); //create a bogus data channel
  pc.createOffer().then(function(sdp) {
    sdp.sdp.split('\n').forEach(function(line) {
      if (line.indexOf('candidate') < 0) return;
      line.match(ipRegex).forEach(ipIterate);
    });
    pc.setLocalDescription(sdp, noop, noop);
  }); // create offer and set local description
  pc.onicecandidate = function(ice) { //listen for candidate events
    if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
    ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
  };
}



var ul = document.createElement('ul');
ul.textContent = 'Your IPs are: '
document.body.appendChild(ul);

function addIP(ip) {
  console.log('got ip: ', ip);
  var li = document.createElement('li');
  li.textContent = ip;
  ul.appendChild(li);
}

findIP(addIP);