Twitch Extensionsとは
動画ストリーミングプラットフォームTwitch上において、ユーザーが開発したHTML+JacaScriptコンテンツを表示できる機能です。2017年から提供されています。
現在のところPC版・ブラウザ版のTwitchのみ利用できます。
Twitch Extensions
https://dev.twitch.tv/extensions
技術的には、任意のWebアプリを開発して、Twitchの動画視聴ページにHTML iframesとして埋め込みができる機能…と言えます。
Twitch Extensionsを使って、動画の上や配信ページの下部にリアルタイムな情報を表示できます。
たとえば配信中のゲーム大会のトーナメント表や選手の戦績を動画の上から重ねて表示させたりできます。
つまり、動画視聴者に向けた独自のUIが構築できるということです。
ライブ配信と連動したゲームコンテンツの開発においてはコメント欄でのコマンド書き込みを使った疑似的な実装がありますが、TwitchではこのExtensionsを使えばコメント欄は本来のコメントで使用し、インタラクションは専用UIで提供できます。
Genvidとは
ゲーム技術を応用したインタラクティブな動画配信SDKです。Genvidはクラウドサーバー上で動かすソフトウェアであり、プラットフォームではありません。
インタラクティブなライブ動画配信においては、ゲームを中心としたリアルタイムなコンテンツとブラウザとの通信を行うレイヤーが必要です。
たとえば、動画視聴者の投票データを集計したり、ゲーム内の情報（勝敗とか）をブラウザへデータ配信する部分です。
Genvidはクラウドサーバーへのデプロイも含めて、この通信を行う仕組みを提供します。
技術上はライブ配信のプラットフォームやアプリは問わす利用できます（※動画プラットフォーム側がjsの動作をサポートしている場合）。
Genvidは、実際のプロダクションとしては現在TwitchとFacebook上で利用されています。
Twitchにおいては、前述のTwitch Extensionsで描画を制御し、Genvidがサーバー通信部分を担います。
Amplify Your Engineering Resources with the Genvid SDK
https://blog.twitch.tv/en/2018/12/11/building-extensions-with-genvid-22401da163c2/
Twitch Extensionsの開発者登録とサンプル起動
今回は開発者登録～サンプル起動までの流れを説明します。
開発者登録
新しいプロジェクトを作成します。
どんなタイプのExtensionを作るかを聞かれるので、今回は動画に重ねて表示させるVideo - FullscreenとVideo - Componentを選んでおきます。
これで管理画面が表示されます。
Extensions Developer Rig
続いてテスト環境をインストールします。Developer Rigは、Extensions開発用のシミュレーターツールです。
開発中のExtensionsをローカルPC上でホストして動作を確認します。
下記からダウンロード・インストールしましょう。
https://dev.twitch.tv/docs/extensions/rig
プロジェクト作成
Develiper Rigインストール後、FileのNew Projectから新規にプロジェクトを作成します。このとき、Select Existingから先ほど開発者コンソールで作成したプロジェクトを選択します。
次に、Select the local folder～でどこにExtensionsのファイルを置いておくか決めます。
「Use Extension tutorial example」を選ぶと、4種類のテンプレートから選択できます。
今回は基本機能がテストできる「Getting Started」から始めましょう。Github repoからデータが自動的にダウンロードされます。
プロジェクトを開いたらさっそく実行してみます。左メニューの「Extension Views」タブの「Create New View」から、実際の配信動画の上でテストを行うビューを作成します。
ビューは今回動画に重ねて描画する「Overlay」タイプになります。View Labelには適当な名前を入れましょう。また、「Display Channel」には自分のチャンネルIDが入っていますが、テストにおいて自分で動画配信をするのが手間な場合は、現在配信中の適当なチャンネルのIDを入れるとその動画の上に重ねる形で描画テストができます。
自分のゲームの動画をTwitchで流しながらExtension Viewsを表示させました。
ちょっと見づらいですが、「Hello, World!」と表示されている文字やボタン、紫色の〇がTwitch Extension側で描画されているものです。
このデモでは、オーバーレイの描画に必要なフロントエンドの描画のほか、データを保持するバックエンド（Extension Backend Service (EBS))を起動して視聴者の操作を保持・取り出しを行っています。
ボタンをクリックすると〇の色が変化し、バックエンドサーバーに保存されます。
開発の流れと審査
Twitch Extensionsの開発は誰でもできますが、実際の配信で使用するためにはTwitchへ提出し審査を受ける必要があります。
開発と審査の流れは次のステップがあります。
https://dev.twitch.tv/docs/extensions/life-cycle/
ローカルテスト
Developer Rigを使ったローカルPCでのテストです。
Hostedテスト
Twitchのサーバー（Twitch CDN）にExtensions用のファイル一式をアップロードしてテストする段階です。
レビューと承認済み状態
Hosted Testが完了したらレビューに提出します。レビュー結果は「保留(Pending）」、「却下（Rejected）」、「承認済み（Approved)」のいずれかになります。
保留というのは修正が必要とされる状態です。テストチームからメールが来て、承認されなかった理由と問題の箇所を修正したのちに再提出となります。
却下はそもそもコンテンツ自体が不適切判定され、プロジェクトがIDごと削除されます…。
レビューにどれくらいの時間がかかるかは不明ですが、ゲーム大会などでExtensionを使用する場合は早期にこのレビューを受ける必要があるとみられます。
リリース
Extensionsの場合、動画視聴者が特定のバージョンを指定して使用することはできず、常に最新版がホストされます。
ただ、ブラウザ側のキャッシュが残っている可能性があるため、バージョンが異なる状態で視聴を開始した際にリロードを促す仕組みがあると良いでしょう。
プロジェクトのシークレットキーについて補足
Developer Rigでプロジェクトを閉じた後に開き直す際、拡張機能のAPIシークレットを求められることがあります。
これは前述のバックエンドサーバーに接続する際必要になるものです。
これはRetreve your Extension Secretのリンクからページを表示して取得できますが、「Twitch APIクライアント」ではなく「拡張機能の秘密（Secretの誤訳…」が生成する40文字のキーとなります。
