远程服务器通过WebRTC获取用户本地局域网(内网) IP地址

原创
1 4467
时 间:2018-02-02 14:01
分 类:JavaScript
来 源:鹏爷
标 签:WebRTC外网获取内网IP

什么是WebRTC?


WebRTC,是网页实时通信(Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频对话的技术。

WebRTC 实现了基于网页的视频会议,标准是 WHATWG 协议,目的是通过浏览器提供简单的 Javascript 就可以做到实时通讯。WebRTC 项目的最终目的主要是让 Web 开发者能够基于浏览器轻易快捷地开发出丰富的实时多媒体应用,而无需下载安装任何插件,Web 开发者也无需关注多媒体的数字信号处理过程,只需编写简单的 Javascript 程序即可实现。


WebRTC的浏览器支持情况


桌面上从 Chrome 23 、 Firefox 22 、 Opera 18 开始支持 WebRTC, Internet Explorer 和 Safari 尚未支持 WebRTC。具体可以在此页面查看https://caniuse.com

直接搜索WebRTC即可查看

<!DOCTYPE html>    
<html>    
  <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
    <title>通过WebRTC获得内外网IP</title>    
  </head>    
  <body>    
    <h4>本测试方法由 <a href="https://github.com/diafygi/webrtc-ips" target="_blank">https://github.com/diafygi/webrtc-ips</a> 提供</h4>    
    <h4>内网IP:</h4>    
    <ul></ul>    
    <h4>公网IP:</h4>    
    <ul></ul>    
    <h4>公网IPv6:</h4>    
    <ul></ul>    
    <script>    
    //得到账户关联的IP地址    
    function getIPs(callback) {    
        var ip_dups = {};    
        //对Firefox和Chrome兼容    
        var RTCPeerConnection = window.RTCPeerConnection    
                             || window.mozRTCPeerConnection    
                             || window.webkitRTCPeerConnection;    
        //绕过对RTC的阻止    
        if (!RTCPeerConnection) {    
            var iframe = document.createElement('iframe');    
            iframe.style.display = 'none';    
            document.body.appendChild(iframe);    
            var win = iframe.contentWindow;    
            window.RTCPeerConnection = win.RTCPeerConnection;    
            window.mozRTCPeerConnection = win.mozRTCPeerConnection;    
            window.webkitRTCPeerConnection = win.webkitRTCPeerConnection;    
            RTCPeerConnection = window.RTCPeerConnection    
                             || window.mozRTCPeerConnection    
                             || window.webkitRTCPeerConnection;    
        }    
        //要求最小的数据连接    
        var mediaConstraints = {    
            optional: [{ RtpDataChannels: true }]    
        };    
        //Firefox在about:config中设置了默认stun服务器,但在Firefox41中不再默认指定stun地址    
        //    media.peerconnection.default_iceservers =    
        //    [{"url": "stun:stun.services.mozilla.com"}]    
        var servers = { iceServers: [{ urls: "stun:stun.services.mozilla.com" }] };    
        //new一个RTCPeerConnection    
        var pc = new RTCPeerConnection(servers, mediaConstraints);    
        //监听candidate事件    
        pc.onicecandidate = function (ice) {    
            //跳过非candidate事件    
            if (ice.candidate) {    
                //匹配IP地址    
                var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;    
                var ip_addr = ip_regex.exec(ice.candidate.candidate)[1];    
                //去重    
                if (ip_dups[ip_addr] === undefined)    
                    callback(ip_addr);    
                ip_dups[ip_addr] = true;    
            }    
        };    
        //虚构一个数据通道    
        pc.createDataChannel("");    
        //create an offer sdp    
        pc.createOffer(function (result) {    
            //触发stun服务器的请求    
            pc.setLocalDescription(result, function () { }, function () { });    
        }, function () { });    
    }    
    getIPs(function (ip) {    
        var li = document.createElement("li");    
        li.textContent = ip;    
        //本地IP    
        if (ip.match(/^(192\.168\.|169\.254\.|10\.|172\.(1[6-9]|2\d|3[01]))/))    
            document.getElementsByTagName("ul")[0].appendChild(li);    
        //IPv6    
        else if (ip.match(/^[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7}$/))    
            document.getElementsByTagName("ul")[2].appendChild(li);    
        //公网IP    
        else    
            document.getElementsByTagName("ul")[1].appendChild(li);    
    });    
    </script>    
  </body>    
</html>


本站该代码测试地址 http://test.ijishu.vip/net.html

评论
  • 2018-03-02 13:32

    WebRTC 没有接触过,但是确实很好用