React native Expo fails to Loading SIP.js Library in WebView

martsa commented 3 months ago

Bug description: I am developing a React Native Expo mobile application that integrates SIP functionality using the SIP.js library within a WebView component. The app aims to facilitate VoIP calls using SIP technology, allowing users to initialize a SIP client, register to a SIP server, and initiate SIP calls to communicate with other users. --->

The error encountered in the React Native Expo app occurs when attempting to load the SIP.js library within a WebView component. Despite verifying network connectivity and ensuring proper WebView configuration, the library fails to load, preventing the initialization of the SIP client. This error disrupts the app's intended functionality, hindering users from establishing SIP connections and making VoIP calls. To Reproduce: a link to a repository

https://github.com/martsa/react-native-sip.js

on loading react native expo App , you should click on initialise sip client button it will give error if its not loaded

webview code

<!DOCTYPE html>
<html lang="en">
<head>

<body>
  <h1>SIP Client</h1>

  <button id="initializeButton" class="button">Initialize SIP Client</button> <!-- Button to initialize SIP client -->
  <button id="callButton" class="button">Call</button> <!-- Button to initiate SIP call -->

  <script src="./node_modules/sip.js/" onload="onSipJsLoad()" onerror="onSipJsError()"></script> <!-- Include SIP.js library with onload and onerror events -->
  <script>
    let sipJsLoaded = false; // Flag to track whether SIP.js library is loaded

    // Function called when SIP.js library is successfully loaded
    const onSipJsLoad = () => {
      console.log('SIP.js library loaded successfully');
      sipJsLoaded = true; // Set flag to true indicating library is loaded
    };

    // Function called when loading SIP.js library fails
    const onSipJsError = () => {
      console.error('Failed to load SIP.js library');
      document.getElementById('errorMessage').innerText = 'Failed to load SIP.js library. Please check your internet connection and try again.'; // Display error message on the page
    };

    // Function to register to SIP server and initialize SIP client
    const registerToServer = () => {
      console.log('Initializing SIP client...');

      // Check if SIP.js library is loaded before proceeding
      if (!sipJsLoaded) {
        console.error('SIP.js library is not loaded. Cannot initialize SIP client.');
        document.getElementById('errorMessage').innerText = 'SIP.js library is not loaded. Cannot initialize SIP client.'; // Display error message on the page
        return;
      }

      // Your code to initialize the SIP client goes here
      // For example:
      const server = {
        uri: 'sip.example.com', // Replace with your SIP server URI
        username: 'username',
        password: 'password',
      };

      // Create SIP User Agent
      const userAgent = new SIP.UA({
        uri: `sip:${server.username}@${server.uri}`,
        transportOptions: {
          server: server.uri,
          wsServers: `wss://${server.uri}:5061`, // Use wss:// for secure WebSocket
        },
        authorizationUser: server.username,
        password: server.password,
      });

      // Start SIP User Agent
      userAgent.start().then(() => {
        console.log('SIP client registered successfully');
      }).catch(error => {
        console.error('Error registering SIP client:', error);
      });
    };

    // Function to initiate SIP call
    const initiateCall = (calleeURI) => {
      console.log('Initiating call to', calleeURI);
      // Your code to initiate SIP call goes here
    };

    // Add event listener to initialize SIP client button
    document.getElementById('initializeButton').addEventListener('click', () => {
      console.log('Button clicked. Initializing SIP client...');
      registerToServer(); // Initialize SIP client
    });

    // Add event listener to call button
    document.getElementById('callButton').addEventListener('click', () => {
      console.log('Call button clicked. Initiating SIP call...');
      initiateCall('sip:callee@example.com'); // Replace with the SIP URI of the callee
    });
  </script>

  <div id="errorMessage" class="error-message"></div> <!-- Container for displaying error message -->
</body>
</html>

Expected behavior: I want to at least minimum load the library and start initialisation process -and show error

Screenshots/Videos: Screenshot 2024-03-17 at 01 02 59

Environment:

react native expo

dependency

"dependencies": { "expo": "^49.0.23", "expo-av": "^13.10.5", "expo-permissions": "^14.4.0", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.5", "react-native-webview": "^13.2.2", "sip.js": "^0.21.2" },

dev-nested commented 2 months ago

@martsa is this related the second to last answer here? https://forums.developer.apple.com/forums/thread/88052?page=3

AlanGreyjoy commented 1 month ago

I have this fully working in expo. I didn't need to do much either. The issue I am having, and you will too, is keeping the call active in the background (call kit) and push (ring the app on incoming calls)

martsa commented 1 month ago

Can you please share me your expo repo ,

On Sat, 27 Apr 2024 at 7:22 PM, Alan Spurlock @.***> wrote:

I have this fully working in expo. I didn't need to do much either. The issue I am having, and you will too, is keeping the call active in the background (call kit) and push (ring the app on incoming calls)

— Reply to this email directly, view it on GitHub https://github.com/react-native-webview/react-native-webview/issues/3362#issuecomment-2081105697, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKQND37SEHGUGFVWAORTVSDY7PNGBAVCNFSM6AAAAABEZWVBACVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBRGEYDKNRZG4 . You are receiving this because you were mentioned.Message ID: @.*** com>

react-native-webview / react-native-webview

React native Expo fails to Loading SIP.js Library in WebView #3362