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

5.4K Views

March 18, 22

スライド概要

Genvid SDK 1.33.1用です

profile-image

indie game developer. ゲーム作家、「Back in 1995」「デモリッション ロボッツ K.K.」 株式会社ヘッドハイ代表、IndieGamesJp.dev 運営、iGi indie Game incubator アドバイザー、asobuコアメンバー。

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

大規模インタラクティブ・ ライブ・イベント (MILE)

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

下準備

29.

ローカル環境のセットアップ(やっていない人は) ● 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”

30.

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

31.

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

32.

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

33.
[beta]
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 }));

34.

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つのコンフィグファイルをこのスクリプトでロードするため

35.

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

36.

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

37.

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

38.

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

39.

ブラウザ側実装

40.

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

41.

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>

42.

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; }

43.

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

44.
[beta]
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"
}])
}

45.

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

46.

Unity Editor側

47.

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

48.

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

49.
[beta]
スクリプト:プレハブを生成する
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;
}
}

50.

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

51.

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

52.

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

53.

Genvidのインスタンスを配置

54.

Sessionの配置とアタッチ

55.

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

56.

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

57.

Genvidサーバー側

58.

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

59.
[beta]
"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
}
]
}

60.

デモの起動

61.

シェルで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サーバー管理画面を開く

62.

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

63.

今後どう作っていくか

64.

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

65.

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

66.

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

67.

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

68.

おわりに

69.

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

70.

Thank you! genvidtech.com @genvidtech

71.
[beta]
カウントダウン追加
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);

72.

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

73.

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 ○ ブラウザの設定画面を開く

74.

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

75.

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