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

Verkadaのカメラでは、ウェブサイトにカメラのライブストリームを埋め込むことができます。埋め込みはインラインフレーム（iframe）のコードスニペットで、任意のウェブページと互換性があります。

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

***

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

{% stepper %}
{% step %}
**Verkada Commandで、All Products > Cameras に移動します。**
{% endstep %}

{% step %}
**ウェブサイトに埋め込みたいカメラフィードに移動します。**
{% endstep %}

{% step %}
**フレームの右側で、Share をクリックします。**
{% endstep %}

{% step %}
**More options をクリックして Embed Code を選択します。**
{% endstep %}

{% step %}
**ビデオの再生を許可するドメインを入力します。**
{% endstep %}

{% step %}
**Add Domain > Embed Link をクリックして埋め込みコードを生成します（クリップボードに自動で追加されます）。**
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
ワイルドカードは使用できます（例： *\*.yourdomain.com*）。ドメインが *yourdomain.com*の場合、先頭のワイルドカードは不要で、単に *yourdomain.com*を使用できます。ただし、ドメインが *yoursubdomain.yourdomain.com*の場合、サブドメインを指定するためにワイルドカードを使用できます。
{% endhint %}

![](https://2033575148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-e168df8f2cc5af14fb4679ca5894deb6293e1730%2F3ca636f2628aeaf3a49946eaf8eff03abe0374d4.png?alt=media)

***

## 既存の埋め込みリンクを管理する

{% stepper %}
{% step %}
**Verkada Commandで、All Products > Admin に移動します。**
{% endstep %}

{% step %}
**Org Settings の下で、Manage Shared Links を選択します。**
{% endstep %}

{% step %}
**Embedded タブを選択します。**
{% endstep %}

{% step %}
**ドメインを選択し、Copy Embed アイコンをクリックして埋め込みコードをコピーするか、Revoke Embed をクリックして埋め込みアクセスを取り消します。**

<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-90d24dc8d3b0d15b75aee9210df79c8b89230d8e%2Fa9d0f5567917f52723af6a7a84bec838eb7b0794.png?alt=media" alt="" width="1544"></div>
{% endstep %}
{% endstepper %}

***

## 埋め込みビデオストリームのサイズを変更する

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

{% 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%2Fgit-blob-f6b6514fac3f6b2967c3df6f09d8c5c328600d08%2Ff212280394b9e38ecd536e55f1f20a72f5d45719.png?alt=media" alt="" width="336"></div>

<div align="left"><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="" width="431"></div>

***

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

埋め込みをワイドスクリーンに表示するには、 **`?widescreen=1`** パラメータをURLで使用します。例：

![](https://2033575148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-c9d70fd88ddc73c95925762284dd2dd914d0d2ee%2F9090483a56d919ed8ae86fe2a76958e635ab6acd.png?alt=media)

左の埋め込みは標準表示で、右の埋め込みは **`widescreen=1`** クエリパラメータが付いています：

![](https://2033575148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-187483f69aefa96d9b72bd12f772125b22603f36%2F282123984981d8d484fef02d92bbe8a0a814feac.png?alt=media)

***

ユーザーが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 %}
**埋め込みを配置したウェブページで、ブラウザを右クリックして Inspect を選択します。埋め込みが読み込まれないため、これは黒い画面になります。**
{% endstep %}

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

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

{% step %}
**英数字のIDを持つリクエストをクリックします。その形式は以下の例に似ています。**
{% endstep %}

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

{% hint style="warning" %}
もしすぐに **embed.html**が表示されない場合は、 **Refresh** をクリックしてページを再読み込みします。
{% endhint %}

![](https://2033575148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-3521977126db38fa9154539f78681d0b7c24d55d%2Fb0d3cf256be2dd179c5c6a55a12b9900eb886b1b.png?alt=media)

### 正しいドメイン名を使って埋め込みを再作成する

{% stepper %}
{% step %}
**Verkada Commandで、All Products > Cameras に移動します。**
{% endstep %}

{% step %}
**カメラを選択し、Share をクリックします。**
{% endstep %}

{% step %}
**More options を選択 > Embed Code をクリックし、参照元のドメインを入力します。**
{% endstep %}

{% step %}
**Embed Link をクリックします。**
{% endstep %}
{% endstepper %}

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

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

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

{% step %}
**埋め込みを表示したい場所にHTMLのiframe埋め込みコードを貼り付けます。**
{% endstep %}

{% step %}
**サイトを保存して開き、動作を確認します。**

​
{% endstep %}
{% endstepper %}

![](https://2033575148-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FylYKicREo6JpuOJH4teK%2Fuploads%2Fgit-blob-98c71ae8a0bb7058d3110a26a5d500c45aa553f1%2F82b73e4f7ac03be76efed7b94a112476cb402263.gif?alt=media)
