> For the complete documentation index, see [llms.txt](https://docs.roboflow.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.roboflow.com/workflows/tutorials/integrate-with-ignition/live-video.md).

# Live Video

Show a Roboflow stream's live, annotated video in an Ignition Perspective view or Vision window.

Every stream on a Roboflow edge device publishes its video at a URL on the device. Ignition can show that video in a Perspective view or a Vision window, next to the tags and controls operators already use.

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-d4ababd320d309a8ba954d7b15d6b24757e9885e%2Fignition-video-perspective.png?alt=media" alt="A Perspective view named Bottle Line 1 showing a live video of bottles on a conveyor with Roboflow detections and a count, next to a table of recent inspections"><figcaption><p>A Roboflow stream in a Perspective view.</p></figcaption></figure>

## Prerequisites

* An edge device running a stream, managed in [Deployment Manager](https://docs.roboflow.com/deployment/self-hosted/enterprise/deployment-manager).
* The device's IP address, shown on the device page in Deployment Manager.
* Every computer that displays the video must reach the device on port `8000`. The video loads in the operator's browser or Vision client, not on the Ignition gateway.

{% hint style="info" %}
These steps and screenshots are from Ignition 8.1 (Designer 8.1.55). Menu names, dialogs, and property names can differ in other versions, including 8.3.
{% endhint %}

## Find the Video URL

Each running stream serves these URLs. Replace `<stream>` with the stream's name:

<table data-search="false"><thead><tr><th>URL</th><th>Shows</th></tr></thead><tbody><tr><td><code>http://&#x3C;device-ip>:8000/inference_pipelines/&#x3C;stream>/output.mjpeg</code></td><td>Live video of the Workflow's image output (ex: boxes, labels, counts)</td></tr><tr><td><code>http://&#x3C;device-ip>:8000/inference_pipelines/&#x3C;stream>/input.mjpeg</code></td><td>Live video of the camera</td></tr><tr><td><code>http://&#x3C;device-ip>:8000/inference_pipelines/&#x3C;stream>/output.jpg</code></td><td>The latest output frame as one image</td></tr><tr><td><code>http://&#x3C;device-ip>:8000/inference_pipelines/&#x3C;stream>/input.jpg</code></td><td>The latest camera frame as one image</td></tr></tbody></table>

If the stream name has spaces or symbols, URL-encode it (ex: `Line%201`). To list the names, open `http://<device-ip>:8000/inference_pipelines/list` and read each `pipeline_id`.

The output video shows annotations only when the Workflow outputs an image. Add a visualization block (ex: Bounding Box Visualization) and name its output `output_image`. Without an image output, the output video shows the camera frames.

For a triggered stream, these URLs show the last triggered frame. Add `?source=live` to show the camera instead.

Open the URL in a browser on an operator's computer before you add it to Ignition. If it plays there, it plays in Ignition. Learn more about [local video](https://docs.roboflow.com/deployment/self-hosted/enterprise/deployment-manager/monitoring/view-a-stream#local-video).

## Perspective

### Add an Image Component

1. In Designer, open a Perspective view and drag an "Image" component onto it.
2. Set `props.source` to the `output.mjpeg` URL.
3. Set `props.fit.mode` to `contain` so the video scales to the component.

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-fa851d2f0d33d2b3d45f8f48d352641497643841%2Fignition-designer-image-source.png?alt=media" alt="Ignition Designer with a Perspective view open, the live Roboflow stream playing in an Image component, and the Property Editor showing source and fit mode contain"><figcaption><p>The stream plays in the Designer as soon as <code>props.source</code> is set.</p></figcaption></figure>

To use one view for every line, add view parameters (ex: `deviceHost` and `stream`) and bind `props.source` to an expression:

```
"http://" + {view.params.deviceHost} + ":8000/inference_pipelines/" + {view.params.stream} + "/output.mjpeg"
```

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-2e784017604201dfa476474fb3f442e74ba2a7b6%2Fignition-designer-video-expression.png?alt=media" alt="The Edit Binding dialog for LiveVideo.props.source with an Expression binding built from view.params.deviceHost and a binding preview of the resulting URL"><figcaption><p>An expression binding on <code>props.source</code>, with the URL it builds in the preview.</p></figcaption></figure>

The "Video Player" component also plays the stream when `props.liveFeed` is `true`. With `props.liveFeed` off, it expects a video file and shows "Error Loading Media: File not valid".

{% hint style="warning" %}
Don't use the "Inline Frame" component for video. It plays the stream at the camera's size and crops it instead of scaling it.
{% endhint %}

### Save Bandwidth With a Refreshed Frame

Each Perspective session opens its own video stream from the device, at the camera's full size and the stream's frame rate. If many sessions show the same stream, or the network is slow, show a frame that refreshes once a second instead. Bind `props.source` to this expression:

```
"http://" + {view.params.deviceHost} + ":8000/inference_pipelines/" + {view.params.stream} + "/output.jpg?t=" + toMillis(now(1000))
```

`now(1000)` runs the expression again every 1,000 ms. The changing `t` value makes the browser load a new frame instead of a cached one.

### Perspective Over HTTPS

Browsers block `http://` images on a page loaded over `https://`. If your Perspective sessions use HTTPS, the video doesn't load. Put an HTTPS reverse proxy in front of the device and use its `https://` URL, or open the sessions over HTTP on the plant network.

## Vision

1. In Designer, open a Vision window and drag an "IP Camera Viewer" component onto it.
2. In the Vision Property Editor, set "URL" to the `output.mjpeg` URL. The viewer plays MJPEG without other changes.
3. To fit the video to the component instead of cropping it, turn on "Scale Video". It is an expert property: use the filter menu in the Property Editor's toolbar to show all properties.

<figure><img src="https://1126624165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoO0Ceoy9R0lHDZATcPyh%2Fuploads%2Fgit-blob-75ac74ce67b667195b91712c51fe40864eb599e4%2Fignition-vision-ip-camera-viewer.png?alt=media" alt="Ignition Designer with a Vision window showing the Roboflow stream in an IP Camera Viewer, and the Vision Property Editor with Scale Video set to true"><figcaption><p>The IP Camera Viewer with "Scale Video" on.</p></figcaption></figure>

Scaling the video uses CPU on every client that shows it. Learn more about the [IP Camera Viewer](https://docs.inductiveautomation.com/docs/8.3/appendix/components/vision-components/display/ip-camera-viewer).

## Troubleshooting

<table data-search="false"><thead><tr><th>Problem</th><th>Fix</th></tr></thead><tbody><tr><td>A broken image icon</td><td>Open the URL in a browser on the same computer. If it fails there, the computer can't reach the device on port <code>8000</code>, or the stream name is wrong.</td></tr><tr><td>The URL works in a browser, but not in a Perspective session over HTTPS</td><td>The browser blocks the mixed content. See Perspective Over HTTPS.</td></tr><tr><td>The video has no boxes or labels</td><td>The Workflow has no image output. Add a visualization block named <code>output_image</code>.</td></tr><tr><td>"Error Loading Media: File not valid"</td><td>Set <code>props.liveFeed</code> to <code>true</code> on the Video Player, or use an Image component.</td></tr><tr><td>The video stutters with many screens open</td><td>Switch those screens to the refreshed frame.</td></tr><tr><td>A triggered stream shows an old frame</td><td>Add <code>?source=live</code> to the URL.</td></tr></tbody></table>

## Security

The video URLs don't require a login. Anyone who can reach the device on port `8000` can watch the stream. Keep the device on a trusted network. Learn more about [the device services](https://docs.roboflow.com/deployment/self-hosted/enterprise/deployment-manager/services).

## Related

* [Embed the Device HMI](/workflows/tutorials/integrate-with-ignition/embed-the-device-hmi.md): the full Roboflow operator screen, video included, in one component.
* [Live Data](/workflows/tutorials/integrate-with-ignition/live-data.md): Workflow results as Ignition tags over OPC UA.
* [Historical Data](/workflows/tutorials/integrate-with-ignition/historical-data.md): every inspection, with its image.