# Xsplit Broadcaster

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

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

<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" %}
Xsplit Broadcasterをお探しですか？こちらからダウンロードできます。\
<https://www.xsplit.com/broadcaster>
{% endhint %}

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

***

## Xsplit BroadcasterにTIMERshareを追加する

### 1. ソースへ「Webpage」を追加する

「Scene 1」等を選択し、画面左下の「Add Souece」から「Webpage」を選択します。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fs932qG59o1oVaiROgzj2%2Fxsplit_add_browser.png?alt=media&#x26;token=6f3133c8-cfc2-449e-a55b-bc454884a072" alt="ソースへ「Webpage」を"><figcaption><p>ソースへ「Webpage」を追加</p></figcaption></figure>

### 2. URLフィールドの設定方法

表示される「Add Webpage URL」のウィンドウで、URLフィールドにTIMERshareのviewer画面のURLを貼り付けます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2F2DNL8RZQYXYDiV6Z4Ucw%2Fxsplit_browser_url.png?alt=media&#x26;token=4bf0dc6e-d178-4c7d-9b10-6a8590ea9c61" alt="URLフィールドの設定" width="370"><figcaption><p>URLフィールドの設定</p></figcaption></figure>

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

### 3. Displayサイズの設定方法

作成したソースを右クリックして「Settings」を開きます。

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2Fsz7W60GHChWJBieRJkrV%2Fxsplit_browser_open_settings.png?alt=media&#x26;token=c1a7365b-2a3d-406c-852a-4341afdeb34c" alt=""><figcaption></figcaption></figure>

「Display」の設定を「Original source」から「Custom」に変更し、幅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%2F49z3PtXLptX4hslsg8H4%2Fxsplit_browser_settings_propaty.png?alt=media&#x26;token=55ff9a85-8131-4ad0-9da7-2a51e4188825" alt="画面サイズを設定する"><figcaption><p>画面サイズを設定する</p></figcaption></figure>

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

### 🎉 Xsplit BroadcasterにTIMERshareを表示できました

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2F24DnkKc6UGXxxVoUOmMZ%2Fxsplit_start_timer.png?alt=media&#x26;token=306efe39-a145-4391-a7eb-aa39f20a1981" alt=""><figcaption></figcaption></figure>

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

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

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

***

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

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

<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" %}
Xsplit Broadcasterの仮想カメラを用いて、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)だけで、背景が透過色になります。

{% code fullWidth="false" %}

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

{% endcode %}

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FPkWaZg4QUoSpYl8zN225%2Fxsplit_bg_transpant.png?alt=media&#x26;token=da21ac7f-7d56-484a-8005-1f0ae6fb6c9c" 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%2FGGesLAlqKW7ylaHQUEP4%2Fxsplit_separate.png?alt=media&#x26;token=f4de719e-194c-4eee-9f7a-79047c6e4c32" 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. Xsplit Broadcasterに「カメラ用シーン」と「タイマー用シーン」の2つのシーンを設定します

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

<figure><img src="https://34971084-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqxJX6GsaQQ89UCy3dRLd%2Fuploads%2FL8kboSPAjkdPyoA0T0yO%2Fxsplit_add_scene.png?alt=media&#x26;token=cc886ca4-1d15-4ecc-9615-9ce2ef7e7ba0" 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%2F88a51z9I8ss5782V2XGb%2Fxsplit_change_scene.gif?alt=media&#x26;token=48fd38d6-c09f-4faf-8dd3-76646b07316e" alt="タイマーとカメラをクイックに切り替える"><figcaption><p>タイマーとカメラをクイックに切り替える</p></figcaption></figure>

{% hint style="success" %}
詳細は割愛いたしますが、Xsplit Broadcasterの「Transition」を変更して、切替時の画面演出も設定できます。\
詳しくは「Xsplit Broadcaster トランジション」などで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-xsplit-broadcaster.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.