Twitch Developer Rig のストリーム DirectX サンプル

Twitch Developer Rig を使って、DirectX サンプルを動作させるために必要なすべての設定が完了したら、サンプルを実行するために、さらにいくつかの手順が必要です。

注釈

この情報は、Twitch が管理するシステムに依存しています。できるだけ新しい情報を提供できるようにしていますが、最新の情報については、Twitch developer documentation をご確認ください。

Genvid ライブラリを追加します

Genvid MILE SDK のルートフォルダから

  1. api/web/dist フォルダに移動します。

  2. genvid.umd.jsgenvid-math.umd.js をコピーする。

  3. 両方のファイルを samples/cube/twitch-extension/js フォルダにペーストします。

Three.js ライブラリを追加

ライブラリは こちら の公式 three.js Github からダウンロードできます。

  1. /samples/cube/twitch-extension/js に three.js を追加

  2. /samples/cube/twitch-extension/video_overlay.html で head タグの間に <script> タグを追加し、 src 属性には先ほどダウンロードしたファイルを指定します。

  3. 例:

    <script src="js/three.js" type="text/javascript"></script>
    

ホストフロントエンドファイル

まず、Developer Rig に、フロントエンドファイルがホストされている場所を指定する必要があります。

  1. Twitch Developer Rig を開きます。

  2. Project Details をクリックします。

  3. Host your front-end files の横にある Select をクリックします。

  4. オーバーレイファイル (/samples/cube/twitch-extension) を保存したフォルダを選択します。

  5. Select Folder をクリックします。

  6. Run Front End をクリックします。

この時点で、 Running… というメッセージが表示され、Developer Rig Web サーバーログのウィンドウがポップアップし、現在のファイルが表示されます。

拡張機能画面の作成

次に、Genvid オーバーレイを保持する拡張機能画面を作成します。

  1. クラスタを開始します。

  2. Twitch チャンネルでライブ配信が実施されていることを確認します。

  3. Twitch Developer Rig で、 Extensions Views をクリックします。

  4. Create New View をクリックします。

  5. オーバーレイ を開始します。

  6. View Label で画面の名前を入力します。

  7. Overlay Size を選択します。

    これは、クラスタの設定と同じになります。 (通常は 1280 x 720。)

  8. Save をクリックします。

ストリームが Developer Rig に埋め込まれました。

ローカルクラスタの構成サービスの設定

次に、クラスタが認証を行うために接続するエンドポイントを設定し、Web ソケットに接続します。

  1. Configuration Service をクリックします。

  2. Configuration Type で、Broadcaster を選択します。

  3. Fetch Configuration をクリックします。

  4. 設定ボックスに、次の JSON オブジェクトをペーストします。

    {"web-endpoint":"https://[::1]:{web_server_port}/api/public/channels/join"}
    
  5. {web_server_port} をクラスタのポートに変更します。ポート番号の確認方法は次の通りです。

    • クラスタ UI の Health ページに移動します。

    • web をクリックします。

    • ポート 番号をコピーする。

    Cluster UI Health Page
  6. Save をクリックします。

Extension Views ウィンドウに DirectX ストリームと 2 つのオレンジ色のボタンが表示されます。表示されない場合は、 Refresh All Views をクリックします。

クラウドクラスタの構成サービスの設定

次に、クラスタが認証を行うために接続するエンドポイントを設定し、Web ソケットに接続します。

  1. Configuration Service をクリックします。

  2. Configuration Type で、Broadcaster を選択します。

  3. Fetch Configuration をクリックします。

  4. 設定ボックスに、次の JSON オブジェクトをペーストします。

    {"web-endpoint":"https://<cluster>/api/public/channels/join"}
    
  5. Replace <cluster> with the name of your cloud cluster web endpoint. To find it:

    • クラスタ UI の Settings ページに移動します。

    • Config をクリックします。

    • cloud/endpoint/web キーに関連付けられた値になります。

    Cluster UI Settings Config Page
  6. Save をクリックします。

Extension Views ウィンドウに DirectX ストリームと 2 つのオレンジ色のボタンが表示されます。表示されない場合は、 Refresh All Views をクリックします。

注釈

Twitch Developer Rig は、Twitch の onContext コールバックを設定せず、毎秒コールバックをトリガすることもありません。そのため、自分のプロジェクトに必要なものに基づいて、onContext をトリガするタイミングを決定することができます。

Genvid MILE SDK は プロパティに|依存しているため、オーバーレイを開始するには、少なくとも 1 回はコンテキストの変更をトリガーする必要があります。

  1. Edit Context をクリックします。

  2. hlsLatencyBroadcaster の値を変更します。

    通常の値は約 2 秒ですが、環境やネットワークに応じて調整できます。