# 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 %}


---

# Agent Instructions: 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:

```
GET https://docs.timer-share.com/integration/live-streaming/integration-with-obs-studio.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.