V+FX

配信で動画エフェクトをポン出しできる
OBS素材「V+FX（ぶいたす）」できました

V+FX Controller V+FX Scene

使ってみるOBSへの導入手順

すべての動画エフェクトの縦型版を追加しました。
  • これまでリリースしたすべての動画エフェクトの縦型版を追加しました。ダウンロードはこちら
    ファイル名に「Portrait」と記載のあるものが縦型用です。動画エフェクトの差し替え方は、下記エクストラの「❷ 動画素材を差し替える」の項目をご確認ください。
夏のホラー向け素材を一つ追加しました。
  • 新しく動画エフェクト「おわかりいただけただろうか（声：今永さらら）」を追加しました。ダウンロードはこちら
    動画エフェクトの差し替え方は、下記エクストラの「❷ 動画素材を差し替える」の項目をご確認ください。

① 本体ファイルのダウンロードと事前準備

  1. 本ツールを使用するにはOBSのバージョンは28以上が必要で、推奨は30以上です。
  2. 下記ボタンから本体をダウンロード・展開して、出てきたV+FXフォルダをPC内の管理しやすい場所に設置します。
    本体ダウンロード39.3MB
  3. V+FXフォルダの中にある「config.js」をメモ帳などのテキストエディターで開きます。Windowsの場合は右クリック→メモ帳。Macの場合は右クリック→このアプリケーションで開く→テキストエディット。などです。
    ファイルの「.js」という拡張子は変更しないでください。
  4. config.js内に記載の手順に沿って事前準備を完了してください。

② 配信画面側の設置

  1. OBSの任意のシーンのソース欄で「＋」ボタンを押してブラウザを選択します。
  2. 新規作成にチェックが入った状態で「V+FX」と名前を入力してOKを押します。このあとスマホからリモート操作したい場合は必ずこの名前にしてください。
  3. 「ローカルファイル」にチェックを入れて「参照」を押し、V+FX本体フォルダの中にある「receiver.html」を選択します。
  4. 「OBSで音声を制御する」をONにして、幅と高さを配信画面サイズと同じ数値にします。画面サイズが分からない場合はOBSの「設定」→「映像」の「基本(キャンバス)解像度」で確認できます。
  5. ソース欄にできた「V+FX」を右クリックして「ブレンド方法」を「SRGBオフ」にすると動画エフェクトの半透明部分が綺麗な発色になります。
  6. OBSの音声ミキサー欄の歯車ボタンを押して「V+FX」の音声モニタリングを「モニターと出力」に設定することで効果音が自分でも聞こえるようになります。
    これで配信画面側は設置完了です。

③ 操作パネルの設置

  1. OBSの上部メニューから「ドック」→「カスタムブラウザドック」を開きます。
  2. ドック名の欄に「V+FX Controller」と入力して、その隣の「URL」欄には以下の方法で取得したURLを貼り付けます。
    URL取得方法
    V+FX本体フォルダの中の「controller.html」をWindowsの場合はEdgeやChromeに、Macの場合はSafariやChromeのウインドウにドラッグ＆ドロップして、ウインドウ上部URL欄に表示されたURLをコピーして前述のURL欄にペーストします。
    このURLは「file://」から始まるはずです。
  3. 新しくV+FXの操作パネルの小窓が表示されるので、画面の右上などOBSの好きな位置にドラッグしてドッキングしておくと便利です。幅を下図くらいに調節して操作パネルは設置完了です。

④ 動作チェック

これで設置作業は終わりです。操作パネルから６つの動画ボタンをクリックして配信画面側で動画エフェクトが再生されるかテストしてみてください。
うまく動作したら、次のエクストラ・スマホでのリモート操作も便利なのでよかければぜひお試しください。
最終的に、この後のスマホからのリモート操作（任意）も含む導入作業が全て完了したあと、①の事前準備で認証をOFFにしてセキュリティを弱めた部分が気になれば config.js の後半に記載の部分を対応します。

エクストラスマホでのリモート操作と動画素材の差し替え

❶ スマホでリモート操作

iOS、AndroidのスマホからV+FXを遠隔操作できるアプリもご用意しました。少し事前準備が必要ですが、かなり使いやすくなるのでぜひお試しください。

iOS/Androidアプリ
インストール：iOS
  1. iOS端末のSafariから下記リンクにアクセスして画面の指示に従ってください。 iOS端末のカメラからQRコードを読み取りリンクにアクセスして画面の指示に従ってください。 V+FX Controller iOS版
インストール：Android
  1. 事前準備としてAndroidの設定アプリを開きます。
  2. 画面先頭にある設定の検索機能で「不明」と入力して「不明なアプリのインストール」を見つけ進みます。
  3. 進んでいくと「Files by Google」という項目があるのでタップして「この提供元のアプリを許可」をONにします。
  4. 事前準備ができたらChromeアプリで下記ボタンからアプリインストーラーをダウンロード、完了したらファイルを開きインストールします。 事前準備ができたらカメラやGoogleレンズからQRコードを読み取りリンクからアプリインストーラーをダウンロード、完了したらファイルを開きインストールします。 V+FX Controller Android版
使用方法
⚠️リモート操作ができる条件⚠️
  • OBSと同じWifiにスマホが接続されていること（有線接続のPCと同じ回線のWifiのスマホなどでもOK）
  • OBSが起動していてOBSでV+FXが動作する状態であること
  • アプリ連携時にOBSの現在シーンにV+FXがありソース名が「V+FX」であること（半角の英字と+）、またV+FXソースがグループに入っていないこと
  1. 上記の条件を満たした状態で、OBSの上部メニューの「ツール」→「WebSocket サーバー設定」を開き「接続情報を表示」を押します。
  2. スマホからアプリを開き表示される以下の入力欄にそれぞれOBSの接続情報画面の情報を入力して「CONNECT」を押してください。
    重要なポイント
    上記接続情報画面で「サーバーIP(推測)」の内容が「:」で区切られたものだった場合はそのIPは使用できません。この場合に使用できるサーバーIPを調べるため、OBSの「設定」→「詳細設定」を開きます。
    画面内のネットワーク枠の「IPにバインド」セレクトボックス内にある「.」で区切られたIPアドレスをスマホ側に入力することで接続ができます。ここではIPアドレスの確認だけで「IPにバインド」のセレクトボックス自体は「規定」のままにしておいてください。
  3. 接続成功するとOBSの操作パネル同様の画面がスマホ側にも表示されるので、動作確認してみてください。もしWindowsをお使でスマホからうまく接続できない場合は「Windowsのセキュリティに関する設定」も試してみてください。
    接続成功すると入力情報は保存されます。

❷ 動画素材を差し替える

本ツールで取り扱う動画の形式（拡張子）として「webm」を使っています。他に使用可能な動画形式として「mp4」がありますが、不要な部分を透明にできない点と、また本ツールで使うにはソースコードの編集が必要になるため今回は割愛します（ご要望があれば追加します）。

  1. webm形式の動画素材と、jpg形式の操作パネル用サムネイル画像を用意します。webmはAviUtlやFilmora、Adobe製品などいろんなツールからでも書き出す方法がありますのでチャレンジしてみてください。jpg形式の操作パネル用サムネイル画像はサイズなどは特に指定はありません。強いて言えばあまり巨大きすぎる画像だとPCのメモリを消費するだけで無駄なので、1000px以下などある程度のサイズでOKです。
  2. 最初に設置したV+FX本体フォルダの中にある「slot」フォルダを見つけます。中には1〜6までの動画（webm）と操作パネル用サムネイル画像（jpg）が入っています。
  3. slotフォルダの中にある動画とサムネイル画像はそのまま操作パネルのスロットと紐づいているので、同じファイル名にして動画とサムネイル画像を差し替えます。
  4. ファイル差し替え後にはOBSを再起動して変更を確認してください。

注意事項など

  • この素材で発生したトラブルについては一切責任を負いかねます
  • 商用利用なども構いませんので常識の範囲でご自由に
エラーや設定で困ったらこちら｜トラブルシューティング

Special Thanks先行テスターの皆様（しゅき）