やりたいこと
タイトルのままです。
本記事では下記について書きます。
- なぜライブストリーミング配信したいと思ったのか？（動機です。興味ない方は読み飛ばしてください。）
- Ubuntu22.04での OBS Studioの設定とYoutubeへの配信手順
なぜライブストリーミング配信したいと思ったのか？
本節では、なぜライブストリーミングしたくなったのか？ を書きます。
完全にポエムですので、興味のない方は読み飛ばしてください。
先にフィジカルWebありき
今回配信したいWebアプリは「バーチャル缶たたき機」というアプリです。
バーチャル缶たたき機は、「缶たたき機」という別のアプリの仮想バージョンという関係になります。
しょっぱなからややこしい話ですいません！
ということなので、先に「缶たたき機」の説明から。
「缶たたき機」は、フィジカルWebアプリです。（機能をアップデートしながら7-8年は作ってる気がします）
平たく言うと「楽器のようなモノ」なのですが、実物の空き缶をWebから制御するソレノイドを使って叩いて音を鳴らしつつ、WebGLを使ったビジュアルを併せた「その場でだけ体感できる」というアプリです。
缶たたき機は、今年10月に開催された Maker Faire Tokyo 2023 にも出展しました。
リアルな缶が奏でるリズムの音は（ソレノイドの調整や缶の配置など）準備や調整も大変ですが、大きな会場で大音量のスピーカーの音があちこちで響く中でもアコースティックゆえの特徴的な音を鳴らせていたのではないかと思います。
フィジカル体験へのWeb経由の入口「バーチャル缶たたき機」
この「缶たたき機」のフィジカル部分、つまり実物の缶をたたくアコースティック音源部分をサンプリングデータとWebAudioによるオーディオ再生に置き換えたアプリが「バーチャル缶たたき機」です。
実物の空き缶をたたく部分がないので、構成上は普通のWebアプリケーションと同じです。
PCやスマホなどブラウザが動く端末があれば、その場で「缶たたき機」を擬似体験することができます。
「缶をたたいてリズムを自動演奏」というのは、ギターを弾くほどには普及した音楽演奏体験ではありません。缶は身近に転がっているのに、です。
フィジカルWebはアコースティックゆえの特別な体験ではありますが、残念なことにその場の人しか体験できません。
その場に来て体験する前にWeb経由で気軽にアプリケーションの世界を楽しんでいただく、というのがこのバーチャル缶たたき機のコンセプトです。
「たたく」ボタンのタップに反応して缶の音が鳴るというシンプルなアプリです。
リスナーへも演奏を届けたい（今回のモチベーション）
音楽を楽しむ人は、楽器を演奏する人だけではありません。
音楽を聴くのが好きでも、楽器を演奏しない人は多いと思います。すでに10年ちかく（缶たたき機以外の）楽器をほぼ触っていない私も、演奏しない側の人です。
バーチャル缶たたき機にも今年のバージョンから「AI自動演奏」機能を搭載しました。
「AI停止中」と表示されているボタンを押せば「AI再生中」に表示が代わり、AIが生成したリズムの自動演奏が始まります。
AIの生成したリズムは一定間隔で自動的に切り替わり、止めるまで永遠に再生が続きます。
タブがバックグラウンドに回ると自動再生を止める仕様なので、純粋なWebラジオのようには使えないです。
これで、ようやくリスナー向けの機能が搭載された、と言いたいところですが、音楽を聴きたい人＝バーチャル缶たたき機を演奏したい人ではないので、バーチャル缶たたき機に自動演奏機能が搭載されたからといって自動演奏のためにサイトを訪れてくれる人は稀でしょう。
音楽を聞きたい人が良く使うメディアは YouTube などのメディアサービスでしょうから、それらのサービス側に導線を作る必要があります。
前置きが長くなりました。
今回「Webアプリ」として作った楽器と自動演奏機能を使った「ライブ演奏」を、YouTube経由でアクセスできるようにすることで、多くの方に届けたい、というのがやりたいことです。
Ubuntu22.04での OBS Studioの設定とYoutubeへの配信手順
長い前置き失礼しました。
いよいよ本題です。
今回は（将来的にストリーミングラジオのように）長時間ライブ配信する（下手したら24時間配信の可能性もある）ことを想定し、余ったPCで配信専用のPCを作ります。
配信用PCとは別のPC（配信用PCの設定を行ったり、RDP経由で配信用PCを操作するPC）も1台準備し、同一ネットワークに配置します。
下記手順で実施しました。
- Ubuntu 22.04 LTS のインストールと設定
- OBS Studioのインストール
- YouTubeアカウントの設定
- ライブストリーミング配信の実行
1. Ubuntu 22.04 LTS のインストールと設定
準備した配信用PCは下記スペックです。
結果としてバーチャル缶たたき機のライブストリーミングには十分でした。
| 項目 | 性能 |
|---|---|
| CPU | Intel Corei3 (第8世代) |
| RAM | 8Gbyte |
| SSD | SATA120Gbyte |
配信用PCとは別のPCを使って、Ubuntu 22.04 LTS配布元 からイメージファイルをダウンロードし、USBストレージなどを使ってOSインストールUSBメディアを作成します。
Etcher などを使うと簡単にOSインストールUSBメディアを作成することができます。
作成したOSインストールUSBメディアを配信用PCのUSBポートに挿入した状態で配信用PCの電源をONにすると、Ubuntu のインストールが行えます。表示されている通りに進めるだけですので、手順は割愛いたします。
アップデート
Ubuntu 22.04 のインストールが終わり再起動後に、アップデートを行います。
ターミナルを起動してお決まりのコマンドを入力してアップデートを済ませましょう。
sudo apt-get update
sudo apt-get upgrade
日本語入力
あと、日本語入力もしたいので、設定しておきます。下記サイトを参考に設定しました。
もちぶろ：Ubuntu 22.04 日本語入力できるようにする方法
サスペンド停止
サスペンド中はリモートデスクトップでの接続に失敗することがあるようなので、無操作によるサスペンドを停止します。
settings > Power > Power Saving Options > Screen Blank を never に変更します。
リモートデスクトップ設定（配信用PC側）
Ubuntu 22.04ではリモートデスクトップの設定が簡単に行えるようになっています。
settings を開き、その中の Sharing を選択します。
すると、下記のような画面が表示されますので、Remote Desktop を クリックします。
Remote Desktop をクリックすると、ポップアップが表示されますので、そこで Remote Desktop のトグルを ON に変更します。
変更後、ポップアップは下記のような表示になります。
リモート接続時に使いますので、ポップアップで表示される下記項目をメモしておきましょう。
Remote Desktop AddressUser NamePassword
以上で配信用PC側のリモートデスクトップの設定は完了です。
リモートデスクトップ設定（操作PC側）
操作用PCのリモートデスクトップ環境を設定します。
筆者はMacを使ってるので、Microsoft Remote Desktop を使った手順を説明します。
まず、Microsoft Remote Desktop をインストール後起動します。
上記画面で Add PC をクリックします。
PC name に、先ほどメモをした Ubuntuのリモートデスクトップ設定画面に表示されていた Remote Desktop Address のホスト名を設定します。（例：Remote Desktop Address が ms-rd://xxx.local の場合、xxx.local のみを設定）
その後、Add を押すと接続先が保存されます。
保存された接続先をクリックすると、リモートデスクトップ接続を開始します。
下記のような認証画面が表示されますので、Ubuntu のリモートデスクトップ設定画面に表示されていたUser NameとPassword を用いてログイン（continueを押下）してください。
途中、証明書がverifyされてないというアラートがでることがありますが、continue を押せば接続できます。
2. OBS Studioのインストール
配信用PC（ubuntu）にログインし、OBS Studioをインストールします。
下記サイトの手順通りに実施します。
How to Install OBS on Ubuntu 22.04?
と、いいつつ、ターミナルから下記コマンドを実行するだけです。
sudo apt update
sudo apt install obs-studio -y
OBS Studioのインストールに成功すると、launcherに OBS Studioのアイコンが追加されます。
そのままアイコンをクリックしてOBS Studioを起動してみましょう。
上記のような画面が表示されたらインストール成功です。
ライブストリーミングのための設定は、YouTubeのアカウント設定後に実施しますので、OBS Studioは一旦このまま終了させます。
3. YouTubeアカウントの設定
次にYouTubeアカウントの設定を行います。
Youtubeアカウントをお持ちでない方は、下記手順で作成しておいてください。
以下、YouTubeアカウントをお持ちという前提で話を進めます。
まず、https://studio.youtube.com にアクセスします。
YouTube Studioにアクセスしたら、左側のアイコンメニューから コンテンツ を選びます。
次に 上部のタブから ライブ配信 を選びます。
この画面の中央あたりにある 始める をクリックします。
すると、下記のような画面が表示されるので、リクエスト をクリックしてください。
ライブストリーミング機能が有効化されるまで、最大で24時間待ちます。
4. ライブストリーミング配信の実行
YouTubeアカウントのライブストリーミング配信が有効化されたら、いよいよ OBS Studio側の設定になります。
OBS StudioへYouTubeアカウントを紐づける
OBS Studioを起動し、ファイル から 設定 を開きます。
設定 画面で 配信 を選び、サービスに YouTube - RTMPS サーバー Primary YouTube ingest server を選択します。
その上で、アカウント接続(推奨) を押します。
ブラウザが開き、Googleサインインのページに飛びますので、YouToubeアカウントに利用したGoogleアカウントでログインしてください。
OBS Studioへのデータ連携の認証画面が表示されるので、許可 ボタンを押します。
ブラウザ側の表示は「認証が正常に完了しました。このページを閉じることができます」に変わり、OBS Studioの配信設定画面の方では、接続されたアカウント に先ほど許可したアカウントが接続済みになっているはずです。
その他の設定
設定 → 音声 をクリックし、デスクトップ音声のみデバイスを選択します。（HDMI接続、あるいはアナログ出力）
今回はマイクからの配信は実施しませんので、マイク音声 が有効になっている場合、無効 に変更します。
設定 → 映像 をクリックし、基本(キャンバス)解像度 を 1280x720 に設定します。
同様に、出力(スケーリング)解像度 も 1280x720 に設定します。
最後に OK を押して 設定 画面を閉じます。
ブラウザでサイトにアクセスする
OBS Studioはそのままに、ブラウザでサイトにアクセスします。 今回は バーチャル缶たたき機 にアクセスします。
OBS Studio のソースからブラウザ Window をキャプチャーする
OBS Studio に戻り、画面下部にある ソース の部分で右クリックしてソースを追加します。
追加 → ウインドウキャプチャ(pipeWire) を選択後、表示される ポップアップで OK を押します。
すると、そのまま ウインドウを選択 画面に遷移しますので、ブラウザを選択します。そのまま share を押し、そのまま OK を押すと、キャプチャが始まります。
OBS Studio のキャプチャ範囲の位置合わせ
Windowキャプチャを選ぶと、ブラウザのメニューやお気に入りバーなども含めてOBS Studioのキャプチャー範囲に表示されています。
コンテンツエリアのみを配信したいので、ここでキャプチャ範囲の調整を行います。
OBS Studioのブラウザ画面がキャプチャされている部分をクリックすると、赤い枠線が表示されます。
この状態で、ブラウザ画面部分をドラッグすることで、メニュー部分を赤枠の外側に持っていけば隠すことができます。
ブラウザ側のWindowサイズもできるだけ設定したアスペクト比に近づけながら、調整してみましょう。
こんな感じで調整できたらキャプチャ範囲の位置合わせは完了です。
配信設定
コントロール → 配信の管理 をクリックし、配信設定画面を表示します。
- タイトル
- 説明
- プライバシー
- カテゴリ
- 子供向けか否か？
を埋めるようにしましょう。
一旦、ここで、配信を作成 を押すと、YouTube側にライブ配信ページが作成されます。
いよいよ配信開始
ライブ配信の開始時刻になりましたら、コントロール → 配信開始 をクリックします。
配信が開始されますので、他のPCなどから https://studio.youtube.com の ライブ配信 から、確認してみてください。
今回、この記事作成で配信したライブストリーミングは こちら
無事配信できました！
まとめと展望
OBS Studio を使ったWebアプリのライブストリーミング手順を紹介しました。
Webアプリのストリーミング配信環境は構築できましたが、今回構築した仕組みだけですと、常にWebアプリの操作を行わないとライブ配信中ずっと画面が切り替わらない、ということになってしまいます。
せっかく「配信用PC」を作っても、常に配信用PCを操作しないとライブストリーミングができない、というのはちょっとやりたいこことと違います。ある程度設定したら自動で何時間かはほったらかしにできる、そんな仕組みに仕上げてこそ、配信用PCをわざわざ作った意味があるというものです。
というわけで、本記事はまだ道半ばです。
次回は、簡単なRPA的な仕組みを導入することで、もうちょっと「ほったらかしでライブストリーミングできる」環境へのアップデートを目指します。
さて、それを「ライブストリーミング」と呼んで良いのか？という疑問は残りますが、やりたい未来はそっちです。
それでは、最後までおつきあいありがとうございました。
続きもきっと書きますのでお楽しみに！