> 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).

# カメラのライブストリームをWebサイトに埋め込む

Webサイトにカメラのライブストリームを埋め込む方法を学びます

Verkadaのカメラでは、Webサイトにカメラのライブ ストリーミングする映像を埋め込めます。埋め込みは、任意のWebページと互換性のあるインラインフレーム（iframe）のコードスニペットです。

{% hint style="warning" %}
埋め込みが作成された後でも、アクセスはいつでも取り消せます。
{% endhint %}

***

## 埋め込みリンクを作成する

{% stepper %}
{% step %}
**Verkada Commandで、［すべての製品］>［カメラ］に移動します。**
{% endstep %}

{% step %}
**Webサイトに埋め込みたいカメラフィードに移動します。**
{% 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="https://2033575148-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://2033575148-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://2033575148-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://2033575148-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の埋め込みライブ ストリーミングする映像を含むWebページを読み込むと、ページは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 %}
**新しい埋め込みをWebサイトに配置します。**
{% endstep %}
{% endstepper %}

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

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

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

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

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

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

<div align="left" data-with-frame="true"><figure><img src="https://2033575148-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 %}

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

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

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

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

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

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