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

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>

***

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

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

<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 %}
**임베드가 사이트에 표시되길 원하는 위치에 HTML 임베드 iframe을 붙여넣습니다.**
{% endstep %}

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

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


---

# Agent Instructions: 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:

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

The question should be specific, self-contained, and written in natural language.
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.