WebRTC Application Setup
This guide walks you through setting up a browser-based voice application using the Vobiz WebRTC SDK.
Reference Repository
vobiz-ai/Vobiz-RTC-demo →1. Create a Voice Application
Your browser app needs a backend to tell Vobiz how to handle calls.
- Log in to the Vobiz Console.
- Navigate to Voice > Applications.
- Click Create New Application.
- Enter a Name (e.g., "WebRTC Demo").
- Answer URL: This is the most critical part. It points to your backend server that returns Vobiz XML.
- If running the demo server locally, this would be your public server URL.
- Example logic for the Answer URL:
// The server receives a request with a 'To' parameter
// and returns XML to bridge the call.
vobiz_xml = `
<Response>
<Dial callerId="${YOUR_VERIFIED_NUMBER}">
<Number>${destination_number}</Number>
</Dial>
</Response>
`;- Event URL (Optional): URL to receive call status updates (ringing, answered, hung up).
- Click Save.
2. Attach a Phone Number
You must link a phone number to your application so it can receive calls.
- Stay on the Application page (or edit your application).
- Look for the "Phone Numbers" section or dropdown.
- Select a purchased phone number to link it to this application.
- Click Save.
Now, any call to this number will be handled by your Answer URL.
3. Configure Your Endpoint (User Agent)
An Endpoint acts as the user (the "phone") in the browser.
- Go to Voice > Endpoints.
- Click Create Endpoint.
- Username: Create a unique username (e.g.,
agent001). - Password: Create a strict password.
- Assign Application: Select the "WebRTC Demo" application you created in Step 1.
This links your browser user to the specific backend logic.
- Click Create.
- Note down the Username and Password. You will use these to login from the browser SDK.
4. Run the Client
You can either use our hosted demo or run the code locally.
Option A: Use Live Demo (Quickest)
- Visit https://rtc-demo.vobiz.ai/.
- Enter the Endpoint Username and Password created in Step 3.
- Click Connect.
Option B: Run Locally (For Developers)
Clone the reference repository and configure it with your credentials.
1. Clone the Repo
git clone https://github.com/vobiz-ai/Vobiz-RTC-demo.git
cd Vobiz-RTC-demo2. Install Dependencies
npm install3. Start the Backend
This server handles the Answer URL requests.
npm start- Ensure this server is accessible from the internet.
- Update your Vobiz Application's Answer URL to point to this server.
4. Start the Frontend
npm run client- Open
http://localhost:8080. - Enter credentials and connect.
Key Concepts
Answer URL Logic
The backend server (provided in the demo repo) listens for incoming call requests. Vobiz sends an HTTP request with parameters like From, To, and CallSid.
Your server MUST return valid XML.
Example: Bridging a Call
<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Dial callerId="+15550001234">
<Number>+15559998888</Number>
</Dial>
</Response>callerId: Must be a number you own/verified on Vobiz.Number: The destination number to connect to.