> For the complete documentation index, see [llms.txt](https://help.verkada.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.verkada.com/verkada-cameras/ko/video-streaming-and-sharing/embed-a-cameras-live-stream-on-a-website.md).

# 웹사이트에 카메라의 라이브 스트림 삽입

Verkada 카메라는 웹사이트에 카메라의 라이브 스트림을 삽입할 수 있게 해줍니다. 임베드는 어떤 웹페이지와도 호환되는 인라인 프레임(iframe) 코드 조각입니다.

{% hint style="warning" %}
임베드가 생성되면 언제든지 액세스를 취소할 수 있습니다.
{% endhint %}

***

## 임베드 링크 만들기

{% stepper %}
{% step %}
**Verkada Command에서 모든 제품 > 카메라로 이동합니다.**
{% endstep %}

{% step %}
**웹사이트에 삽입하려는 카메라 피드로 이동합니다.**
{% endstep %}

{% step %}
**프레임 오른쪽에서 공유를 클릭합니다.**

* 비디오 공유 이용약관을 읽어 보세요. 동의하면 **동의합니다.**
* 왼쪽 하단에서 **추가 옵션 > 임베드 코드.**
* 동영상을 재생하도록 승인할 도메인(들)을 입력합니다.
* 클릭 **임베드 링크 > 완료.**

{% hint style="warning" %}
링크가 자동으로 클립보드에 추가됩니다.
{% endhint %}
{% endstep %}
{% endstepper %}

{% hint style="info" %}
와일드카드가 허용됩니다(예: *\*.yourdomain.com*). 도메인이 *yourdomain.com*, 앞의 와일드카드는 필요하지 않으며 단순히 *yourdomain.com*. 하지만, 도메인이 *yoursubdomain.yourdomain.com*, 와일드카드를 사용해 하위 도메인을 지정할 수 있습니다.
{% endhint %}

***

## 기존 임베드 링크 관리

{% stepper %}
{% step %}
**Verkada Command에서 모든 제품 > 관리자로 이동합니다.**
{% endstep %}

{% step %}
**로그인 및 액세스 > 공유 링크 관리로 이동합니다.**
{% endstep %}

{% step %}
**임베디드 탭을 선택합니다.**
{% endstep %}

{% step %}
**링크의 오른쪽에서:**

* 클릭 <i class="fa-code">:code:</i> 임베드 코드를 복사하려면
* 클릭 <i class="fa-trash-can" style="color:red;">:trash-can:</i> 임베드를 취소하려면.
  {% endstep %}
  {% endstepper %}

***

## 임베디드 비디오 스트림 크기 조정

임베디드 카메라 피드는 너비, 높이, 와이드스크린 속성을 조정하여 웹페이지에서 크기를 조정할 수 있습니다.

{% hint style="warning" %}
임베드의 크기를 조정할 때는 아래와 같이 너비와 높이 비율을 동일하게 유지해야 합니다.
{% endhint %}

<div align="left"><img src="/files/c2f09d9909c0f943b70bf9d5c013da31fd619f90" alt=""> <img src="/files/05ad15a6ba4ad75cc968f55faddd04e7b365137c" alt=""></div>

***

## 임베드를 와이드스크린으로 표시

임베드를 와이드스크린으로 표시하려면 **`?widescreen=1`** 매개변수를 URL에 사용합니다. 아래와 같이:

<div align="left" data-with-frame="true"><img src="/files/6d157ed4d188c5126c9d2023970707085c94a792" alt=""></div>

왼쪽의 임베드는 표준이며, 오른쪽의 임베드에는 **`widescreen=1`** 쿼리 매개변수가 있습니다:

<div align="left" data-with-frame="true"><img src="/files/ae09b478e9411f00afe44d039cd8c3196d5a2b00" alt=""></div>

***

사용자가 Verkada에 임베드된 라이브 스트림이 포함된 웹페이지를 로드하면 페이지는 iframe에서 임베드의 URL을 불러옵니다.

{% hint style="warning" %}
참조 웹사이트가 임베드를 생성할 때 지정한 도메인 이름과 일치하지 않으면 인라인 프레임(iframe)은 검은 화면으로 표시됩니다.
{% endhint %}

***

## 로드되지 않는 임베드 해결하기

{% stepper %}
{% step %}
[**참조 웹사이트 찾기**](#find-the-referring-website) **임베드를 만들 때 일치하는 도메인 이름을 지정할 수 있도록 합니다.**
{% endstep %}

{% step %}
[**올바른 도메인 이름을 사용하여 임베드를 다시 만듭니다.**](#recreate-the-embed-using-the-correct-domain-name)**.**
{% endstep %}

{% step %}
**새 임베드를 웹사이트에 배치합니다.**
{% endstep %}
{% endstepper %}

### 참조 웹사이트 찾기

{% stepper %}
{% step %}
**임베드를 배치한 웹페이지에서 브라우저를 우클릭하고 검사를 선택합니다. 임베드가 로드되지 않으므로 검은 화면이 표시됩니다.**
{% endstep %}

{% step %}
**상단에서 네트워크를 클릭합니다.**
{% endstep %}

{% step %}
**검색/필터 바에 "embed"를 입력합니다(임베드 관련 요청을 필터링하려면.**
{% endstep %}

{% step %}
**영숫자 ID가 있는 요청을 클릭합니다. 아래에 표시된 예와 비슷한 형식을 가져야 합니다.**
{% endstep %}

{% step %}
**요청 헤더 섹션에서 Referrer URL을 찾습니다. 이것이 Verkada Command에 입력해야 하는 URL/도메인입니다. (최상위 도메인까지만 필요하며, 예를 들어 .com입니다. 예시에서 참조 도메인은 verkadasupport.com입니다.)**

<div align="left" data-with-frame="true"><figure><img src="/files/67b72163b0c864bd99d9ef72841a369231a3058e" alt=""><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
즉시 **embed.html**, 클릭합니다 **새로 고침** 을 눌러 페이지를 다시 로드합니다.
{% endhint %}

### 올바른 도메인 이름을 사용하여 임베드를 다시 만듭니다.

{% stepper %}
{% step %}
**Verkada Command에서 모든 제품 > 카메라로 이동합니다.**
{% endstep %}

{% step %}
**카메라를 선택하고 공유를 클릭합니다.**
{% endstep %}

{% step %}
**추가 옵션 > 임베드 코드 선택 후 참조 도메인을 입력합니다.**
{% endstep %}

{% step %}
**임베드 링크를 클릭합니다.**
{% endstep %}
{% endstepper %}

### 새 임베드를 웹사이트에 배치

{% stepper %}
{% step %}
**이전 절차에서 방금 만든 새 임베드 링크를 복사합니다.**
{% endstep %}

{% step %}
**사이트의 관리자 포털로 이동합니다.**
{% endstep %}

{% step %}
**임베드 iframe HTML을 사이트에서 임베드가 표시되길 원하는 위치에 붙여넣습니다.**
{% endstep %}

{% step %}
**저장하고 사이트를 열어 작동하는지 확인합니다.**

<div align="left" data-with-frame="true"><img src="/files/e70475a12d9a5d51fbeeea29618dff96594f3e08" alt=""></div>
{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.verkada.com/verkada-cameras/ko/video-streaming-and-sharing/embed-a-cameras-live-stream-on-a-website.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.