> 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/ja/bideosutorminguto/embed-a-cameras-live-stream-on-a-website.md).

# カメラのライブ映像をウェブサイトに埋め込んでストリーミングする

Verkadaのカメラを使うと、ウェブサイトにカメラのライブ ストリーミングする映像を埋め込めます。埋め込みは、任意のWebページと互換性のあるインラインフレーム（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 %}

***

## 埋め込み動画をストリーミングするサイズを変更する

埋め込みカメラフィードは、幅、高さ、ワイドスクリーン属性を調整することで、Webページ上でサイズ変更できます。

{% hint style="warning" %}
埋め込みをサイズ変更するときは、下の図のように幅と高さの比率を同じに保ってください。
{% endhint %}

<div align="left"><img src="/files/cbcbf15e8eeb57d36cdf37bad559daf8da69f605" alt=""> <img src="/files/4fcd54197fe2c28be788063a2f3f043b4207b519" alt=""></div>

***

## 埋め込みをワイドスクリーンで表示する

埋め込みをワイドスクリーン表示にするには、 **`?widescreen=1`** というURLパラメータを使用します。以下をご覧ください:

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

左側の埋め込みは標準表示で、右側の埋め込みには **`widescreen=1`** というクエリパラメータが含まれています:

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

***

ユーザーがVerkadaの埋め込みライブ ストリーミングする映像を含むWebページを読み込むと、そのページはiframe内で埋め込みのURLを読み込みます。

{% hint style="warning" %}
参照元のWebサイトが、埋め込み作成時に指定されたドメイン名と一致しない場合、インラインフレーム（iframe）は黒い画面として表示されます。
{% endhint %}

***

## 読み込まれない埋め込みを解決する

{% stepper %}
{% step %}
[**参照元のWebサイトを見つける**](#find-the-referring-website) **埋め込みを作成する際に一致するドメイン名を指定できるようにするためです。**
{% endstep %}

{% step %}
[**正しいドメイン名を使用して埋め込みを再作成します**](#recreate-the-embed-using-the-correct-domain-name)**.**
{% endstep %}

{% step %}
**新しい埋め込みをWebサイトに配置します。**
{% endstep %}
{% endstepper %}

### 参照元のWebサイトを見つける

{% stepper %}
{% step %}
**埋め込みを配置したWebページで、ブラウザを右クリックし、［検証］を選択します。埋め込みが読み込まれないため、画面は黒く表示されます。**
{% endstep %}

{% step %}
**上部の［Network］をクリックします。**
{% endstep %}

{% step %}
**検索/フィルターバーに「embed」と入力します（埋め込み関連のリクエストをフィルタリングするため）。**
{% endstep %}

{% step %}
**英数字のIDが付いたリクエストをクリックします。これは、以下の例のような形式になっているはずです。**
{% endstep %}

{% step %}
**［Request Headers］ セクションで、Referer URL を見つけます。これは、Verkada Command に入力する必要があるURL/ドメインです。（必要なのは .com などのトップレベルドメインまでです。例では、参照元ドメインは verkadasupport.com です。）**

<div align="left" data-with-frame="true"><figure><img src="/files/230b96d9d3def9b15dd02964e8fcfdc5ffdf8faf" 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 %}

### 新しい埋め込みをWebサイトに配置する

{% stepper %}
{% step %}
**前の手順で作成した新しい埋め込みリンクをコピーします。**
{% endstep %}

{% step %}
**サイトの管理ポータルに移動します。**
{% endstep %}

{% step %}
**サイト上で埋め込みを表示したい場所に、HTMLの埋め込みiframeを貼り付けます。**
{% endstep %}

{% step %}
**保存してサイトを開き、正常に動作することを確認します。**

<div align="left" data-with-frame="true"><img src="/files/c5bb8ab611925547f582d5d12af391630ec316cb" 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/ja/bideosutorminguto/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.
