OBSでツイキャス配信 7(色々編:クロマキー合成)

配信画面で、WIBカメラの映像で自身を撮影して、グリーンバックで
背景は静止画像などの方法で解説します。

1)準備
2)背景を静止画で
3)背景をオンライン画像で
4)背景を動画で

このままではクロマキー合成が出来ないので、グリーンバックを
作ります。


1)準備
普通はクロマキー用の背景紙やカーテン、布など緑になるもの。
(緑でなくても青色や他の色でも可能だが緑が一番適してるようです)
今回は緑色の画用紙を切ったら小さくなりすぎたので
青い画用紙(ブルーバック)を使います(ブログでの説明用ですw)

OBSでみた(WEBカメラの映像)はこちらです。

ソース枠にある映像デバイスキャプチャの上で右クリックして、
フィルターを選択します。

エフェクトフィルターの枠の下にある+(追加)をクリック→
クロマキーを選択。

クロマキーの名前を決めてOKをクリック。

クロマキーが効いて無いのでブルー画面です(笑)
緑(グリーンバック)なら背景がグレーになっています。
※グリーンバックだったらいらない工程です。
色キーの種類を青にしました。
(これで背景がグレーになりました)
被写体を起きます(実際には配信者さんだと思います)
置いたばかりの状態です。
これから調整していきます。
(背景色と被写体が近いので、背景色が反射して被写体が少し青くなって
ますが実際には一定距離を開けたほうがいいと思います)
最初は類似性のバーをスライドして、被写体の輪郭に背景色が
見えないくらいにします。行き過ぎると、消えちゃいますので
ちょうどいいところで妥協します(笑)
調整ができたら閉じるをクリック。
他を色々いらったりして、どうにも変になったら、下にある規定値
をクリックしてリセットしてやり直すといいかも?。
どうしてもうまくいかないときはバックスクリーンに似た色に色キーの
種類からカスタムを選択して微妙な色を選んだらいいかも?。
※背景のバックスクリーンは色むらがあるときれいに抜けにくいので
照明ムラや、布などはしわや折り目があるならアイロンで平らに。
背景が黒くなっていますが、黒い部分は透過になります。

2)背景を静止画で
背景画像を用意します。
画像ソースを追加します。
+(追加)をクリックして、画像を選択します。ソースに名前をつけてOKをクリック。参照をクリック。
画像ファイルを選びます。選びました。
OKをクリック。
画像解像度が大きすぎたので、囲いの辺や囲いの中をドラッグして
大きさ調整。
トリミング的な部分利用は。ALTキーを押したまま、囲いの
辺を動かすとできます。背景のポジションが決まりました。
※背景の調整などは、WEBカメラ等の主体を表示させたほうが良いかも?
いま、ソースのレイヤー(上下順)が背景画像が上の段にあり、
WEBカメラ(映像キャプチャデバイスソース)がその下の段にあるので
カメラ映像は背景画像に隠れています。上下ボタンで入れ替る。
映像合成成功しました。

テスト配信(ツイキャスの録画をスクリーンキャプチャ映像)

3)背景をオンライン画像で
ネット上の画像でも可能でも、背景に出来ます。
(フリー提供のもの)
ブラウザソースを追加します。
+(追加)をクリックして、ブラウザを選択します。
ソースに名前を付けてOKをクリック。開いたときは、OBSの公式サイトになっていますので、URLを
変更する必要があります。
ネット上のフリー画像
ブラウザによるかもしれませんが、画像のURLをコピーします。
(Firefoxの場合は画像上で右クリックして、画像のリンクをコピー)

ブラウザソース画面にあるOBSの公式URLを削除して、画像のURLを
貼り付けて、OKをクリック。
画像を移動したり拡大縮小をして位置を調整します。
(拡大縮小は囲いの辺をドラッグ、移動は囲いの中でドラッグします。)
ALTキーを押しながら、囲いの辺をドラッグすると、
縦横の長さを変更して範囲を変更できます。
※中身が横や縦に変形するわけではないです。位置調整が出来ました。
※背景の調整などは、WEBカメラ等の主体を表示させたほうが良いかも?
いま、ソースのレイヤー(上下順)が背景画像が上の段にあり、
WEBカメラ(映像キャプチャデバイスソース)がその下の段にあるので
カメラ映像は背景画像に隠れています。上下ボタンで入れ替る。
映像合成成功しました。


4)背景を動画で
背景用動画を用意します。
メディアソースを追加します。
+(追加)をクリックして、メディアソースを選択します。
ソースに名前をつけてOKをクリック。参照をクリック。
動画ファイルを選択します選びました。
OKをクリック。画像を移動したり拡大縮小をして位置を調整します。
(拡大縮小は囲いの辺をドラッグ、移動は囲いの中でドラッグします。)
ALTキーを押しながら、囲いの辺をドラッグすると、
縦横の長さを変更して範囲を変更できます。
※中身が横や縦に変形するわけではないです。
位置調整が出来ました。
※背景の調整などは、WEBカメラ等の主体を表示させたほうが良いかも?
いま、ソースのレイヤー(上下順)が背景動画が上の段にあり、
WEBカメラ(映像キャプチャデバイスソース)がその下の段にあるので
カメラ映像は背景動画に隠れています。上下ボタンで入れ替る。
映像合成成功しました。

テスト再生(OBSでの再生をスクリーンキャプチャ映像)

次は、OBSでツイキャス配信 8(配信編)

OBSでツイキャス配信 6(色々編:超高画質配信)

ツイキャスの映像配信には、普通画質と超高画質があります。
これまでの説明は、普通画質でした。
OBSはプロファイルを複数作成(ツイキャスだけでなく、
YOUTUBEや他、ニコ生も(今は不明))できるので、
これまでに作ったプロファイルはそのまま、置いといて、
超高画質のプロファイルを作成するという形で綴っていきます。
普通画質で高いビットレートでOBSが設定されてて配信をすると
以下のようなエラーが出て配信が止まります(経験者)。

超高画質にする方法
ツイキャスのサイトに行ってログインします。
ログイン後→配信する→ツール・ゲームズ配信を選択。
ツールとの連帯設定をクリック。ツールとの連帯設定画面を少し下にスクロールすると画質の項目が
あるので、最高画質を選択します。
表示されたサーバー(RTMP URL)とストリームキーを
コピー&ペースト(コピペ)で利用します。
このまま画面を置いておくか、メモ帳などのソフトを起動して
コピペしておいてください。

ちなみに、普通画質と超高画質では、ストリームキーは同じですが
サーバー(RTMP URL)は異なります。

OBSを起動して、メニュー→プロファイル→新規を選択。
プロファイルの名前を付けてOKをクリック。
(私は、ツイキャス超高画質にしました)
作ったプロファイル名が選択されてる状態で右下にある
設定をクリック。
一般タブで開くので、
配信タブを選択します。
サービスの欄の右端の方向記号をクリックして、カスタムを選択します。サーバーの欄に、サーバー(RTMP URL)をコピーして貼り付けます。
ストリームキーの欄に、ストリームキーをコピーして貼り付けます。
適用をクリック。
出力タブを選択します。
出力/配信
映像ビットレート:(私はそのままで2500kbps)
私考:動きの激しいゲーム配信だと、上げたほうがいいかも、
ビットレート追いつかずにブロックノイズとかなりそうだけど、
ビットレートが多ければ(実質少なければ関係ない?)通信量問題
増えるし、貧弱スペックなPCならゲームもやばいかも?
音声ビットレート:32~320まで可能(私はそのままで160)
私考:音楽配信だと、上げるのもいいかもしれないね?
出力/録画
録画のファイル先のパス:初期設定は、C:\Users\PCユーザー名\Videos
です。
、略
映像タブ
初期設定(配信タブをカスタムした時)では、出力解像度は
1280x720です。
ここを、最大解像度の1920x1080(フルHD;フルハイビジョンサイズ)を
選択します。
FPSは30でいいと思います(激しいゲーム配信なら上げてもいいかな?)
適用をクリック。
OKをクリック。
実際の配信画面(録画映像です)。
確認に使ったディスプレイは1920x1080(フルハイビジョンサイズ)。
※:WEBカメラにそれほどの解像度がないので、画面キャプチャソースで
行いました。1ピクセル単位のPC用定規を写しています。

1)
ツイキャス設定:普通画質
ビットレート:800kbps
映像解像度:1280x720
視聴環境:モニター1920x1080
視聴サイズ:フル画面
部分拡大:目盛りはぼやけてはっきり見えない。

2)
ツイキャス設定:超高画質
ビットレート:2500kbps
映像解像度:1920x1080
視聴環境:モニター1920x1080
視聴サイズ:フル画面
部分拡大:目盛りははっきりみえます。1目盛りは2ピクセルです。
目盛りの線で1ピクセル、目盛りの無いところで1ピクセル。
1ピクセル単位まではっきりみえます。

3)
ツイキャス設定:普通画質
ビットレート:800kbps
映像解像度:1920x1080
視聴環境:モニター1920x1080
視聴サイズ:フル画面
部分拡大:目盛りははっきりみえます。1目盛りは2ピクセルです。
目盛りの線で1ピクセル、目盛りの無いところで1ピクセル。
1ピクセル単位まではっきりみえます。

結果:これは殆ど動いていない動画なので、フルハイビジョンサイズだと
動く映像だと、コレとは違ってくると思いますが、ほとんど動かない
映像では、普通画質で800kbpsでフルハイビジョンサイズと、
超高画質で2500kbpsでフルハイビジョンサイズはあまり変わらなかった。

ツイキャスに推奨解像度は記されていました。

 

OBSでツイキャス配信 5(色々編:短冊とテキストのコラボとグループ化)

短冊とテキストのコラボとグループ化
(テロップの枠サイズ一定サイズにしておきたい場合の策)
配信中に常にお知らせをテロップのように出しておきたいときに、
配信画面のどこかに帯をつけたりしますが、こうやってるんじゃないかな?
と思ってます。
ソースの+(追加)から色ソースを追加します。
ソース名をつけてOKをクリック。色を選択をクリック。
色を決めます(黄色にしてみました)
OKをクリック。短冊にするサイズを指定してOKをクリック。
サイズ変更は、シーンのプロパティで後から変更できます
横1000ピクセルで縦100ピクセル(10:1の比率)で作ってみました。例えば、拡大して移動して、下のほうに配置したとします。
短冊はできたので、この短冊の上に、テキストソースを載せます。ソースの+(追加)からテキストソースを追加します。
ソース名をつけてOKをクリック。フォントの選択をクリック。初期状態のフォント
フォントの種類とフォントのサイズ、フォントのスタイルを決定して
OKをクリック。
例えば、恋文ペン字でサイズは72、スタイルはレギュラーのままにして
テキストを入力します。
※ファイルからの読み取りにチェックを入れると、
予め作成しておいたテキストファイルの中身の文字列をそのまま
入れることもできます。
本日は晴天なり、本日は晴天なり、本日は晴天なり、本日は晴天なり、
あー、テストです、テストです。テストは0点が得意です。と入れて
みました(笑)
右下のスクロールバーを下げて
アンチエイリアスを有効にする
アンチエイリアスとは線を滑らかにすることかな?。
色の選択をクリック。
色を決めます(青色にしてみました)
OKをクリック。
背景の不透明度は左いっぱいにします。
拡大縮小は囲いの辺をドラッグ、移動は囲いの中でドラッグして
テロップの短冊内に収まるようにする。
こんな感じになりました。
だけど、ペン恋文字にしたので、文字の線が細くなっちゃった。
フォント種類のペン恋文字は失敗かな?
(フォントの種類は、PCに入ってるフォントの範囲内だとおもいます、多分)これでよし!出来上がったと思ったら
グループ化にしましょう。
テキストソースと色ソースをグループ化にすることで、ワンクリックで
テキストソースと色ソースを出したり消したりできるし、まとめてロック
(位置や拡大縮小などができないように固定できる機能)しましょう。

ソースの+(追加)からグループ化を追加します。
ソース名をつけてOKをクリック。グループ化はプロパティは設定項目は何もありません
(ソースの入れ物ですからね)

グループ化にソースを入れます。
(私は、グループ化名を、テロップとテキストにしました)
色ソースをドラッグしてグループ化の上でドロップします。
同じ要領で、
テキストソースをドラッグしてグループ化の上でドロップします。
※このとき、グループ化の中で、テキストソースが上の行にしておく。
仮に色ソースが上だと、テキストソースは色ソースの下に入り、
文字が短冊の上に出てこないです。グループ化の中に、テキストソースと色ソースが入りました。
これで、グループ化の下で一心同体になりました。

グループ化の左にある下向きと右向きにかわる矢印をクリックする度に、
中身の表示、非表示になります(効果は変わりません)。
ソースの管理画面の行が減ってすっきりしますw
グループ化にするメリットは、短冊と文字列が一心同体になったので
拡大縮小、移動など、常にともに動くのです。
(一つずつ動かすと短冊と文字列の位置関係がずれちゃう)
グループ化でロックにするには、グループ化の錠前のマークを
クリックします(錠前が閉じた状態になります)。
(もう一度クリックすると戻ります)
この状態ですと、テロップの上にマウスを置いても、移動や拡大縮小の
囲いはでてきませんので位置が固定されています。

短冊(テロップ)を配信に表示したり、非表示にしたりするときに、
グループ化をしていないと、2つ非表示にする手間がかかる。
グループ化で非表示にするには、グループ化の右の目のマークを
クリックします(目のマークが目に斜め線に入ったマークになります)。
(もう一度クリックすると戻ります)

文字列の書き換え、削除、短冊の色の変更とは、グループ化しても
グループ化にいれたまま、目的のソースを選択して、ソースの歯車(プロパティ)をクリックすると、
グループ化してグルー内にあっても文字の変更はできます。
グループ化のなかにあるテキストソースを選択して、
ソースの歯車(プロパティ)をクリックして書き換えができます。
テロップを定位置から動かさない、
文字列も今のバランスがいいという場合は、ロック(錠前をクリックして
錠前を閉じる形のとき)すると、ずれることもなく便利です。
文字の変更で文字数が入らない、文字数が減ってバランスが悪い時は
ロックを解除して、大きさを替えます。

次は、OBSでツイキャス配信 6(色々編:超高画質配信)