在一些终端设备或者有特殊需求的地方,我们需要使用js在本地获取当前客户端的ip地址,js本身是没有相关的API或者功能的,结合我平时开发视频通讯的WebRTC协议,可以连接一些开放源来实现获取本地的ip地址,包括IPV4,局域网ip,网关等,下面是我简单实现的一个示例
const getIPs = (callback) => {
var ip_dups = {};
var RTCPeerConnection = window.RTCPeerConnection
|| window.mozRTCPeerConnection
|| window.webkitRTCPeerConnection;
var useWebKit = !!window.webkitRTCPeerConnection;
var mediaConstraints = {
optional: [{ RtpDataChannels: true }]
};
// 这里就是需要的ICEServer了
var servers = {
iceServers: [
{ urls: "stun:stun.services.mozilla.com" },
{ urls: "stun:stun.l.google.com:19302" },
]
};
var pc = new RTCPeerConnection(servers, mediaConstraints);
function handleCandidate(candidate) {
var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/
var hasIp = ip_regex.exec(candidate)
if (hasIp) {
var ip_addr = ip_regex.exec(candidate)[1];
if (ip_dups[ip_addr] === undefined)
callback(ip_addr);
ip_dups[ip_addr] = true;
}
}
// 网络协商的过程
pc.onicecandidate = function (ice) {
if (ice.candidate) {
handleCandidate(ice.candidate.candidate);
}
};
pc.createDataChannel("");
//创建一个SDP(session description protocol)会话描述协议 是一个纯文本信息 包含了媒体和网络协商的信息
pc.createOffer(function (result) {
pc.setLocalDescription(result, function () { }, function () { });
}, function () { });
setTimeout(function () {
var lines = pc.localDescription.sdp.split('\n');
lines.forEach(function (line) {
if (line.indexOf('a=candidate:') === 0)
handleCandidate(line);
});
}, 1000);
}
调用
/**
* ipv4
* 局域网地址
* 局域网网关
*/
getIPs((ip) => {console.log(ip)})
网友评论