获取内网IP地址

2023-11-13

工作中遇到一个需求,要求根据不同场地的IP地址,显示相应的大屏页面。

  1. 首先要配置一下Chrome浏览器
    1)在Chrome浏览器中输入:chrome://flags/
    2)搜索 #enable-webrtc-hide-local-ips-with-mdns 该配置 并将属性改为disabled;
    3)点击relaunch 浏览器即可查看到本机的内网IP地址。
  2. 代码部分
const  getIPs =(callback) => {
  var ip_dups = {};
  //compatibility for firefox and chrome
  var RTCPeerConnection =
    window.RTCPeerConnection ||
    window.mozRTCPeerConnection ||
    window.webkitRTCPeerConnection;
  var useWebKit = !!window.webkitRTCPeerConnection;
  //bypass naive webrtc blocking
  if (!RTCPeerConnection) {
    //create an iframe node
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
    //invalidate content script
    iframe.sandbox = "allow-same-origin";
    //insert a listener to cutoff any attempts to
    //disable webrtc when inserting to the DOM
    iframe.addEventListener(
      "DOMNodeInserted",
      function (e) {
        e.stopPropagation();
      },
      false
    );
    iframe.addEventListener(
      "DOMNodeInsertedIntoDocument",
      function (e) {
        e.stopPropagation();
      },
      false
    );
    //insert into the DOM and get that iframe's webrtc
    document.body.appendChild(iframe);
    var win = iframe.contentWindow;
    RTCPeerConnection =
      win.RTCPeerConnection ||
      win.mozRTCPeerConnection ||
      win.webkitRTCPeerConnection;
    useWebKit = !!win.webkitRTCPeerConnection;
  }
  //minimal requirements for data connection
  var mediaConstraints = {
    optional: [{ RtpDataChannels: true }],
  };
  //firefox already has a default stun server in about:config
  //    media.peerconnection.default_iceservers =
  //    [{"url": "stun:stun.services.mozilla.com"}]
  var servers = undefined;
  //add same stun server for chrome
  if (useWebKit)
    servers = { iceServers: [{ urls: "stun:stun.services.mozilla.com" }] };
  //construct a new RTCPeerConnection
  var pc = new RTCPeerConnection(servers, mediaConstraints);
  function handleCandidate(candidate) {
    //match just the IP address
    var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
    var ip_addr = ip_regex.exec(candidate)[1];
    //remove duplicates
    if (ip_dups[ip_addr] === undefined) callback(ip_addr);
    ip_dups[ip_addr] = true;
  }
  //listen for candidate events
  pc.onicecandidate = function (ice) {
    //skip non-candidate events
    if (ice.candidate) handleCandidate(ice.candidate.candidate);
  };
  //create a bogus data channel
  pc.createDataChannel("");
  //create an offer sdp
  pc.createOffer(
    function (result) {
      //trigger the stun server request
      pc.setLocalDescription(
        result,
        function () {},
        function () {}
      );
    },
    function () {}
  );
  //wait for a while to let everything done
  setTimeout(function () {
    //read candidate info from local description
    var lines = pc.localDescription.sdp.split("\n");
    lines.forEach(function (line) {
      if (line.indexOf("a=candidate:") === 0) handleCandidate(line);
    });
  }, 1000);
}
export default getIPs;

然后去在使用的位置调用这个方法。

 getIPs(function(ip){
      console.log("获取的内网IP为::", ip);
        let params = { ip: ip };
 }

搜索了很长时间,获取内网地址目前就找到了这一个方法,至少获取公网地址要简单点,有现成的开发好的接口可以使用。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

获取内网IP地址 的相关文章

  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge
  • 有没有办法将 Google 文档分割成多个 PDF?

    我想在 Google Scripts VBA 代码中复制我为 Word 文档编写的代码 基本上 它通过搜索我插入文档中的标签 将文档 切片 为多个 PDF 文件 目的是允许合唱团使用 forScore 管理乐谱的应用程序 在切片点插入先前注
  • 如何将节点 sqlite3 与 q (promise) 一起使用

    我正在尝试将 Promise 与 sqlite3 一起使用 这是我的源代码的一部分 this deleteTag function tag project var db this db if project return q nfcall
  • Chrome 跨域 PATCH 请求不起作用

    我有一个带有 REST Api 的网站 现在我正在创建一个浏览器扩展 它将从某些页面收集数据并将它们发送回 REST Api 因为我希望我的扩展能够与 Firefox 和 Chrome 兼容 并且易于维护 所以我将实际代码作为脚本标记注入到
  • Moment.js 动态更新时间(以秒为单位)

    我试图显示时钟 that 每秒更新一次 e g 2015 年 1 月 5 日 12 05 01 它似乎对我来说工作得很好 对于相同的代码 并且只有 moment min js 指向v2 11 0 看看代码 来源 MilkyWayJoe va
  • dc lineChart 单击时弹出数据点信息

    我正在尝试检测折线图数据点上的点击 Per this answer dc scatter plot binding onClick event https stackoverflow com a 22772340 1873386 I am
  • 获取输入图像类型选择的图片并加载到图像标签中

    所以 我有一个用于上传 img 文件的输入框 我想要做的是从该数据 或选定的源 中获取数据并将其路由到图像标签的 src 属性中 像这样的东西 http jsfiddle net QC2c4 http jsfiddle net QC2c4
  • UpdatePanel 启动脚本未执行

    我正在编写一个在 SharePoint 网站中使用的 ASP NET Web 部件 并尝试使用 UpdatePanel 来呈现查询结果 我想使用 JQuery 插件来修改从异步回发返回的表 但我无法让启动脚本在异步更新上执行 我发现这个帖子
  • Google 地图 Javascript v3 折线点击事件

    我正在尝试显示一张地图 其中有多条路线布置为折线 单击多段线时 我想显示特定于该线的数据 将数据与线关联不是问题 但无论单击哪条线 显示的数据都会与最近绘制的线关联 就好像每条新折线都会覆盖最后一条线一样 我有一个数据库 其中包含 gpx
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • 如何处理 setTimeout() 的多个实例?

    阻止创建 setTimeout 函数的多个实例 在 JavaScript 中 的最推荐 最佳方法是什么 一个例子 伪代码 function mouseClick moveDiv div 0001 mouseX mouseY function
  • FullCalendar:如何重新创建/重新初始化 FullCalendar 或批量添加多个事件

    我正在尝试将新事件批量添加到日历中 但未能找到方便的使用方法 所以我决定用新的事件数组重新初始化视图 所以我尝试了以下方法 var events title Event start new Date y m d 10 description
  • 如何使用转义的 unicode 解码字符串?

    我不确定这叫什么 所以我在搜索时遇到了麻烦 如何使用 unicode 解码字符串http u00253A u00252F u00252Fexample com to http example com使用 JavaScript 我试过unes
  • React Router Tabs——保持组件安装

    我使用 React Router 创建了选项卡 每个选项卡都有不同的路线 但是 我想通过保持隐藏选项卡的安装来维护选项卡转换之间的选项卡状态 我该如何实现这一目标 每次路由切换时 React 路由器都会重新安装每个组件 已经有人问过这个问题
  • 如何在react.js中将/n替换为换行符?

    我正在尝试更换每一个 n to a br tag in ReactJS In my note note对象有一个包含多个的字符串 n in it 示例注释 注释 test ntest ntest 我尝试过的ReactJS note note
  • 如何使用 Chart.js 版本 3.2.1 在圆环图中添加文本

    我正在使用 Canvas 在 HTML 中使用 如何使用在圆环图中添加文本 这是我的 javascript 代码和 HTML 代码 我使用了图表js版本3 2 1 所以请给出相同版本 3 的解决方案 var overallStatsCanv
  • 为什么 phantomjs 不能在 MacOS Sierra 中工作?

    我们正在使用phantomjs 1 9 1 macosx phantomjs 2 0 0 macosx哪一个工作得很好OS X 埃尔卡皮坦更新后macOS 塞拉利昂它会引发以下错误 phantomjs 1 9 1 macosx phanto
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM
  • 加载谷歌地图控件时是否有事件?

    我知道tilesloaded 但控件似乎在该事件之后加载 我基本上希望能够通过 jQuery 获取控件 但甚至找不到正确的监听 我也刚刚处理了 没有类似的事件 在控件可见之前空闲和tilesloaded触发 因此 基本上将 特殊控制 类添加

随机推荐

  • 基于深度学习的图像配准

    人的眼睛或者相机的FOV 视场 有限 所以很难将景色尽收眼底 医疗影像设备同样受限于FOV的大小 很难同时扫描整个解剖部位 这时就需要拼接算法将不同角度拍摄的部分图像拼成一幅全景图 我之前写过一篇关于图像拼接的文章 图像拼接并不像你想的那么
  • 关于链表的建立与操作(c++实现)

    关于链表的建立与操作 目录 1 链表的定义 2 单链表的基本操作 3 循环链表及其操作 4 双向链表及其操作 5 用数组模拟链表 一 链表的定义 因为线性表是静态线性的存储结构 所以为了方便动态地对数据进行处理 我们引入链表这一数据结构 因
  • elk笔记13--Queries-geo queries

    elk笔记13 Queries geo queries 1 geo查询简介 2 geo 查询案例 3 说明 1 geo查询简介 geo queries 地理位置查询 支持2类geo数据 分别为geo point 和geo shape 2中类
  • 16-数据结构-图的存储结构

    简介 主要为图的顺序存储和链式存储 其中顺序存储即邻接矩阵的画法以及代码 邻接矩阵又分为有权图和无权图 区别就是有数据的地方填权值 无数据的地方可以填0或者 而有权图和无权图 又细分为有向图和无向图 无向图为对称矩阵 因为没有方向可言 出度
  • nRF52832 — 使用nRF52832的I2S播放音频

    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XX 作 者 文化人 XX 联系方式 XX 版权声明 原创文章 欢迎评论和转载 转载时能告诉我一声就最好了 XX 要说的话
  • VSCode命令行常用快捷操作

    一 VSCode基本设置 1 打开命令面板 F1 或 Command Shift P 2 将VSCode安装到系统环境变量 打开命令面板 搜索PATH 选择在PATH中安装code命令 然后重启终端就可以生效 以后在命令行就可以通过code
  • uniapp软键盘把界面顶起问题解决

    pages json文件加上解决 app plus softinputMode adjustResize pages path pages index index style navigationBarTitleText 中奥一卡通 app
  • GoJS-FlowChart样例代码分析

    var go GraphObject make 别名 方便使用 myDiagram go Diagram myDiagramDiv 通过id指定画布绑定的div LinkDrawn showLinkLabel 监听LinkDrawn事件 其
  • Canvas-drawImage无法绘图,出现空白的解决办法

    目录 文章目录 问题剖析 解决办法 例子代码 测试样例 问题剖析 在操作drawImage 函数时 经常会出现调取正常 但canvas绘制出现空白的情况 这种情况 原因可以归为 浏览器在加载图片时 图片尚未加载完毕 便开始绘图 主要原因为
  • 本地项目上传到gitlab上

    1 gitlab上新建项目 2 本地操作 进入到项目目录 打开git操作命令窗口 鼠标右键选择Git Bash Here 1 将git初始化至该目录下 会生成 git配置文件 执行命令 git init 2 将远程的仓库分支来取到本地 执行
  • Qt信号详解

    QAbstractButton clicked 按下松开后执行 pressed 按下后执行 released 松开后执行 clicked bool checked 需要选中checkable属性 每次点击checked的值都会切换 可以使用
  • Linux 下配置JDK 并运行springboot项目进行访问 Tomcat的安装

    前言 记忆 1 步骤 一 JDK安装 我们开发java程序必须要的环境 1 下载JDK rpm 去oralce 官网下载即可 百度jdk即可 2 安装java环境 检测当前系统是否存在java环境 java version 如果有的话就需要
  • 机器学习入门教学——人工智能、机器学习、深度学习

    1 人工智能 人工智能相当于人类的代理人 我们现在所接触到的人工智能基本上都是弱AI 主要作用是正确解释从外部获得的数据 并对这些数据加以学习和利用 以便灵活的实现特定目标和任务 例如 阿尔法狗 智能汽车 简单来说 人工智能使机器像人类一样
  • 后端转前端,该如何快速学习

    后端转前端还是比较容易的 学习难度降低了 多花点时间实操 基本可以接手项目 首先初学者要知道web前端工程师的目前核心技术 主要有HTML5 CSS JavaScript JQuery Ajax等技术 而且想要成为一名优秀的web前端工程师
  • 4月13面试网络工程师实习岗位的感想

    第一个自我介绍 说一下自我介绍吧 面试官一来就叫我自我介绍 这是必须的 然后我就说了一下我叫谁 我现在读大几 学什么专业 然后说一下平时爱听音乐 打球啊 爬山啊 爱看电影 然后说到爱看电影 面试官就笑了 然后就行了 就开始问问题了 聊聊天了
  • zookeeper、dubbo、kafka简单了解

    1 zookeeper如何实现高可用 1 zookeeper 多台构成集群实现高可用 有三种角色群首 leader 追随者 follower 观察者 observer Leader作为整个ZooKeeper集群的主节点 负责响应所有对Zoo
  • 自动化设计-框架介绍

    3 框架介绍 由于软件测试的工作量很大 40 到60 的总开发时间 而又有很大部分适于自动化 因此 测试的改进会对整个开发工作的质量 成本和周期带来非常显著的效果 通过第二部分对Ruby Watir框架的介绍 下面我们正式进入自动化测试框架
  • XSS跨站脚本攻击

    以下是自己的一些见解与总结 若有不足或者错误的地方请各位指出 目录 1 简介 2 XSS攻击的危害包括 3 XSS攻击分类 4 XSS攻击实例分析 5 XSS漏洞修复 1 简介 跨站脚本 cross site script 为了避免与样式c
  • Python~ModuleNotFoundError: No module named ‘pydotplus‘

    错误代码 import pydotplus 错误原因 没有安装pydotplus库 解决方案 安装对应的库 pip install pydotplus 重新导入模块 import pydotplus
  • 获取内网IP地址

    工作中遇到一个需求 要求根据不同场地的IP地址 显示相应的大屏页面 首先要配置一下Chrome浏览器 1 在Chrome浏览器中输入 chrome flags 2 搜索 enable webrtc hide local ips with m