[BEAM] インタラクティブ キーボードの出し方

動画配信サービス「BEAM」には、視聴者が配信に参加できる機能があります。配信者側が設定すれば、アイディア次第でいろんなことが出来る機能となっています。
例を挙げると

  • SEを鳴らすボタンを付けて視聴者が拍手したりブーイング出来たりする
  • 配信者側のゲームを操作するボタンを付けて視聴者がゲーム参加
  • 配信者の部屋の照明を操作するボタンを付けて部屋を暗くしたり照明の色変えたり

などなど。。
配信者側のPCを操作できる、という何だかちょっとすごい機能が実現できるので、ゲームが起動していればゲームを操作できますし、ルームコントロールを起動しておけば照明を操作することもできる、という感じです。
この記事では例の2番目にある「配信者側のゲームを操作するボタンを付けて視聴者がゲーム参加」をやってみたいと思います。
こんなことが出来ちゃいます。配信者は何も操作してなくて、視聴者がゲームを操作しています。録画失敗して無音ですが。。

各種ご注意や前提条件

  • 2017年4月現在の方法です。インストールするコンポーネントはその時点のバージョンで確認しています。
  • 簡単に誰でもできちゃう!みたいなものではないので、ある程度知識のある人のみ自己責任でお試しください。
  • 映像配信は Windows 10 Creators Update の配信機能、またはOBS-FTLで行うことになりますが、この記事では映像配信方法は説明していません。Windows 10の機能で配信する方法はこちらで説明しています。
  • BeamにMicrosoftアカウントでサインインして自分のチャンネルを用意しておきましょう

各手順へのリンク

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

全てプログラム本体への直リンクです。

  1. Microsoft Visual C++ 2015
    https://www.microsoft.com/en-us/download/confirmation.aspx?id=48145
  2. Git for Windows
    https://github.com/git-for-windows/git/releases/
    ※動作確認をしたのはバージョン2.9.3です。最新バージョンでも問題ないと思いますが未確認です。
    https://github.com/git-for-windows/git/releases/download/v2.9.3.windows.1/Git-2.9.3-64-bit.exe
  3. Node.js
    https://nodejs.org/dist/v4.5.0/node-v4.5.0-x64.msi
  4. OBS Studio with FTL
    配信ソフト。OBSのFTLバージョンです。このFTLバージョンを使うことで遅延のない配信が可能になります。
    https://github.com/WatchBeam/obs-studio-ftl/releases/download/ftl.24/obs-studio-17.0.0-ftl.24.msi
    ※Windows 10 Creators Updateを入れている人は配信機能が標準搭載されているので不要です。この記事ではOBSを使った配信の説明は割愛してます。

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

JavaScriptの環境を準備します。

  1. コマンドプロンプト起動
  2. 下記の順でコマンド入力し実行(各コマンド入力してEnter)撃ち間違えないようにコピペ推奨。
    以下ではCドライブのルートに “beam” というフォルダを作成し、そこにGitリポジトリをコピーして必要なファイルを展開します
  • cd\
  • mkdir 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. Beam サイトのDeveloper Labでの作業

ここからはブラウザでBeamのサイトを開いて、サイト上で設定をしていきます。

  • Beam のWebページからDeveloper Lab(DEVLAB)を開く
    ・サイト右上の自分のアイコンをクリック、表示されたメニューの最下部「STUDIO」をクリック
    BEAM配信
  • 以前のDeveloper Lab(DEVLAB)を開く
    ・知らぬ間に「STUDIO」という新しいツールになっていましたが、まだ使い方分かっていないので旧LABで設定していきます。
    ・ページ右上の「BACK TO LEGACY LAB」をクリック
    BEAM配信
  • CREATE A GAMEをクリック
    BEAM配信
  • My Gamesの右にある+をクリック
    ・適当な名前を付けて「CREATE GAME」をクリック
    ・「CONTROL EDITOR」をクリック
    BEAM配信
  • 画面上部のShare Versionボタンをクリック
    ・Anyone with version ID and right code can play your game. を選択
    ・Version’s IDとSHARE CODEを控えておく。手順4でsnes.jsonにこれらを記述する
    BEAM配信
  • 右側のCONTROLSセクションでNEWをクリックし操作ボタンを設定
    ・HoldingとFrequencyは両方チェック
    ・割り当てるキーとボタン上に表示するテキストを入力
    ・あとは適当に
    BEAM配信
  • ボタンをレイアウトする
    ・設定したボタンを左側のパレットのようなところにドラッグ
    ・適当に配置
    ・スクリーンサイズによって3種類レイアウト
    ・完成したらSAVEをクリック
    BEAM配信

4. json ファイルの準備

設定ファイル auth.json と snes.json を準備します。
2つのファイルともに \interactive-keyboard\config フォルダに置いてください。

  1. auth.jsonを準備
    これはログイン情報を記述するファイルです。アカウント、パスワードともに前後に ” つけてください。
    このテキストをauth.jsonというファイル名で保存。

    {
    “username”: “ログインアカウント“,
    “password”: “ログインパスワード
    }
  2. snes.jsonを準備
    Share Codeの前後には ” が必要。Version’s IDには不要です。このテキストをsnes.jsonというファイル名で保存。

    {
    “version”: 手順3でメモったVersion’s ID,
    “code”: “手順3でメモったShare Code”,
    “threshold”:0.1,
    “handler”: “robot-js”,
    “remap”:false,
    “remapTable”: {
    }

    }

5. 動作テスト

インタラクティブ キーボードの動作確認をしてみましょう。
コマンドプロンプトで\interactive-keyboardフォルダに移動し、下記コマンドを実行してください。
node index.js ./config/snes.json
毎回コマンドプロント開いてコマンド入力は面倒なので下記の内容でバッチファイルを作っておくのがよいでしょう。

cd c:\beam\interactive-keyboard
node index.js ./config/snes.json

成功した場合は、「Connected to Interactive」と表示されます。
そこまで確認したらブラウザで自分のBeamチャンネルを見てみましょう。ボタンが表示されていれば成功です。閉じるとボタンの表示が消えます。
映像の配信は、ボタンの表示とは別々に行う必要があるので映像部分はオフラインとなっていると思います。

6. いろいろメモ

  • 配信側PCの最前面に表示されているアプリにボタン操作が渡されます。例えば最前面にメモ帳が起動している場合、視聴者側でWボタンが押されたらメモ帳にWと文字が出ます。
  • 上記の仕様のため、1台のPCでは動作確認ができません。ボタン押す=ブラウザが最前面になっちゃうので。
  • ボタン配信していないと視聴画面で「Waiting for the streamer to go interactive!」と表示され続けてしまいますので、ページの下のほうにある「EXIT INTERACTIVE」をクリックしましょう。

7. 関連記事

スポンサーリンク

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です