最初のオーバーレイを追加する
OBSやTikTok LIVE Studioのブラウザソースとして、Vfinityのウィジェットを配信画面に配置する
オーバーレイは、VfinityがPCローカルから配信する軽量なWebページです。ウィジェットのアドレスをコピーし、OBSまたはTikTok LIVE Studioのブラウザソースに貼り付けるだけで、配信画面に表示されます。
ここでは初期状態でオンになっている チャットボックス（視聴者のチャットを表示するウィジェット）を追加します。他のすべてのウィジェットもまったく同じ手順で配信画面に配置できます。
ウィジェットを探す
ドックの オーバーレイ をクリックします。ライブラリには各ウィジェットがスイッチ付きのカードとして、カテゴリーごとにまとめて表示されています。ウィジェットを検索 に入力するか、チャット などのチップをクリックして絞り込みます。チャットボックス を探し、スイッチがオンになっていることを確認します。
アドレスをコピーする
チャットボックス カードで URLをコピー をクリックします。ボタンが コピー完了 に変わり、アドレスがクリップボードにコピーされます。カードを右クリックして OBS用 URL をコピー を選ぶこともできます。
アドレスは http://127.0.0.1:21424/#overlay-chat?lang=ja のような形式です。#の後の部分がウィジェットを指定し、lang パラメーターがアプリの言語と一致させます。
http://127.0.0.1:21424/#overlay-goal?id=goal1&lang=ja
- このPC上のオーバーレイサーバーhttp://127.0.0.1:21424
- ウィジェットの種類#overlay-goal
- 同種の中での識別子?id=goal1
- 言語（アプリ設定に固定）&lang=ja
ブラウザソースとして追加する
OBSでもTikTok LIVE Studioでも設定手順は同じです。
ブラウザソースを追加する
ソース パネルで + をクリックし、ブラウザ を選びます。「Vfinityチャット」など、分かりやすい名前を付けます。
アドレスを貼り付ける
ソースのプロパティにあるURL欄に、コピーしたアドレスを貼り付けます。
サイズを設定する
幅を 1920、高さを 1080 に設定し、OKをクリックして確定します。他のソースと同様に、キャンバス上で移動やトリミング（切り抜き）を行えます。
動作を確認する
Vfinityに戻り、チャットボックス カードの OBSでテスト をクリックします。「Vfinity からのテストメッセージです。チャットオーバーレイは動作しています！」というテストメッセージがソースに表示されます。このテストはオーバーレイの表示確認のみを行うため、イベント、読み上げ、統計などは発動しません。
ダッシュボードでは現在開かれているソースの数も把握できます。接続 カード内の OBS でオーバーレイを表示中 チェック項目が緑色になり、接続中のクライアント数が表示されます。カードに 配信の準備ができました と表示されている場合は、詳細を表示 をクリックしてチェック一覧を確認してください。
投擲アイテムを追加する
投擲アイテムは専用の独立したページを使用します。アドレスはダッシュボードの 投擲オーバーレイ カードにあり、コピーボタンが付いています。ギフトが配信画面を飛ぶようにするために、これも1920×1080の別のブラウザソースとして追加してください。ギフトを投擲アイテムにする方法は 投擲 を参照してください。
Vfinityを起動したまま配信する
オーバーレイはVfinity自体から配信されているため、配信中はVfinityを開いたままにしておく必要があります。もし起動時にポート21424が他のアプリで使用されていた場合、Vfinityは別の空きポートを自動選択して通知します。その際はアドレスも変わるため、再度URLをコピーしてOBSのソースを更新してください。
OBSは一度読み込んだページを表示し続けます。Vfinityをアップデートしたら、Vfinityの各ソースを一度ずつ更新してください。手順は アップグレード で説明しています。
別のPCのOBSにオーバーレイを表示する方法については、オーバーレイ を参照してください。