> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vobiz.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser Calling with Vobiz WebRTC

> Enable WebRTC browser calling on Vobiz - configure Answer URLs, attach phone numbers, and return VobizXML to reach users across 130+ countries.

<img className="block w-full rounded-xl border border-gray-200" src="https://mintcdn.com/vobizai/OZ7y9Kg025aXyvCH/images/integration-bg/WebRTC.png?fit=max&auto=format&n=OZ7y9Kg025aXyvCH&q=85&s=7e59fbc65fe28c941bb573bcb3fe0d3f" width="1800" height="1080" data-path="images/integration-bg/WebRTC.png" />

This guide walks you through connecting a web browser (WebRTC) to Vobiz so you can make and receive phone calls directly from a web application.

<Note>
  **Reference repository:** [vobiz-ai/Vobiz-RTC-demo](https://github.com/vobiz-ai/Vobiz-RTC-demo)
</Note>

## Step 1: Create a Voice Application

Your browser app needs a backend to tell Vobiz how to handle calls.

<Steps>
  <Step title="Open the console">
    Log in to the [Vobiz Console](https://console.vobiz.ai) and navigate to **Voice → Applications**.
  </Step>

  <Step title="Create the application">
    Click **Create New Application** and enter a name (for example, `WebRTC Demo`).
  </Step>

  <Step title="Set the Answer URL">
    Set the **Answer URL** to your backend server URL. This is the most critical part - Vobiz calls this URL to receive XML instructions for handling the call.

    Example logic for the Answer URL:

    ```javascript theme={null}
    // The server receives a request with a 'To' parameter
    // and returns XML to bridge the call.
    const vobizXml = `
      <Response>
        <Dial callerId="${YOUR_VOBIZ_NUMBER}">
          <Number>${destinationNumber}</Number>
        </Dial>
      </Response>
    `;
    ```
  </Step>

  <Step title="Set the Event URL (optional)">
    Add an **Event URL** to receive call status updates (ringing, answered, hung up).
  </Step>

  <Step title="Save">
    Click **Save**.
  </Step>
</Steps>

<Check>
  Your Voice Application is created. Vobiz now knows exactly what to do when a call comes in.
</Check>

## Step 2: Attach a phone number

Link a phone number to your application so it can receive calls.

1. Stay on the application page (or edit your application).
2. Look for the **Phone Numbers** section or dropdown.
3. Select a purchased phone number to link to this application.
4. Click **Save**.

Calls to this number are now handled by your Answer URL.

<Check>
  Phone number linked. Your caller ID is set up and ready to go.
</Check>

## Step 3: Configure your endpoint (user agent)

An endpoint acts as the user (the "phone") in the browser.

<Steps>
  <Step title="Open endpoints">
    Go to **Voice → Endpoints**.
  </Step>

  <Step title="Create the endpoint">
    Click **Create Endpoint** and set:

    * **Username** - a unique username (for example, `agent001`).
    * **Password** - a strict password.
    * **Assign Application** - select the `WebRTC Demo` application created in Step 1.

    This links your browser user to the specific backend logic.
  </Step>

  <Step title="Save credentials">
    Click **Create** and note down the **username** and **password**. You'll use these to log in from the browser SDK.
  </Step>
</Steps>

<Check>
  Endpoint created. Your browser now has the credentials it needs to "log in" and act as a real phone.
</Check>

## Step 4: Run the client

Use the hosted demo or run the code locally.

<CardGroup cols={2}>
  <Card title="Option A: Live demo (quickest)" icon="bolt">
    1. Visit [https://rtc-demo.vobiz.ai/](https://rtc-demo.vobiz.ai/).
    2. Enter the **Endpoint Username** and **Password** created in Step 3.
    3. Click **Connect**.
  </Card>

  <Card title="Option B: Run locally" icon="code">
    Clone the reference repo and configure with your credentials. See the steps below.
  </Card>
</CardGroup>

### Running locally

```bash theme={null}
# Clone the repo
git clone https://github.com/vobiz-ai/Vobiz-RTC-demo.git
cd Vobiz-RTC-demo

# Install dependencies
npm install

# Start the backend (handles Answer URL requests)
npm start

# Start the frontend
npm run client
```

* Make sure the backend server is accessible from the internet, and update your Vobiz application's Answer URL to point to it.
* Open `http://localhost:8080`, enter your endpoint 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 VobizXML.

Example: bridging a call.

```xml theme={null}
<Response>
  <Dial callerId="+15551112222">
    <Number>+15559998888</Number>
  </Dial>
</Response>
```

* `callerId` - must be a number you own or have verified on Vobiz.
* `Number` - the destination number to connect to.

## Next steps

* Explore the [Vobiz applications API](/applications/create-application) to manage applications programmatically.
* Manage endpoints via the [endpoints API](/endpoint/endpoint-object).
* Check the [VobizXML reference](/xml/dial) for available verbs.