1. Home
  2. SIP Over WebRTC
  3. OpenSIPS WebRTC
Searching...

OpenSIPS WebRTC

Contents

OpenSIPS WebRTC: A Comprehensive Guide with SIP.js

WebRTC (Web Real-Time Communication) is an open-source project supported by major web browsers, allowing real-time communication directly within web applications. It enables peer-to-peer (P2P) voice, video, and data sharing, and when integrated with a SIP server like OpenSIPS, allows for robust, browser-based VoIP solutions. Click here for a more details explanation on What is WebRTC

Step 1: Setting Up OpenSIPS for WebRTC

To bridge WebRTC with OpenSIPS, certain OpenSIPS modules and configurations are required.

Essential OpenSIPS Modules

  1. nathelper: Helps handle Network Address Translation (NAT) issues by relaying SIP and RTP packets.
  2. rtpproxy or mediaproxy: Facilitates RTP stream relays.
  3. tls_mgm: Provides TLS support for encrypting SIP signaling.
  4. proto_wss: Manages WebSocket connections over TLS, required for WebRTC’s secure signaling.
  5. sdpops: Handles SDP (Session Description Protocol) body modifications in SIP messages for WebRTC’s SDP negotiation.

Basic OpenSIPS Configuration

Below is an example configuration for OpenSIPS that includes necessary modules for WebRTC integration. This example uses rtpproxy to relay RTP media streams and supports WebSocket-based SIP signaling.

# Load necessary modules
loadmodule "nathelper.so"
loadmodule "rtpproxy.so"
loadmodule "tls_mgm.so"
loadmodule "sipmsgops.so"
loadmodule "sdpops.so"

# RTPProxy configuration for relaying media
modparam("rtpproxy", "rtpproxy_sock", "udp:localhost:7722")

# NAT and SDP adjustments for WebRTC clients
route {
    # WebRTC-specific NAT handling
    if (is_method("REGISTER") && $hdr(User-Agent) =~ "WebRTC") {
        force_rtp_proxy();
        setflag(FLT_NATS);
    }

    # Adjust SDP for NAT
    if (has_body("application/sdp")) {
        if (isflagset(FLT_NATS)) {
            fix_nated_sdp("external_ip");
            rtpproxy_manage("co");
        }
    }
}

# Enable TLS (for secure WebRTC signaling)
loadmodule "tls_mgm.so"
modparam("tls_mgm", "server_id", "my_tls_server")
modparam("tls_mgm", "verify_cert", "1")

# SIP over WebSocket configuration
loadmodule "proto_wss.so"
modparam("proto_wss", "tls_method", "TLSv1")

Step 2: WebRTC Client Setup with SIP.js

Now, let’s configure a WebRTC client using SIP.js, a lightweight JavaScript library that supports SIP over WebSockets.

Installing SIP.js

To use SIP.js, include it in your project:

<script src="https://unpkg.com/sip.js@0.20.0/dist/sip.min.js"></script>

SIP.js Client Configuration

Initialize SIP.js to connect to your OpenSIPS server using WebSocket.

const uri = 'sip:username@your-opensips-domain';
const transportOptions = {
  wsServers: ['wss://your-opensips-domain:8089/ws'], // Secure WebSocket
  traceSip: true
};

// Create a user agent
const userAgent = new SIP.UserAgent({
  uri: SIP.UserAgent.makeURI(uri),
  transportOptions: transportOptions,
  authorizationUsername: 'username', // OpenSIPS SIP username
  authorizationPassword: 'password', // OpenSIPS SIP password
  sessionDescriptionHandlerFactoryOptions: {
    constraints: {
      audio: true,
      video: true // Enable video if required
    }
  }
});

// Start the user agent to register with OpenSIPS
userAgent.start();

Make sure you read this article on How Secure is My Password, for valuable insight into SIP password security.

Making a Call with SIP.js

To initiate a call from SIP.js, configure the user agent to send an invite to the desired SIP URI.

function makeCall(targetUri) {
  const target = SIP.UserAgent.makeURI(targetUri);

  const options = {
    sessionDescriptionHandlerOptions: {
      constraints: {
        audio: true,
        video: true
      }
    }
  };

  const inviter = new SIP.Inviter(userAgent, target, options);

  inviter.stateChange.addListener((state) => {
    console.log(`Call state changed to: ${state}`);
  });

  inviter.invite().catch(error => console.error("Call failed", error));
}

// Make a call to the target SIP URI
makeCall('sip:destination@your-opensips-domain');

Receiving a Call with SIP.js

To set up SIP.js for handling incoming calls, add an event listener for incoming INVITE requests.

userAgent.delegate = {
  onInvite(invitation) {
    invitation.stateChange.addListener((state) => {
      console.log(`Incoming call state changed to: ${state}`);
    });

    // Auto-answer the call with audio and video constraints
    const options = {
      sessionDescriptionHandlerOptions: {
        constraints: {
          audio: true,
          video: true
        }
      }
    };

    invitation.accept(options).catch(error => console.error("Failed to answer the call", error));
  }
};

This setup allows the SIP.js client to receive incoming calls, automatically answer them, and establish media connections as configured.

Testing and Debugging

  • TLS Configuration: Ensure OpenSIPS is correctly set up for secure WebSocket connections (wss://). WebRTC requires a secure connection, so OpenSIPS must have a valid TLS configuration.
  • NAT Traversal: Test across networks to confirm that RTPProxy is handling NAT traversal effectively.
  • Session Handling: Debug connection issues by enabling SIP.js logging through traceSip: true in the configuration. This logs SIP messages to the console, helping diagnose connection or signaling issues.

Siperb simplifies WebRTC by providing a ready-to-use, robust framework that connects your existing PBX systems to WebRTC without the steep learning curve and development overhead. This not only accelerates deployment but also ensures that your solution is built on a foundation of proven reliability and enhanced security features. Additionally, SIPERB offers ongoing support and updates, which means you benefit from continuous improvements and adaptations to the latest communication technologies and standards, without diverting your internal resources away from your core business activities. https://www.siperb.com/

Conclusion

With OpenSIPS configured as a WebRTC-compatible SIP server and SIP.js set up as the client, you can enable real-time audio and video communication in the browser. This article has covered essential OpenSIPS configurations, sample SIP.js setup, and code snippets for both outgoing and incoming calls. By following this guide, you can integrate SIP-based communication into any web application, leveraging the power of WebRTC and SIP for real-time interaction.

For production deployment:

  • Secure your signaling and media paths with firewalls and proper access controls.
  • Test WebRTC compatibility across browsers and network conditions.
  • Monitor performance for optimal call quality, adjusting configurations as needed.

This foundation allows you to create scalable and robust WebRTC applications that connect seamlessly to OpenSIPS.

Related Articles