如何解决Cannot read property '1' of null at RTCPeerConnection.conn.onicecandidate错误

发布者：前端集合 // 发布时间：2019-09-09 07:35:00 // 分类：经验记录 // 访问: 7,268 次 // 热度:

起因

在本地开发进行预览的时候，经常需要用到localhost。可是localhost自己用很方便，但是给其他同事看就不行了。

所以，一般给个192.168的内网地址给同事查看。但是这种情况问题又来了：如果公司本机ip可以固定还好说，如果智能设置动态ip，那ip每次都变，每次给同事发本地192.168的网址就麻烦了。

解决方案

网上有段代码，可以通过浏览器的webRTC功能获取本机内网ip。代码如下：

// ==UserScript==
// @name         Redirect localhost or 127.0.0.1 to your pc's true ip address
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Redirect localhost or 127.0.0.1 to your pc's true ip address. 自动将浏览器url的localhost或127.0.0.1跳转到本机当前ip地址，方便web开发。
// @author       aisin
// @include      http://localhost*
// @include      http://127.0.0.1*
// @grant        none
// ==/UserScript==

// 代码来源网络，本人只是稍作修改以方便遇到和我同样问题的人，如有侵权请留言告知，我好删除，谢谢。
(function () {
    'use strict';

    var conn = new RTCPeerConnection({
        iceServers: []
    });

    var noop = function () {};

    conn.onicecandidate = function (ice) {
        if (ice.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 ip_addr = ip_regex.exec(ice.candidate.candidate)[1];
            var url = window.location.href;

            window.location = url.replace(/localhost|127.0.0.1/gi, ip_addr);
            conn.onicecandidate = noop;
        }
    };

    conn.createDataChannel('aisin');
    conn.createOffer(conn.setLocalDescription.bind(conn), noop);
})();

通过 chrome 扩展安装 tampermonkey ，然后安装以上脚本(脚本地址：Redirect localhost or 127.0.0.1 to your pc's true ip address)，即可在浏览器输入 localhost 时，自动跳转到本机内网 ip 上去。

又出现了新的问题

上述方案本来很好的解决了内网 localhost 自动跳转到内网 ip 的问题。可是在最新版的chrome中，使用上述脚本会报错：

Cannot read property '1' of null at RTCPeerConnection.conn.onicecandidate

原因是因为 chrome 默认关闭了通过 webRTC 获取本机 ip 的功能。

新问题的解决方案

• 1. 在chrome地址栏输入：chrome://flags/#enable-webrtc-hide-local-ips-with-mdns
• 2. 把 Anonymize local IPs exposed by WebRTC 设置为 disabled。

重启浏览器，问题解决。

Tags: webrtc, webrtc 获取本机 ip