Genvidセミナー インタラクティブな動画配信を最短実装！

Genvidセミナー インタラクティブな動画配信を 最短実装！ Copyright © 2019 - Genvid Technologies, Inc.

目次 ● ● ● ● ● Genvidおさらい 最近のGenvid 「ローカルテスト」の説明 「動画からゲームにアイテムを出現させる」システムを作ろう 今後のガイド

開発者：一條貴彰 ● ゲーム作家 ○ ● 「Back in 1995」 ■ https://ec.nintendo.com/JP/ja/titles/70010000012606 ■ Steam, PS4, Switch, Xbox One等で配信 株式会社ヘッドハイ 代表取締役 ○ ○ 日本のゲーム開発者向けビジネスサポート ■ ゲーム産業特化のDevRel活動 著著 ■ 「インディーゲーム・サバイバルガイド」 ■ 「Unityサウンド エキスパート養成講座」

• https://ec.nintendo.com/JP/ja/titles/70010000012606

大規模インタラクティブ・ ライブ・イベント （MILE）

インタラクティブな動画視聴体験 ライブ配信動画をインタラクティブに。 動画と同期してデータを配信＋視聴者の入力データを受信 視聴者毎にカスタマイズされた視聴体験 © 2018 Genvid Technologies Inc. 動画を触ってインタラクション可能 5

事例「Rival Peak」 ● ● ● ● ● サバイバル番組がテーマ プレイヤーがいない、AIキャラのみ キャラごとに用意されたカメラを切り替え 視聴者の投票などでAIキャラの行動に影響 数万人が一つの世界に参加 ○ 現在も視聴できます ■ https://fb.com/RIVALPEAK

• https://fb.com/RIVALPEAK

MILE 実現方法 ● ● ● ● サーバーで高品質な映像をゲームエンジンでレンダリング 動画配信プラットフォームで動画をブロードキャスト 視聴者のブラウザで動画の上から文字・画像を重ねる（オーバーレイ） ブラウザ上の視聴者の操作データを集計・コンテンツに反映 動画の上から 視聴者用UIを 重ねる クラウドでレンダリングし、 動画としてブロードキャスト リッチなコンテンツを表示 7

視聴方法 ● Twitch ○ ○ ● Facebook ○ ○ ● Facebook上で視聴できる動画プラットフォーム オーバーレイを実装できる APIがある YouTube ○ ○ ● ゲーム動画配信に特化したプラットフォーム（ Amazon傘下） Twitchウェブサイト上でオーバーレイを実現する Twitch Extensionsがある オーバーレイの実装方法がないため、 YouTubeのサイト上では見れない 視聴専用Webサイトを配信者が用意し、その中に YouTubeを埋め込む カスタム・その他 ○ ○ 開発者が独自で動画配信インフラを用意 ■ Limelight Realtime Streamingなど 動画プラットフォームがオーバーレイの実装 APIを提供すれば何でも

クラウドでしか実現できないエンタメ ● ● 数十万人の視聴者が同時参加 14個のUnityインスタンスが連動

インタラクション可能な動画

その他のコンテンツ ● Pac-man Community ● The Walking Dead Last Mile ○ ○ Facebookで視聴 制作発表したばかり！

登壇者が開発中「デモリッションロボッツ K. K.」 ● Twitchの動画視聴者がゲームに参加 ○ ○ ○ ○ 実況動画の視聴者は「かつてこの都市に住んでいた人」というロールを与えられる 視聴者は、トラップアイテムを投下してプレイヤーを邪魔できる 逆に、プレイヤーを応援してパワーアップをさせることもできる 巨大ロボが戦わずに、ひたすら街を破壊する４人対戦アクションゲーム

視聴者専用のUI 所持ポイント 投下するトラップの選択 トラップ投下ボタン ロックオンマーカー 応援ボタン 「my house」表示

Genvidと「コメント連動型」との違い ● 視聴者によるボタンのクリック入力 ○ ○ ● 動画と同期 ○ ○ ● コメント式は「コメントを打ち込む」 Genvidはオーバーレイによる「専用のUI」でマウス操作 コメント式は「いつ反映されるのか」わからない Genvidは自分の入力がいつ反映されるかのタイムラグを表示できる データのブロードキャスト ○ コメント式は視聴者からデータを受け取るだけ ○ Genvidは動画と同期した情報を配信元から視聴者へ送ることができる ■ プレイヤーの位置 ■ 勝敗情報 ■ 装備情報

Genvidシステム構成概念図 RTMP 動画・音声描画用 のゲーム本体を サーバー上で実行 WebSocket Copyright © 2019 - Genvid Technologies, Inc.

Genvidの実体は「サーバーミドルウェア」 ● クラウドサーバー上で動かすソフトウェア群＋ ゲームエンジンSDK ○ ○ 動画インフラ、クラウドサーバーは選べる ■ ゲーム開発者がクラウドサーバーを用意して動作させる ■ AWSとAzureに対応 クラウドサーバー上で動画と音声をキャプチャしてストリームする ■ PC版のゲーム実行ファイルをサーバー上で動作させる ■ ゲームクライアント（プレイヤーが遊ぶもの）は何のプラットフォームでもよい。 PC /PS4 / Switch / モバイル... 対応動画プラットフォーム

Genvid SDKでインストールされるソフトウェア ● ● ● Python 3.5.4 C++ Build Tools Node.js ○ ● AWS Command Line Interface ○ ● サンプルのWebサイトを動作させるため AWSへデプロイするためのもの TightVNC ○ ○ AWSで立ち上げたインスタンスへの接続 (常駐するので使わないときはオフにしよう！）

インタラクティブ・ストリーミングに必要なシステム ● ストリーミング動画上にボタンや文字をオーバーレイ描画 ○ ○ ● サーバー処理 ○ ○ ○ ● ゲームをサーバー上で動作させ、動画キャプチャして Twitch/YouTubeに送る ウェブサイトからの入力を受け取ってゲーム本体に渡す ゲーム本体からの情報をウェブサイトに渡す Genvidはこの範囲を担当 ゲーム本体（PC、コンソールで動作） ○ ○ ● TwitchならTwich Extensions YouTubeなら動画を埋め込んだウェブサイト ウェブサイトに表示するデータをサーバーに送信する サーバーがウェブサイトから収集したデータを受け取る その他 ○ ○ 決済システム ユーザー管理（ログイン）

Genvid SDKの役割 ● 提供するもの ○ ○ ○ ○ ○ ● ゲーム・サーバー・ウェブサイト間の通信 サーバー上ゲームの動画キャプチャと、 Twitch / YouTubeへの送信 Genvidサーバーと通信する jsライブラリ（Twitch Extensions、ブラウザ用） クラウドサーバーへデプロイするためのツールキット一式 ローカルPCでテストするためのソフトウェア一式 しないもの ○ ○ ○ ログイン機能・ユーザー管理機能 決済機能 ■ TwitchならBits(Twitch内の仮想通貨）が使える ■ YouTubeなら、何らかの独自決済サービスの導入が開発者側で必要 視聴用ウェブサイトのオーバーレイ「描画」システム ■ TwitchならTwitch Extenionsを使う ■ YouTubeなら、埋め込み＋フロントエンドフレームワークによるオーバーレイ描画

Genvid組み込みとローカルテスト

「ローカルテスト」について知る ● クラウドサーバーを使わず、PC上でGenvidのシステム一式をテスト実行する ○ ゲーム本体 ○ Genvid通信システム ○ 動画視聴ウェブサイトのホスティング ● サーバーを用意する前に、動作確認できる ○ とりあえずオーバーレイの挙動だけ確認できる ○ クラウドサーバー契約を会社で用意するのって意外と面倒...。

プロダクト（サービスイン状態）のイメージ ゲームの オンラインマルチ用 サーバー Genvid用 Windows クラウドサーバー Genvid SDK入りの ゲームの exe ゲーム機 or スマ ホ or PC Twitch Twitchにアップロー ドされた オーバーレイ要素 動画 Genvid システム 視聴者のPC/スマホ ブラウザ データ通信 ゲームの実行ファイ ル 動画 ブロード キャスト 視聴者のPC/スマホ 視聴者のPC/スマホ ブラウザ ブラウザ 視聴者のPC/スマホ ブラウザ 視聴者のPC/スマホ ブラウザ

ローカルテストのイメージ ゲームの オンラインマルチ用 サーバー 開発用PC ホスティングされた オーバーレイ要素 Genvid SDK入りの ゲームの exe Genvid システム ゲーム機 or スマ ホ or PC ゲームの実行ファイ ル 動画 動画 ブラウザ データ通信

Genvid Event ● 動画視聴者がゲームへ送る方のデータ！ ○ ○ ウェブサイトからデータを送信 Genvidシステムがゲームインスタンスへ「 まとめたデータ 」を送信 ■ 視聴者がボタンを押した回数毎に処理が走ると、視聴者が増えた時に負荷が膨大に ■ 例えば、無数の視聴者がプレイヤーに対して「いいね」ボタンを押しているとき、 プレイヤーごとの「いいね」合計値に変換してからゲームにデータを渡す

Genvidサーバーの構成 ● Bastion (Genvidスタック) ○ ○ ● Genvidのシステムが動作するための基盤 複数のサーバーミドルウェアで構成されている Cluster (Genvidクラスタ) ○ ○ ○ Genvidサービス ■ Leaf: ウェブサイトがゲームにアクセスするための WebSocketサーバーを提供 ■ Disco: 上記のURLを提供するHTTP API ■ Genvid Eventの通信内容を定義した jsonスキーマ Genvid SDKが組み込まれたゲーム本体 exe ウェブサイトをホストするサーバー (node.js)

「動画からゲームに アイテムを出現させる」 システムを作ろう

「動画の上にボタンを出し、視聴者が参加できる」 ● 「DropBomb」ボタンを押すとゲーム内で爆弾が落ちる

下準備

ローカル環境のセットアップ（やっていない人は） ● Genvid操作用pythonスクリプトのgenvid-toolboxのインストール ○ ○ ○ ● 基盤システムbastionのインストール ○ ● シェルを開く Genvid SDKインストール位置のルートに移動 Pythonスクリプト「install-toolbox.py」があるのでこれを実行 ■ コマンド“py install-toolbox.py “ ■ Do you want me to prepend the tools location to your path [Y/n] ? yで止まる場合 ● 管理者権限でシェルを開くか、 powershellで実行してください コマンド“genvid-bastion install -lmu -b mybastion” ■ mybastion のところはなんでもいい ■ たまにエンターキー押さないと進まない時がある Genvid Clusterのセットアップ ○ コマンド“genvid-sdk setup”

スクリプトを保存するディレクトリを作る ● ● ● c:/GenvidSampleなど ここにSDKのサンプルからいくつかファイルをコピーする 中にpublic フォルダを作る

Genvidのweb用スクリプトをコピー ● ● Genvid SDKインストールフォルダ/api/web/dist/genvid.umd.jsをコピー publicフォルダの中に保存

スクリプトをcubeサンプルからコピー① ● Genvid SDKインストールフォルダ/samples/cube/webから ○ ○ ○ ○ ○ backendフォルダ configフォルダ templatesフォルダ package.json Web.py ○ 作ったディレクトリのルートにコピー

backend\app.jsを一部修正
faviconをロードする部分を消す（使わないので）

app.use(cors({ credentials: true, origin: true }));
// GENVID - Stop CORS
app.use(favicon(path.join(__dirname, '..', 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

web.pyを一部修正 class UnitySample(ConsulTemplateTool): NAME = "Unity sample" DESCRIPTION = "Unity sample script" CONFIG_FILES = [ dict(name="events", required=True), dict(name="stream", required=True), dict(name="web", required=True), dict(name="sample", required=True), この2行を足す dict(name="game", required=True), ] /configの中にある5つのコンフィグファイルをこのスクリプトでロードするため

config\stream.hclに書き加える テスト用の追加遅延の設定を 1秒にする settings { encode { stream{ extradelay = 1 } input { width = 1280 height = 720 } output { width = 1280 height = 720

スクリプトをcubeサンプルからコピー② ● ● Genvid SDKインストールフォルダ/samples/cube/unity/configから ○ ○ game.hcl sample.hcl ○ 先ほどコピーした configフォルダ内にコピー /samples/cube/unity/templates/localから ○ unity.nomad.tmplを先ほどコピーした templates\localフォルダ内にコピー

コピーしたunity.nomad.tmplを一部修正 Unityインスタンスの起動設定を記述するファイルなので、起動する exe名を変える config { command = "{{key `local/unity/appdir` | js}}\\Build\\unity_Cube.exe" args = [ "-force-d3d11", ここはunityからビルドした exeの名前を指定する箇所なので、任意の名前に置き換える UnityHubで新規プロジェクトを作る際の unityプロジェクト名と同じだと良い 以下の例では「 app」

ポート固定 PCのシステム環境変数「GENVID_STATIC_BINDING」を設定 「システム環境」から ・システム環境変数への追加ができない場合 管理者権限で起動してください

ブラウザ側実装

publicフォルダ内に新規ファイルを作成 ● index.html ○ ○ ● style.css ○ ● webページを構成 ボタンとラベルを定義 ボタンの形状やフォントを定義 overlay.js ○ ○ GenvidClient.jsのロードと起動 ボタンが押されたら Genvid Eventを発行する

index.html <!doctype html> <html> <head> <title>Genvid Overlay </title> <link rel="stylesheet" href="style.css" > </head> <body> <div id="video_player" ></div> <div class="button" id="dropBomb">DropBomb</div> <script src="genvid.umd.js" ></script> <script src="overlay.js" ></script> </body> </html>

style.css body { background-color : black; } .button { cursor: pointer; position: absolute; top: 2vw; padding: 1.5vw; opacity: 0.7; border-radius : 8px; background-color :greenyellow ; } .button:active { opacity: 1; }

index.htmlをブラウザで開いてみる

overlay.js
var genvidClient;
fetch("/api/public/channels/join", { method: "post" })
.then(function (data) { return data.json() })
.then(function (response) {
genvidClient = genvid.createGenvidClient(response.info, response.uri, response.token,
"video_player");
genvidClient.start();
})
.catch(function (e) { console.log(e) })
dropBomb.onclick = function () {
genvidClient.sendEvent([{
"key": ["dropBomb"],
"value": "1"
}])
}

Web側のビルド（nodeモジュールの取得） ● シェルを立ち上げてコマンド実行 ○ ○ ○ 作ったディレクトリのルート（ package.jsonがあるディレクトリ）に移動 コマンド”npm install” node_modulesフォルダが作られ、 package.jsonに従ってモジュールがロードされる

Unity Editor側

最初に作ったディレクトリにプロジェクト作成 ● プロジェクト名はapp

床と爆弾を作る ● Cubeを出す ○ ● カメラ位置を調整 ○ ● サイズ10x10に ridgidbodyをつける 黒のmaterialを作る ○ ○ ● 上から見下ろす形 Sphereを出す ○ ○ ● XZを引き延ばして床に 新規に作って色変え Sphereにアタッチ Sphereをprefabにする

スクリプト：プレハブを生成する
using UnityEngine;
using Random = UnityEngine.Random;
public class SpawnBomb : MonoBehaviour
{
public GameObject bombPrefab;
public void Spawn()
{
var bombObjectTransform = Instantiate(bombPrefab).transform;
var position = this.transform.position;
position += new Vector3(Random.Range(-10,10), 0, Random.Range(-10, 10));
bombObjectTransform.position = position;
}
}

作ったスクリプトをシーンに配置 ● SpawnBombなどの空GameObjectを作る ○ ○ ○ スクリプトをアタッチ Prefabをインスペクターでアタッチ 位置を床の上空に調整

関数を呼んで〇が生成されるかチェック Start()でSpawn()を呼んでみてテスト

genvid_sdk.unitypackageをインポート Genvidインストールフォルダの \engine-integration\unity genvid_sdk.unitypackage

Genvidのインスタンスを配置

Sessionの配置とアタッチ

Genvid Eventとの紐づけ dropBombという名前のイベントが来たらspawn()を呼ぶ

Unityインスタンスビルド ● PlayerSettingでProduct Nameを任意に変更 ○ ● 最初にunity.nomad.tmplで設定した名前に合わせる Buildメニューからビルド設定 ○ ○ Add Open Scenesを忘れずに app/Buildディレクトリを作ってその中にビルド

Genvidサーバー側

JSONスキーマによるEvent定義 ● Genvid Eventの設定を行うJSONスキーマの意味 動画視聴者からどのような通信を受け付けるか定義する 受け取ったイベントをどのようなルールで「まとめる」かを定義する ○ ○ ● 手順 ○ ○ 作ったディレクトリの \config\events.jsonを開く "game": { 以降を次のスライドの記述に置き換える

"game": {
"maps": [
{
"id": "dropBomb",
"source": "userinput",
"where": {"key": ["dropBomb"], "name": "<name>", "type": "string"},
"key": ["dropBomb", "<name>"], "value": 1
}
],
"reductions": [
{
"id": "dropBomb",
"where": {"key": ["dropBomb", "<name>"]},
"key": ["<name>"],
"value": ["$sum"],
"period": 250
}
]
}

デモの起動

シェルでgenvid-bastion起動＆準備 ● コマンド“genvid-bastion start” ○ ● “genvid-sdk clean-config” ○ ● Genvidサーバーにデフォルトの設定をロード “py web.py load” ○ ● Genvidサーバーの設定をクリア ”genvid-sdk load-config-sdk” ○ ● Genvid基幹サービスの起動 今まで設定した events.json等の設定ファイルを Genvidサーバーにロード “genvid-sdk monitor” ○ ブラウザでGenvidサーバー管理画面を開く

ブラウザのGenvid設定画面(Cluster-UI)の操作 ● ● 「Jobs」タブで「Start All」ボタンを押す 3つとも起動したら「Cube Sample」をクリックする ○ ローカルサーバー上に立ててあるウェブページを開く

今後どう作っていくか

拡張してみる たとえば... ● Genvid Event ○ ○ ○ ボタンクリックでプレイヤーの強化 クリックされた数を集計する 複数のボタン配置

次のステップ：YouTube配信テスト ● YouTube経由で動画を配信するテスト ○ ○ ● ゲームとGenvid Serviceをローカルで実行するので完全ではない ウェブサイトのホスティングはローカル PC内なので外部からは通常の動画しか見えない YouTubeの配信テスト手順 ○ ○ ○ ○ YouTubeのアカウント作成 配信者ID、番組IDの取得 Bastion設定画面で動画を StandaloneからYouTubeに設定変更 各種IDを入力する

次のステップ2 Twitchテスト：Developer Rig TwitchはExtensionsの配信を審査・認可制にしている。 そのため、ExtensionsをローカルでエミュレートできるDeveloper Rigというツールがあ る。 動画を実際のTwitchに配信しつつ、Developer RigでExtensionsの動作を確かめな がら開発できる。

次のステップ3： サーバーデプロイ AWSまたはAzureでGenvid一式を動かす ゲームの オンラインマルチ用 サーバー Genvid用 Windows クラウドサーバー Genvid SDK入りの ゲームの exe ゲーム機 or スマ ホ or PC Twitch Twitchにアップロー ドされた オーバーレイ要素 動画 Genvid システム 視聴者のPC/スマホ ブラウザ データ通信 ゲームの実行ファイ ル 動画 ブロード キャスト 視聴者のPC/スマホ 視聴者のPC/スマホ ブラウザ ブラウザ 視聴者のPC/スマホ ブラウザ 視聴者のPC/スマホ ブラウザ

おわりに

おしらせ Genvid開発者コミュニティをDiscordサーバーで開設 ● Genvidに限らず、インタラクティブ・ストリーミングの動向全般について情報を集 めています ○ チャット欄に貼ります ● 開発会社さまむけの説明会も随時行っております ご相談ください ● アンケートにご回答下さい

Thank you! genvidtech.com @genvidtech

カウントダウン追加
let delayToColorSwitchS = 0;
～中略～
dropBomb.onclick = function () {
～中略～
delayToColorSwitchS = genvidClient.streamLatencyMS / 1000;
}
setInterval(function () {
if (delayToColorSwitchS > 0)
{
dropBomb.textContent = Math.ceil(delayToColorSwitchS);
delayToColorSwitchS -= 0.01;
} else {
dropBomb.textContent = "DropBomb";
}
}
, 10);

サーバー処理部分の特徴 ● Genvidシステムがwebからのデータを集計してゲームに渡す ○ ○ ○ ● 視聴者（のwebブラウザー）から来たデータを集計 まとまったデータとして定期的にゲームに渡す 大量のデータ通信がゲームに殺到しない設計 ■ 動画視聴者１０万人です！というときに毎フレーム 10万個のデータが来るとヤバい ■ ただし、「まとめられるデータ」に限る タイムスタンプ、遅延の時間が取得できる ○ 動画ストリームとデータ送受信タイミングの同期がとれる ■ どのくらい遅れるかタイムスタンプがとれ、 UIの動きと連動できる ■ ボタンを押したあとカウントが始まって、ゼロになったらアイテム出現！などができる ■ チームの勝敗を示すオーバーレイを動画ストリームと同期して出す

Unityサンプル実行のコマンド 何らかのシェルでコマンドを打つ： ● cd /c/ [genvid sdk install directory] / samples / unity ○ ● py uniy.py load ○ ● SDKのデフォルト設定を読み込む genvid-bastion start ○ ● サンプルのビルド genvid-bastion load-config-sdk ○ ● bastionに各種設定をロードする py unity.py build ○ ● サンプルのunity.pyファイルがあるディレクトリまで移動 Genvidのサービスを開始 genvid-bastion monitor ○ ブラウザの設定画面を開く

インタラクティブ性 ● ゲーム側と調和したオーバーレイ ○ ● ズレない 動画視聴者がゲームの世界に入り込む ○ ○ インタラクションがある

フルスタックデベロッパー：森永友果 ● Genvid東京オフィス勤務 (2021/08~) ○ 前職ではSlerにて、バックエンド・フロントエンド開発 およびインフラ構築に関わっていました。 ○ Genvidをご利用の開発者様のサポートをさせてい ただきます。 ○ Genvid SDKやオーバレイ開発などについてご質問 がありましたら、お気軽にご連絡ください！ ■ [email protected]