{"id":41,"date":"2026-04-07T16:23:12","date_gmt":"2026-04-07T16:23:12","guid":{"rendered":"http:\/\/localhost:8080\/knowledge-base\/opensips-webrtc\/"},"modified":"2026-04-21T18:26:40","modified_gmt":"2026-04-21T18:26:40","slug":"opensips-webrtc","status":"publish","type":"post","link":"https:\/\/www.siperb.com\/kb\/opensips-webrtc\/","title":{"rendered":"OpenSIPS WebRTC"},"content":{"rendered":"\n

OpenSIPS WebRTC: A Comprehensive Guide with SIP.js<\/h2>\n\n\n\n

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<\/a>, allows for robust, browser-based VoIP solutions. Click here for a more details explanation on What is WebRTC<\/a><\/p>\n\n\n\n

Step 1: Setting Up OpenSIPS for WebRTC<\/h2>\n\n\n\n

To bridge WebRTC with OpenSIPS, certain OpenSIPS modules and configurations are required.<\/p>\n\n\n\n

Essential OpenSIPS Modules<\/h3>\n\n\n\n
    \n
  1. nathelper<\/strong>: Helps handle Network Address Translation (NAT) issues by relaying SIP and RTP packets.<\/li>\n\n\n\n
  2. rtpproxy<\/strong> or mediaproxy<\/strong>: Facilitates RTP stream relays.<\/li>\n\n\n\n
  3. tls_mgm<\/strong>: Provides TLS support for encrypting SIP signaling.<\/li>\n\n\n\n
  4. proto_wss<\/strong>: Manages WebSocket connections over TLS, required for WebRTC\u2019s secure signaling.<\/li>\n\n\n\n
  5. sdpops<\/strong>: Handles SDP (Session Description Protocol) body modifications in SIP messages for WebRTC\u2019s SDP negotiation.<\/li>\n<\/ol>\n\n\n\n

    Basic OpenSIPS Configuration<\/h3>\n\n\n\n

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

    # Load necessary modules\nloadmodule \"nathelper.so\"\nloadmodule \"rtpproxy.so\"\nloadmodule \"tls_mgm.so\"\nloadmodule \"sipmsgops.so\"\nloadmodule \"sdpops.so\"\n\n# RTPProxy configuration for relaying media\nmodparam(\"rtpproxy\", \"rtpproxy_sock\", \"udp:localhost:7722\")\n\n# NAT and SDP adjustments for WebRTC clients\nroute {\n    # WebRTC-specific NAT handling\n    if (is_method(\"REGISTER\") && $hdr(User-Agent) =~ \"WebRTC\") {\n        force_rtp_proxy();\n        setflag(FLT_NATS);\n    }\n\n    # Adjust SDP for NAT\n    if (has_body(\"application\/sdp\")) {\n        if (isflagset(FLT_NATS)) {\n            fix_nated_sdp(\"external_ip\");\n            rtpproxy_manage(\"co\");\n        }\n    }\n}\n\n# Enable TLS (for secure WebRTC signaling)\nloadmodule \"tls_mgm.so\"\nmodparam(\"tls_mgm\", \"server_id\", \"my_tls_server\")\nmodparam(\"tls_mgm\", \"verify_cert\", \"1\")\n\n# SIP over WebSocket configuration\nloadmodule \"proto_wss.so\"\nmodparam(\"proto_wss\", \"tls_method\", \"TLSv1\")<\/code><\/pre>\n\n\n\n
    Step 2: WebRTC Client Setup with SIP.js<\/h2>\n\n\n\n
    Now, let\u2019s configure a WebRTC client using SIP.js<\/strong>, a lightweight JavaScript library that supports SIP over WebSockets.<\/p>\n\n\n\n
    Installing SIP.js<\/h3>\n\n\n\n
    To use SIP.js, include it in your project:<\/p>\n\n\n\n
    <script src=\"https:\/\/unpkg.com\/sip.js@0.20.0\/dist\/sip.min.js\"><\/script><\/code><\/pre>\n\n\n\n
    SIP.js Client Configuration<\/h3>\n\n\n\n
    Initialize SIP.js to connect to your OpenSIPS server using WebSocket.<\/p>\n\n\n\n
    const uri = 'sip:username@your-opensips-domain';\nconst transportOptions = {\n  wsServers: ['wss:\/\/your-opensips-domain:8089\/ws'], \/\/ Secure WebSocket\n  traceSip: true\n};\n\n\/\/ Create a user agent\nconst userAgent = new SIP.UserAgent({\n  uri: SIP.UserAgent.makeURI(uri),\n  transportOptions: transportOptions,\n  authorizationUsername: 'username', \/\/ OpenSIPS SIP username\n  authorizationPassword: 'password', \/\/ OpenSIPS SIP password\n  sessionDescriptionHandlerFactoryOptions: {\n    constraints: {\n      audio: true,\n      video: true \/\/ Enable video if required\n    }\n  }\n});\n\n\/\/ Start the user agent to register with OpenSIPS\nuserAgent.start();<\/code><\/pre>\n\n\n\n
    Make sure you read this article on How Secure is My Password<\/a>, for valuable insight into SIP password security.<\/p>\n\n\n\n
    Making a Call with SIP.js<\/h3>\n\n\n\n
    To initiate a call from SIP.js, configure the user agent to send an invite to the desired SIP URI.<\/p>\n\n\n\n
    function makeCall(targetUri) {\n  const target = SIP.UserAgent.makeURI(targetUri);\n\n  const options = {\n    sessionDescriptionHandlerOptions: {\n      constraints: {\n        audio: true,\n        video: true\n      }\n    }\n  };\n\n  const inviter = new SIP.Inviter(userAgent, target, options);\n\n  inviter.stateChange.addListener((state) => {\n    console.log(`Call state changed to: ${state}`);\n  });\n\n  inviter.invite().catch(error => console.error(\"Call failed\", error));\n}\n\n\/\/ Make a call to the target SIP URI\nmakeCall('sip:destination@your-opensips-domain');<\/code><\/pre>\n\n\n\n
    Receiving a Call with SIP.js<\/h3>\n\n\n\n
    To set up SIP.js for handling incoming calls, add an event listener for incoming INVITE<\/code> requests.<\/p>\n\n\n\n
    userAgent.delegate = {\n  onInvite(invitation) {\n    invitation.stateChange.addListener((state) => {\n      console.log(`Incoming call state changed to: ${state}`);\n    });\n\n    \/\/ Auto-answer the call with audio and video constraints\n    const options = {\n      sessionDescriptionHandlerOptions: {\n        constraints: {\n          audio: true,\n          video: true\n        }\n      }\n    };\n\n    invitation.accept(options).catch(error => console.error(\"Failed to answer the call\", error));\n  }\n};<\/code><\/pre>\n\n\n\n
    This setup allows the SIP.js client to receive incoming calls, automatically answer them, and establish media connections as configured.<\/p>\n\n\n\n
    Testing and Debugging<\/h2>\n\n\n\n