# OBS Studio

{% hint style="success" %}
[**登録不要・無料で利用できるオンラインタイマーツール**はトップページの「Create Timer」からいつでも利用可能です。](https://timer-share.com/)
{% endhint %}

TIMERshareは、強力なストリーミング配信および録画用フリーソフトウェアである「**OBS Studio**」と簡単に統合することができます。\
「OBS Studio」との統合により、**オンライン会議ツールの画面上にタイマーを表示**したり、ライブストリームの配信画面に**タイマーを直接表示**することが可能です。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fi0tIRyR2LybXXcgjrZym%2Fintegration_live_streaming_display.png?alt=media&#x26;token=f4526c4e-de24-4df4-82f3-738da4b95eb8" alt=""><figcaption></figcaption></figure>

さらに、TIMERshareは、[**タイマー画面の要素を個別に分離**](#id-2-taimnowoshitewosuru)する機能や、[背景を**透過色に設定**](#id-1-wonisuru)する機能も備えています。これにより、タイマーを他の映像やプレゼンテーション素材と**シームレスに組み合わせ**て表示でき、画面の構成に合わせて柔軟に配置可能です。

{% hint style="info" %}
OBS studioをお探しですか？こちらからダウンロードできます。\
<https://obsproject.com/download>
{% endhint %}

> 以下のステップバイステップは、ご利用の環境やソフトウェアのバージョンにより画面構成や操作が異なる場合がございます。当該ソフトウェアの使用方法に関する説明ではございませんので、あらかじめご了承ください。\
> 記載されている会社名および製品名等は、各社の商標または登録商標です。

***

## OBS StudioにTIMERshareを追加する

### 1. ソースへ「ブラウザ」を追加する

ソースパネルで「+」ボタンをクリックし、「ブラウザ」を選択します。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fm41q33h2ztmVP5VS7Aw3%2Fobs_add_browser.png?alt=media&#x26;token=176b651b-61c3-4c33-94d9-f35e6147065f" alt="ソースへ「ブラウザ」を追加"><figcaption><p>ソースへ「ブラウザ」を追加</p></figcaption></figure>

{% hint style="info" %}
OBS stadioでは、1つ以上の「シーン」が必要です。デフォルトで設定されていない場合にはシーンパネルで「+」ボタンをクリックし、シーンを追加します。
{% endhint %}

### 2. ブラウザのプロパティの設定方法

表示される「ブラウザ のプロパティ」のウィンドウで、URLフィールドにTIMERshareのviewer画面のURLを貼り付けます。

画面の幅と高さは、幅1280、高さを720（HD/アスペクト比 16×9）を設定します。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FIKKc4uHn6zVmP2MK08lU%2Fobs_browser_propaty.png?alt=media&#x26;token=a217daf7-0664-4ef7-bae8-c524c4c2c063" alt="ブラウザのプロパティを設定する"><figcaption><p>ブラウザのプロパティを設定する</p></figcaption></figure>

{% hint style="warning" %}
タイマーにチャイム音を設定していて、OBS Studioを用いた配信や録画時にサウンドを再生する場合には、「OBSで音声を制御する」を有効にしてください。
{% endhint %}

{% hint style="info" %}
viewer画面のURLの取得方法は、[共有リンクを取得する](https://docs.timer-share.com/quick-start/share/get-share-link)をご参照ください。
{% endhint %}

{% hint style="success" %}
画面の幅と高さは1280×720でなくても構いません。viewer画面の要素はレスポンシブルに要素を調整するため、任意の画面に自動で適合します。
{% endhint %}

### 🎉 OBS StudioにTIMERshareを表示できました

試しにcontroller画面からタイマーを起動してみましょう。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FJ2Ku7beVfTbUUJEgJz3M%2Fobs_start_timer.png?alt=media&#x26;token=9ede861d-5988-4962-a233-283ca1e032c8" alt=""><figcaption></figcaption></figure>

ちなみに、TIMERshareはインターネットに接続された**あらゆるデバイス(Desktop/Mobile)からブラウザを通してアクセスできる**ため、配信中に様々なツールで画面が占有されるような状況であっても、タイマーのコントロールは手元のスマートフォンからでも簡単に行え、配信の流れを妨げることなく操作できます。

以下に記載の項目は、利用シーンに合わせてご参照ください。

***

### OBS Studioの仮想カメラをオンライン会議ツールで利用する場合

{% hint style="success" %}
OBS Studioの仮想カメラを用いて、ZoomやTeamsなどの主要な[オンライン会議ツールの画面にタイマーを表示する](https://docs.timer-share.com/integration/online-meeting-tools)ことができます。
{% endhint %}

{% hint style="info" %}
事前に「コントロール」から「仮想カメラ開始」を選択する必要があります。
{% endhint %}

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2F60qpIN0xFotpUYoo0mIr%2Fobs_start_camera.png?alt=media&#x26;token=54b3461a-54c2-467b-8c55-26e667559cdb" alt="「コントロール」から「仮想カメラ開始」を選択する"><figcaption><p>「コントロール」から「仮想カメラ開始」を選択する</p></figcaption></figure>

***

## カメラの上にタイマーを表示する(カメラと併用する)

背景の透過色やタイマー画面の要素を個別に分離することで、タイマーを他の映像やプレゼンテーション素材とシームレスに組み合わせて表示でき、画面の構成に合わせて柔軟に配置可能です。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FblrB3sSP2f49QsMNwvOc%2Flive_streaming_integration.gif?alt=media&#x26;token=377170e9-32c7-42bf-885e-a4a6ab4a2fe5" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="success" %}
OBS Studioの仮想カメラを用いて、ZoomやTeamsなどの主要な[オンライン会議ツールの画面にタイマーを表示する](https://docs.timer-share.com/integration/online-meeting-tools)ことができます。
{% endhint %}

### 1. 背景色を透過色にする

クロマキーカラーを用いたブレンドやフィルターは必要ありません。viewerの共有リンクに `timer-bg-transparent` の[URLパラメータを設定する](https://docs.timer-share.com/quick-start/advanced-settings-operation/use-url-parameters/viewer-bg-transparent)だけで、背景が透過色になります。

```typoscript
例 https://timer-share.com/timer_sections/UUID?timer-bg-transparent=true
```

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FZedB5ZOvkOKWQspNCHO5%2Fobs_bg_transpant.png?alt=media&#x26;token=13e3692d-0485-4b0c-a20e-82f8aff2c84e" alt="背景を透過色にする"><figcaption><p>背景を透過色にする</p></figcaption></figure>

### 2. タイマーの要素を分離して画面を構成する

画面のトリミングによる画面構成は面倒です。viewerの共有リンクに `only-timer-display` の[URLパラメータを設定する](https://docs.timer-share.com/quick-start/advanced-settings-operation/use-url-parameters/viewer-screen-separation#taitorupuroguresubnoidzurekanomiwosuru)だけで、指定された要素だけを表示させることができます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FLxBaQvp0Tnq4EmElYtfs%2Fviewer-screen-separation.png?alt=media&#x26;token=bf1b527c-5aca-4f53-8e4a-459e8689df1f" alt=""><figcaption></figcaption></figure>

```typoscript
例 https://timer-share.com/timer_sections/UUID?only-timer-display=timer
```

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FEhLKvn1cSOibNHgzhCJo%2Fobs_separate.png?alt=media&#x26;token=29f16c9e-ee58-46cd-81a3-fe22bc2ca646" alt="要素を分離して画面を構成する"><figcaption><p>要素を分離して画面を構成する</p></figcaption></figure>

{% hint style="info" %}
複数のパラメータを指定する場合には、１つ目のパラメータを「?」で始め、２つ目以降のパラメータは「&」で区切ります。\
例: <https://timer-share.com/timer\\_sections/UUID><mark style="color:orange;">**?only-timer-display=timer**</mark><mark style="color:purple;">**\&timer-bg-transparent=true**</mark>
{% endhint %}

{% hint style="success" %}
下記[タイマーとカメラを別のシーンに分けてクイックに画面を切り替える](#taimtokamerawonoshnniketekuikkuniworieru)と組み合わせることで、画面表現の幅が広がります。
{% endhint %}

***

## タイマーとカメラを別のシーンに分けてクイックに画面を切り替える

### 1. OBS Studioに「カメラ用シーン」と「タイマー用シーン」の2つのシーンを設定します

OBS Studioのシーンを追加して、わかりやすい名前をつけます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FCpd12OZC9htnCPes7eoV%2Fobs_add_scene.png?alt=media&#x26;token=4493454a-ef53-41bb-bd7c-813c81b081eb" alt="「カメラ用シーン」と「タイマー用シーン」を作成する"><figcaption><p>「カメラ用シーン」と「タイマー用シーン」を作成する</p></figcaption></figure>

### 2. シーンを選択して、タイマーとカメラをクイックに切り替えができます

シーンを選択して、タイマーとカメラをクイックに切り替えができます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FpiKQR2ZqcOK3Bq1Czvct%2Fobs_change_scene.gif?alt=media&#x26;token=93757e63-c3f1-4102-afeb-a57a42471116" alt="タイマーとカメラをクイックに切り替え"><figcaption><p>タイマーとカメラをクイックに切り替え</p></figcaption></figure>

{% hint style="success" %}
詳細は割愛いたしますが、OBS stadioの「シーントランジション」をカスタマイズして、切替時の画面演出も設定できます。\
詳しくは「OBS studio シーントランジション」などでWEB検索ください。
{% endhint %}

{% hint style="success" %}
上記[カメラの上にタイマーを表示する(カメラと併用する)](#kameranonitaimwosurukameratosuru)と組み合わせることで、画面表現の幅が広がります。
{% endhint %}