Finding the IP address of the client within the same network

Question

Finding the IP address of the client within the same network

After extensive research and Google searches, I have successfully obtained the local client IP address using JQuery in my Angular 6 project. However, upon building the application, I encountered errors that I believe are due to the JQuery code (specifically window.something) integrated within Angular.

Does anyone know how to achieve this solely with Angular, without relying on JQuery or third-party URLs like and other similar websites?

Code:

    ngOnInit() {
        var self = this;
        var localIp1 = ""; 
        $(document).ready(function(){
            window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;  
            var pc = new RTCPeerConnection({iceServers:[]}), 
            noop = function(){}; 

            pc.createDataChannel("");
            pc.createOffer(pc.setLocalDescription.bind(pc), noop);   
            pc.onicecandidate = function(ice){
                if(!ice || !ice.candidate || !ice.candidate.candidate)  return;

                var localIp = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(ice.candidate.candidate)[1];
               // this.localIpAddress = myIP;
                localIp = localIp.replace(/\./g, '-');
                sessionStorage.setItem("LOCAL_IP", localIp);
                $.ajax({ 
                    type: "GET",
                    dataType: "json",
                    url: "http://localhost:8080/api/setLocalIpAddress/" + localIp,
                    success: function(data){        
                      console.log(data);
                    }
                 });
            };
        });
        this.localIp = sessionStorage.getItem("LOCAL_IP");
}

Error:

ERROR in src/app/selectline/select-line.component.ts(35,20): error TS2339: Property 'RTCPeerConnection' does not exist on type 'Window'.
src/app/selectline/select-line.component.ts(35,47): error TS2339: Property 'RTCPeerConnection' does not exist on type 'Window'.
src/app/selectline/select-line.component.ts(35,75): error TS2339: Property 'mozRTCPeerConnection' does not exist on type 'Window'.
src/app/selectline/select-line.component.ts(35,106): error TS2339: Property 'webkitRTCPeerConnection' does not exist on type 'Window'.
src/app/selectline/select-line.component.ts(39,16): error TS2339: Property 'createDataChannel' does not exist on type 'RTCPeerConnection'.

Thanks a lot in advance for any help!

jquery angular typescript

Answer 1

Answer №1

I successfully adjusted the code provided and created a sample StackBlitz without relying on jQuery or external libraries. To view the running code, you can visit this example StackBlitz.

As explained in my previous comment, incorporating module augmentation from the TypeScript handbook is essential for this task. In order to enhance the window object to acknowledge the global properties being accessed, I included the following code snippet:

declare global {
  interface Window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

The current specification for RTCPeerConnection seems to have changed compared to the original code reference. Adapting it to align with the updated spec led me to revise the code as follows:

import { Component, NgZone } from '@angular/core';

// Module Augmentation
declare global {
  interface Window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  localIp = sessionStorage.getItem('LOCAL_IP');
  
  // Regular Expression for IP Address
  private ipRegex = new RegExp(/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7}/);

  constructor(private zone: NgZone) {
  }

  ngOnInit() {
    this.determineLocalIp();
  }
  
  private determineLocalIp() {
    window.RTCPeerConnection = this.getRTCPeerConnection();

    const pc = new RTCPeerConnection({ iceServers: [] });
    pc.createDataChannel('');
    pc.createOffer().then(pc.setLocalDescription.bind(pc));

    pc.onicecandidate = (ice) => {
      this.zone.run(() => {
        if (!ice || !ice.candidate || !ice.candidate.candidate) {
          return;
        }

        this.localIp = this.ipRegex.exec(ice.candidate.candidate)[1];
        sessionStorage.setItem('LOCAL_IP', this.localIp);
        
        pc.onicecandidate = () => {};
        pc.close();
      });
    };
  }

  private getRTCPeerConnection() {
    return window.RTCPeerConnection ||
      window.mozRTCPeerConnection ||
      window.webkitRTCPeerConnection;
  }
}

It's important to note that the logic inside the onicecandidate method will operate outside the Angular zone, meaning any changes to component properties will not trigger UI updates within Angular. To ensure Angular recognizes these changes, it's necessary to obtain an Angular zone reference and execute the code within it using this.zone.run(() => { ... });. For further details on zones in Angular, you may find this blog post about zones in Angular informative.

Answer 2

I successfully adjusted the code provided and created a sample StackBlitz without relying on jQuery or external libraries. To view the running code, you can visit this example StackBlitz.

As explained in my previous comment, incorporating module augmentation from the TypeScript handbook is essential for this task. In order to enhance the window object to acknowledge the global properties being accessed, I included the following code snippet:

declare global {
  interface Window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

The current specification for RTCPeerConnection seems to have changed compared to the original code reference. Adapting it to align with the updated spec led me to revise the code as follows:

import { Component, NgZone } from '@angular/core';

// Module Augmentation
declare global {
  interface Window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  localIp = sessionStorage.getItem('LOCAL_IP');
  
  // Regular Expression for IP Address
  private ipRegex = new RegExp(/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7}/);

  constructor(private zone: NgZone) {
  }

  ngOnInit() {
    this.determineLocalIp();
  }
  
  private determineLocalIp() {
    window.RTCPeerConnection = this.getRTCPeerConnection();

    const pc = new RTCPeerConnection({ iceServers: [] });
    pc.createDataChannel('');
    pc.createOffer().then(pc.setLocalDescription.bind(pc));

    pc.onicecandidate = (ice) => {
      this.zone.run(() => {
        if (!ice || !ice.candidate || !ice.candidate.candidate) {
          return;
        }

        this.localIp = this.ipRegex.exec(ice.candidate.candidate)[1];
        sessionStorage.setItem('LOCAL_IP', this.localIp);
        
        pc.onicecandidate = () => {};
        pc.close();
      });
    };
  }

  private getRTCPeerConnection() {
    return window.RTCPeerConnection ||
      window.mozRTCPeerConnection ||
      window.webkitRTCPeerConnection;
  }
}

It's important to note that the logic inside the onicecandidate method will operate outside the Angular zone, meaning any changes to component properties will not trigger UI updates within Angular. To ensure Angular recognizes these changes, it's necessary to obtain an Angular zone reference and execute the code within it using this.zone.run(() => { ... });. For further details on zones in Angular, you may find this blog post about zones in Angular informative.

Answer 3

Answer №2

The link provided in the previous answer, https://stackblitz.com/edit/angular-get-local-ip, did not function correctly for me.

After encountering issues with the code sample, I made some modifications:

pc.createDataChannel('');

I altered this line to read:

pc.createDataChannel("rtc");

Additionally, I updated the following line regarding ice servers:

[{ urls: "stun:stun.l.google.com:19302" }]

Answer 4

The link provided in the previous answer, https://stackblitz.com/edit/angular-get-local-ip, did not function correctly for me.

After encountering issues with the code sample, I made some modifications:

pc.createDataChannel('');

I altered this line to read:

pc.createDataChannel("rtc");

Additionally, I updated the following line regarding ice servers:

[{ urls: "stun:stun.l.google.com:19302" }]

Finding the IP address of the client within the same network

Answer №1

Answer №2

Similar questions

Adjusting the transparency level of the JavaScript thumbnail

Angular reactive form encountered an issue with an incorrect date being passed

The jQuery Input Box Autocomplete Feature

Encapsulation in Angular Material: mat-error

Is there a way to incorporate my getter into a computed property?

Guide to organizing the table according to the values (timestamps) in a specific column

Tips on Extracting Data from an ID

Stop the automatic display of the dropdown menu

When running the npm install command for Angular, an error occurred stating: "npm ERR! Maximum call stack

Make sure to review the data table once more by clicking on the submit button

I am looking to modify a particular value within an array of objects, but for some reason, the update is not being applied correctly

Tips for hiding a bootstrap modal in Angular4 when it has no content

Combining JSON strings to simplify AJAX requests

Invoke a PHP function once the jQuery timer counts down to zero

Examining the potential of a promise within a dynamic import feature in Angular

Load a URL using JQuery and place the content into the specified target element within the current

Hold off until the observable has finished

Creating interactive dropdown menus with PHP and Catalyst using Jquery

PHP not receiving data from jQuery Ajax (POST) request

implementing a new class for event handling that includes the toggleClass function