# Embed a Camera's Live Stream on a Website

Verkada cameras allow you to embed a live stream of a camera on your website. The embed is an inline frame (iframe) code snippet that is compatible with any webpage.

{% hint style="warning" %}
Once an embed is created, access can be revoked at any time.
{% endhint %}

***

## Create an embed link

{% stepper %}
{% step %}
**In Verkada Command, go to All Products > Cameras.**
{% endstep %}

{% step %}
**Navigate to the camera feed you want to embed on your website.**
{% endstep %}

{% step %}
**At the right side of the frame, click Share.**
{% endstep %}

{% step %}
**Click More options and select Embed Code.**
{% endstep %}

{% step %}
**Enter the domain(s) where you want to authorize video to play.**
{% endstep %}

{% step %}
**Click Add Domain > Embed Link to generate the embed code (automatically added to clipboard).**
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Wildcards are accepted (for example, *\*.yourdomain.com*). If your domain is *yourdomain.com*, you don’t need the preceding wildcard and can simply use *yourdomain.com*. However, if your domain is *yoursubdomain.yourdomain.com*, you can use the wildcard to specify the subdomain.
{% endhint %}

![](https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-e168df8f2cc5af14fb4679ca5894deb6293e1730%2F3ca636f2628aeaf3a49946eaf8eff03abe0374d4.png?alt=media)

***

## Manage existing embed links

{% stepper %}
{% step %}
**In Verkada Command, go to All Products > Admin.**
{% endstep %}

{% step %}
**Under Org Settings, select Manage Shared Links.**
{% endstep %}

{% step %}
**Select the Embedded tab.**
{% endstep %}

{% step %}
**Select a domain and click the Copy Embed icon to copy the embed code or click Revoke Embed to revoke the embed access.**

<div align="left" data-with-frame="true"><img src="https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-90d24dc8d3b0d15b75aee9210df79c8b89230d8e%2Fa9d0f5567917f52723af6a7a84bec838eb7b0794.png?alt=media" alt="" width="1544"></div>
{% endstep %}
{% endstepper %}

***

## Resize Embedded Video Streams

Embedded camera feeds can be resized on your webpage by adjusting the width, height, and widescreen attributes.

{% hint style="warning" %}
When you resize an embed, be sure to keep the width and height ratios the same, as shown below.
{% endhint %}

<div align="left"><img src="https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-f6b6514fac3f6b2967c3df6f09d8c5c328600d08%2Ff212280394b9e38ecd536e55f1f20a72f5d45719.png?alt=media" alt="" width="336"></div>

<div align="left"><img src="https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-f89700c19cf0e627bd93278b8e5e5650c6871d2f%2F03172105db29a6b0e03dca1db4e071495a5c6330.png?alt=media" alt="" width="431"></div>

***

## Show the embed in widescreen

To make the embed appear in widescreen, use the **`?widescreen=1`** parameter in the URL, as shown:

![](https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-c9d70fd88ddc73c95925762284dd2dd914d0d2ee%2F9090483a56d919ed8ae86fe2a76958e635ab6acd.png?alt=media)

The embed on the left is standard, whereas the embed on the right has the **`widescreen=1`** query parameter:

![](https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-187483f69aefa96d9b72bd12f772125b22603f36%2F282123984981d8d484fef02d92bbe8a0a814feac.png?alt=media)

***

When a user loads a webpage that contains a Verkada-embedded live stream, the page loads the URL of the embed in an iframe.

{% hint style="warning" %}
The inline frame (iframe) appears as a black screen if the referring website doesn’t match the domain name specified when the embed was created.
{% endhint %}

***

## Resolve embeds that don’t load

{% stepper %}
{% step %}
[**Find the referring website**](#find-the-referring-website) **so you can specify a matching domain name when creating the embed.**
{% endstep %}

{% step %}
[**Re-create the embed using the correct domain name**](#recreate-the-embed-using-the-correct-domain-name)**.**
{% endstep %}

{% step %}
**Place the new embed on your website.**
{% endstep %}
{% endstepper %}

### Find the referring website

{% stepper %}
{% step %}
**On the webpage where you placed the embed, right-click your browser and select Inspect. This will be a black screen because the embed will not load.**
{% endstep %}

{% step %}
**At the top, click Network.**
{% endstep %}

{% step %}
**In the search/filter bar, type embed (filter for embed-related requests).**
{% endstep %}

{% step %}
**Click the request with the alphanumeric ID, which should have a similar format to the example shown below.**
{% endstep %}

{% step %}
**Under the Request Headers section, find the Referrer URL. This is the URL/domain you need to put into Verkada Command. (You only need up until the top-level domain, such as .com. In the example, the referring domain is verkadasupport.com.)**
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
If you don’t immediately see the **embed.html**, click **Refresh** to reload the page.
{% endhint %}

![](https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-3521977126db38fa9154539f78681d0b7c24d55d%2Fb0d3cf256be2dd179c5c6a55a12b9900eb886b1b.png?alt=media)

### Re-create the embed using the correct domain name

{% stepper %}
{% step %}
**In Verkada Command, go to All Products > Cameras.**
{% endstep %}

{% step %}
**Select the camera and click Share.**
{% endstep %}

{% step %}
**Select More options > click Embed Code and enter in your referrer domain.**
{% endstep %}

{% step %}
**Click Embed Link.**
{% endstep %}
{% endstepper %}

### Place new embed on your website

{% stepper %}
{% step %}
**Copy the new embed link you just created in the previous procedure.**
{% endstep %}

{% step %}
**Go to your site’s Admin portal.**
{% endstep %}

{% step %}
**Paste the HTML embed iframe where you want the embed to live on your site.**
{% endstep %}

{% step %}
**Save and open the site and ensure it works.**

​
{% endstep %}
{% endstepper %}

![](https://1795869993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-98c71ae8a0bb7058d3110a26a5d500c45aa553f1%2F82b73e4f7ac03be76efed7b94a112476cb402263.gif?alt=media)
