Beam でのインタラクティブ キーボード配信設定

Beam のインタラクティブ キーボード とは

Beam の特徴的な機能であるインタラクティブ キーボード(Interactive Keyboard)は、配信画面の下部にソフトウェアキーボードを表示させ、それをリスナーがクリックすると、配信中のゲームが操作できる機能です。例えば WASD を設定したボタンを配置すると、視聴者が配信中のゲームの移動を操作することができたりします。

以前紹介した「Soundwave Interactive(Beam の配信画面に音を鳴らすボタンを追加する)」と違いパッケージ化されていないので現状導入の多少ハードルが若干高めです。コマンドプロンプトに触れたことのある方でしたら抵抗なく導入できると思います。

参考チャンネル:視聴者が操作できる放送を24時間やっているチャンネル Youplay(キーボード操作ではない場合もあります)

インタラクティブ キーボードの設定方法

0.事前準備

事前に OBS-FTL での配信環境を作っておいて下さい。→ OBS-FTL での配信設定の解説 前提環境 Windows 10 64bit
※管理者権限のあるアカウントで行うとスムーズです

1.必要なコンポーネントのインストール

基本的に設定はデフォルトのままで問題ありません。

Visual C++ Redistributable for Visual Studio 2015
Visual C++ Redistributable for Visual Studio 2015 をダウンロードする
Visual C++ 再頒布可能パッケージは、Visual C++ ライブラリのランタイム コンポーネントをインストールします。
詳細
Git
3.Git をダウンロードする
Git は、 小規模から大規模なプロジェクトまであらゆる処理を高速かつ効率的に処理できるように設計された、フリーでオープンソースの分散バージョン管理システムです。
詳細
Node.js
Node.js をダウンロードする
Node.js は、Chrome の V8 JavaScript エンジンで構築された JavaScript ランタイムです。
詳細

2.Node.js のコマンドラインでの作業

コマンドプロンプト起動(Node.js command prompt)
下記コマンド入力し実行
各コマンド入力して 1 行ごとに Enter

	cd
	mkdir beam
	cd beam
	git clone https://github.com/ProbablePrime/interactive-keyboard.git
	cd interactive-keyboard
	npm install
	npm install robot-js
	npm install robotjs
	npm install kbm-robot

※ コマンドプロンプト画面はそのまま開いておく

3.json ファイルの準備

auth.json と snes.json をダウンロードする
ダウンロードする
auth.json と snes.json を指定の場所にコピー
..\interactive-keyboard\config に 2 つのファイルをコピー
[キャプチャ貼付け]
ユーザー名とパスワードを auth.json に記述
メモ帳で auth.json を開いて、Beam のユーザー名(Username)とパスワード(Password)を記述し、保存して閉じる
Developer Lab に行く
developer labに行く
[CREATE A GAME]をクリック
適当な名前を付けて[CREATE GAME]をクリック
[CONTROL EDITOR]をクリック
[Share Version]をクリック、[version’s ID]をコピーして snes.json に記述

SHARE CODE をコピーして snes.json に記述
[Anyone with version ID and the right code can play your game.]にチェックを入れ、SHARE CODE を表示、コピーし snes.json に記述。保存して閉じる

4.ボタンの設定、レイアウト

右側の CONTROLS セクションで操作ボタンを設定する

Control(コントロール)

  • Buttons(ボタン)
    視聴者に[キーボード]の操作を提供する際のに選択。横の[NEW]をクリックして新しいボタンの設定を作成する。他に[ジョイスティック]と[マウス]でのコントロールも設定することができる。

Analysis(アナライズ)

  • Holding
    チェックを入れる。クリックしたユーザーの数
  • Frequency
    チェックを入れる

Data(データ)

  • KEYBOARD TRIGGER(キーボード トリガー)
    割り当てたいキーを設定する
  • BUTTON TEXT(ボタンテ キスト)
    ボタンに表示されるテキスト
  • HELP TEXT(ヘルプ テキスト)
    マウスオーバーした時に表示されるヘルプ テキスト
  • SPARK COST(スパークコスト)
    視聴者がボタンを1回押す毎に消費するスパークの数。0~
  • COOLDOWN(クールダウン)
    1 回ボタンが押された後、再度押せるようになるまでの時間。ミリ秒で記述ミリ秒で記述
設定したボタンをドラッグして左のグリッドに配置する
完成したらSAVEをクリック

5.OBS-FTL の設定

OBS-FTL(OBS Studio with FTL)で配信の設定をする
OBS-FTL の設定方法の詳細はこちら

6.配信テスト

Node.js command prompt に戻って作業
\beam\interactive-keyboard にいることを確認
node index.js ./config/snes.json と入力して実行

上手くいった場合「Connected to Interactive」と表示される

配信開始

配信画面の下にボタンが配置されていることが確認できる。

7.配信を停止する

コマンドプロンプトを落とし、自分の配信チャンネルのページの左下にある[EXIT INTERACTIVE]をクリック

8.配信を再開する

コマンドプロンプト起動し、[6.配信テスト]からの手順を繰り返す

9.参考

偉大なる先駆者の解説ページ。ありがとうございます!※現状と少し違いあり

http://www.sorryaboutyourcats.wtf/blog/beam-interactive-streaming-how-to-set-it-up/