ふとんのなか

中身はないかもしれない。

"それっぽい"配信環境を整えてきもちよくなろう

はじめに

この記事はTokyo City University Advent Calendar 2020の8日目の記事です。
昨日の記事は@_ak259さんの［#tcuac2020 7日目］健康的になりたいお話でした。

都市大生といえばラーメンと唐揚げ丼！
567でクソ過疎ってるYCは学食を開いてくれないので、今の心の支えはラーメンだけ…
なのでおすすめのお店をシェアしておきます。

旗の台駅そばの「麺屋 ぶらいとん」のあぶらめんです。
(ラーメンもメニューにあるけど食べたことない…)
ひたすら大好き。教えてくれた同期に感謝。

今回の目次です。

なぜこのネタ？

ネットワークなんもわからんからやらん
教育実習の1ヶ月ほど前から諸々の要因が重なって精神状態が最悪になり、何もしたくない〜〜〜無気力〜〜〜といいながらひたすらぼーっとしていることが多くなりました。

そんな時期、ぼ〜〜〜っと観てるのにうってつけのコンテンツがあったんですよ。VTuberっていうんですけどね。

※初めて見たのがコレ。認知歪みまくってやばいので誰か助けてください。 www.youtube.com

もう皆さん知ってるでしょうからVTuberがなんたるかは書きませんが、動画投稿というより配信を主にやっています。わたしも高校生時代にニコ生でちょこちょこ配信やってたので(隙あらば自分語り)、配信画面の構成が気になり…

わたしもあれやりたい！！！ 　というわけです。

※カレンダーの予告を見れば分かる通り、OBS向けのトランジションを作る予定でしたが
教育実習があったのにAfter Effectsの勉強なんぞ無理でした。なので今回はとりあえず配信環境の基礎をつくります。

ここで扱うこと

ニコニコ生放送向けの環境を作ったので晒します。

いやなんで720p30までしか対応してないプラットフォームを使うんだよ！と思うかもしれませんが、わたしの自宅には上りがMax 10Mbpsのゴミカス回線しか来てないので、1080p60対応のYouTube Liveとかを使うと画質で絶対がっかりするでしょ。絶対そう。ふぁっきゅーJ:C〇M

※よく行ってたマイクラマルチ関連がニコニコで活動してたからというのもある

配信に使うツール

  • Streamlabs OBS
    YouTubeやTwitchじゃないとStreamlabsの機能は使えない。しかし将来つよつよ回線を手に入れた時に環境を共通にできるメリットあり。

  • HTML5コメントジェネレーター
    みんな大好きコメジェネ。現状これ以外の選択肢はなさそう。コメント主の名前だけ文字色を変えたい…でも無理。
    JSに強い18生の誰か、作ってくれないかな…あれ？JSの記事書いてた人いたような…

  • NiconamaCommentViewer
    ニコ生用。MultiCommentViewerでどうしてもコメントが拾えない配信があったので回帰。

Streamlabs OBSの設定

ストリーム

「カスタムストリーミングサーバー」を選び、放送画面のこれを入れます。(見せられないよ！) f:id:nem_su2aqp:20201207230505p:plain

出力

サーバサイドエンコードの画質がお察しなので、もう正直テキトーな設定でもいいです(投げやり)。仕様の範囲内のデータを投げつけましょう。

[720p配信の場合]
ビットレート:映像・音声を合わせて最大6000kbps
音声ビットレート:最大192kbps
映像解像度:1280×720
映像フレームレート:最大30fps
音声サンプリングレート:最大48kHz
音声チャンネル数:最大2ch(ステレオ)
※生放送をN Airなどの配信ソフトウェアで配信する | ニコニコヘルプ より

最も重要なのは、映像+音声のビットレート合計は6000kbpsまでということです。
ハードウェアエンコードでもいいので、悪くない程度の映像を投げつけましょう。あとは向こうが画質を悪化させてくれます。

オーディオ

自分の使っているオーディオデバイスに合わせて設定します。使いたくないデバイスは無効化しておくといいでしょう。(事故防止)

ビデオ

HD配信の出力解像度は1280x720です。問題は基本キャンバス解像度ですが、画面構成の都合から今回は2560x1440としました。720pの4倍の解像度で扱いやすい、1080pのゲーム画面をキャンバスにそのまま置けるなどのメリットがあります。

どうせ画質は犠牲になるので、ダウンスケールフィルターはバイキュービックでいいでしょう。(バイリニアは却下)

あとはフレームレートですが、これは下げれば下げるだけ画質が良くなります。(1フレームに割り当てられるデータ量が増えるから当たり前のこと)

でもこのご時世にカックカクの映像を観て楽しいわけがないので、24～30(上限)がいいところだとわたしは思います。はい。
はよ60fps対応しろまったく

(その他)

他は弄らなくても配信できます。ホットキーやカラースペースにこだわりがあるなら変更しましょう。

画面づくり

今回、冬をテーマに配信画面を作ってみました。Adobe CCと悪魔の契約をしてな…

f:id:nem_su2aqp:20201207232143p:plain こんなの。
画面ができると急にそれっぽくなるものです。
要素を順番に見ていきましょう。

ゲーム画面

前述の通り、1080pのゲーム画面を拡大縮小せずそのまま置けます。ちゃんと作ってる感あります。

コメント

NCVで取得したコメントをコメジェネに渡し、コメジェネのHTMLファイルをブラウザソースで読み込んでいます。わたしがやる規模の配信でいるか？と思いますが、あるとそれっぽいので。

時計

みんなやってるやつ 、ということで表示してます。 仕組みとしては、Time.isをブラウザソースとして読み込んで、背景を緑色に(GBに)したものにクロマキーとトリミングをして表示しています。 f:id:nem_su2aqp:20201208003436p:plain トリミングで秒を削ってもよし、CSSで好きなだけ装飾するもよし。Web技術って便利だなぁ(しみじみ)

TwitterのID

表垢のです。こっちのアカウントをターゲットに配信はしないんじゃ。許せ。

メッセージ欄(上の画像の「テスト」)

お知らせとか載せてる放送をよく見るので、それっぽくしました。

右下のデッドスペースはなんだ

Vの放送だと、Live2Dとか3Dのモデルを表示させている位置です。残念ながらここに置けるモデルはまだありません…。


いずれはカワイイ"ガワ"を纏って配信したいよなぁ！？

さいごに

とってもそれっぽいものだけできました。今回、わりと余裕のない中作ったため「もっと装飾増やしたい！」とか「もっと詳しく記事書けただろ！」とか色々思うところはありましたが、ガチ勢が多い中でのささやかなネタ提供になっていれば幸いです。それっぽくはなったので、たぶんこれで配信やったらきもちよくなれます。

近日中にマイクラマルチ配信したいわね

明日の記事は@mikuta0407くんの「大学の出席確認システムへ2クリックで登録できるシステムの構築」です。
つよつよ18生の記事は期待せざるを得ない…

おまけ

推しのVは特にいません。でもゲラゲラ笑った配信にはだいたい神楽めあがいた気がする
ねるちゃんの企画とか、おかゆんの深夜マイクラ放送とか好きかも。

おまけのおまけ

他にも、みこちとPP天使の影響でGTAVを買い、おしゃべりドナルドダックの影響で風タクHDを買ったらしい…