如何获取本地客户端ip信息

有两种可以方案可以实现，其原理一致

方案一：

封装成一个可以直接调用的方法，通过localStorage来存储获取到的ip_addr（或者Vuex存储），然后我们只需要通过localStorage.getItem('ip_addr'))就可以获取到我们的内网IP地址了。

function getUserIP(){
   var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
   if (RTCPeerConnection) (()=>{
       var rtc = new RTCPeerConnection()
       rtc.createDataChannel(''); //创建一个可以发送任意数据的数据通道
       rtc.createOffer( offerDesc => { //创建并存储一个sdp数据
           rtc.setLocalDescription(offerDesc)
       }, e => { console.log(e)})
       rtc.onicecandidate =(evt) => { //监听candidate事件
          if (evt.candidate) {
             var ip_addr = evt.candidate.address
             console.log(ip_addr)
          }}
       })()
  else{console.log("目前仅测试了chrome浏览器OK")}
}
getUserIP()

方案二

function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
   //compatibility for firefox and chrome
     var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
     var pc = new myPeerConnection({
         iceServers: []
     }),
     noop = function() {},
     localIPs = {},
     ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
     key;
            
     function iterateIP(ip) {
        if (!localIPs[ip]) onNewIP(ip);
           localIPs[ip] = true;
        }
            
        //create a bogus data channel
        pc.createDataChannel("");
            
        // create offer and set local description
        pc.createOffer().then(function(sdp) {
            sdp.sdp.split('\n').forEach(function(line) {
                if (line.indexOf('candidate') < 0) return;
                line.match(ipRegex).forEach(iterateIP);
            });
                    
            pc.setLocalDescription(sdp, noop, noop);
        }).catch(function(reason) {
             // An error occurred, so handle the failure to connect
        });
            
        //sten for candidate events
        pc.onicecandidate = function(ice) {
           if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
           ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
        };
}
            
 // Usage
            
 getUserIP(function(ip){
     console.log("Got IP! :" + ip);
 });

方案一问题：会发现在谷歌浏览器上输出的是一段编码，不是我们想要的ip格式

方案二问题：sdp下没有我们想要的'candidate'数据，getUserIP方法调用无返回信息

 原因：如果candidate.match的报错或者无值，是因为谷歌对本地ip进行编码，变成了114...93e85.local的形式，要开放谷歌浏览器的功能，才能得到值，所以如果应用场景不在浏览器可控的情形下不可采用此方式。

解决方案：

1. 谷歌上输入 chrome://flags/
2. 搜索#enable-webrtc-hide-local-ips-with-mdns
3. 设置此项为 disable