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

# Camera widget

> Add a live camera feed to a Building BI dashboard from the Chart List.

The **Camera** widget displays a live camera feed on a Building BI dashboard alongside charts and metrics. Add it from the **Chart List** during dashboard edit mode, choose a camera type, connect the feed, and resize or reposition it like any other widget.

## Add a camera widget

<Steps>
  <Step title="Enter edit mode">
    Open the dashboard and select **Edit Dashboard**.
  </Step>

  <Step title="Find Camera in the Chart List">
    In the **Chart List**, search for **Camera**, then drag **Camera** onto the canvas.

    <Frame caption="Search Camera in the Chart List and drag it onto the dashboard">
      <img src="https://mintcdn.com/kodelabs/hpe6Pd1K3btC2pO2/images/kode-os/building-bi/bbi-camera-widget-chart-list.png?fit=max&auto=format&n=hpe6Pd1K3btC2pO2&q=85&s=4a5dfdf8d95ce3016d266609c54ed5cd" alt="Building BI edit mode with Chart List search set to Camera and the Camera widget ready to drag onto an empty dashboard canvas" width="1310" height="1262" data-path="images/kode-os/building-bi/bbi-camera-widget-chart-list.png" />
    </Frame>
  </Step>

  <Step title="Configure the feed">
    In **Chart Configuration** on the **Setup** tab, set **Camera Type** to **iFrame**, **URI**, or **Device**. For **iFrame**, paste the stream URL in **Source URL**, then select **Embed**.

    <Frame caption="Camera Setup with Camera Type set to iFrame and Source URL ready to paste">
      <img src="https://mintcdn.com/kodelabs/hpe6Pd1K3btC2pO2/images/kode-os/building-bi/bbi-camera-widget-setup.png?fit=max&auto=format&n=hpe6Pd1K3btC2pO2&q=85&s=f3ad762737b73adb15b1ae99a05bef00" alt="Chart Configuration Setup tab with Camera selected, Camera Type set to iFrame, Source URL paste field, and Embed button" width="1310" height="1262" data-path="images/kode-os/building-bi/bbi-camera-widget-setup.png" />
    </Frame>

    | Field           | Description                                                    | Required?             |
    | --------------- | -------------------------------------------------------------- | --------------------- |
    | **Camera Type** | How the feed is connected: **iFrame**, **URI**, or **Device**  | Yes                   |
    | **Source URL**  | Stream or page URL to embed when **Camera Type** is **iFrame** | Yes when using iFrame |
  </Step>

  <Step title="Publish">
    Select **Save as Draft** or **Publish** when the layout is ready.
  </Step>
</Steps>

## Widget behavior

| Behavior            | Detail                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------- |
| **Layout**          | Drag to resize and reposition on the dashboard canvas                                       |
| **Empty state**     | Until you complete Setup, the widget prompts you to select values in the customization menu |
| **Live feed**       | Shows the connected camera stream when the source is available                              |
| **Offline / error** | Displays a clear empty or error state when the feed is unavailable                          |

<Tip>
  Place camera widgets on operational dashboards that combine live video with point trends, alarms, or KPI cards so operators stay in one view.
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Chart types" icon="trending-up" href="/products/building-bi/reference/chart-types#camera" arrow={true}>
    Find Camera in the Chart List catalogue with other widget types.
  </Card>

  <Card title="Dashboards" icon="layout-dashboard" href="/products/building-bi/dashboards" arrow={true}>
    Create and edit dashboards that host camera widgets.
  </Card>

  <Card title="Widget customization" icon="palette" href="/products/building-bi/widget-customization" arrow={true}>
    Style and arrange widgets on the canvas.
  </Card>
</CardGroup>