> 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에서 전체 제품 > 관리자(Admin)로 이동합니다.**
{% 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="https://1726484256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2FXNmddqu1sC8QYqusWhjT%2FScreenshot%202026-04-23%20at%201.06.42%E2%80%AFPM.png?alt=media&amp;token=17ada753-02fc-4880-a87c-b7b2557d4419" alt=""> <img src="https://1726484256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-f89700c19cf0e627bd93278b8e5e5650c6871d2f%2F03172105db29a6b0e03dca1db4e071495a5c6330.png?alt=media" alt=""></div>

***

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

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

<div align="left" data-with-frame="true"><img src="https://1726484256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-c9d70fd88ddc73c95925762284dd2dd914d0d2ee%2F9090483a56d919ed8ae86fe2a76958e635ab6acd.png?alt=media" alt=""></div>

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

<div align="left" data-with-frame="true"><img src="https://1726484256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-187483f69aefa96d9b72bd12f772125b22603f36%2F282123984981d8d484fef02d92bbe8a0a814feac.png?alt=media" 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="https://1726484256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2FBHuGbZTjSfHiTPAhsHKr%2Fembed.avif?alt=media&amp;token=c2b36878-abeb-41f5-804b-14c809372d5b" 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="https://1726484256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-98c71ae8a0bb7058d3110a26a5d500c45aa553f1%2F82b73e4f7ac03be76efed7b94a112476cb402263.gif?alt=media" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
