とうふなメンタルな主の備忘録

とうふメンタルな主が細々と書く備忘録です。

WebRTC Native Client Momoを活用した低遅延1対1ビデオ送信のすゝめ

こんにちは。そして初めまして。主でございます。

 

低遅延+リアルタイムでカメラの映像を送信したいとき、この記事を読んでいるあなたは、どのような方法で行いますか。

WebRTCとの出会い

主は、従来、Mjpeg-Streamer(https://github.com/jacksonliam/mjpg-streamer)を使用していました。

しかしこいつ、難点があって、遅延が少ない代わりにネットワーク帯域とCPUの処理の少なさを犠牲にしている。

しょがないと半ばあきらめかけていた...その時、「"webRTC"ってのが遅延が少なく軽いらしいよ」との噂を耳にしたのです。

↓その時の気持ち

ぬ、主が求めていたのはこれだぁぁぁぁ!!!!

調べていくと、どうやら時雨堂さんがOSSとして開発されているというMomoというソフトウェアがすごいらしい。Twitterなんかで検索かけてもずらずらと出てくる出てくる。

中3の主が理解できるかどうかは分らんけど、とりあえず使えるようにはなるだろうということで手を付けました。

自分はある程度の知識あるよーという人へ

githubの公式ドキュメントを読んでください。丁寧に書かれており非常に分かりやすいです。

github.com

WebRTC Momo の使い方

今回はWindowsPC上で使ってみます。

maclinuxをお使いの方は、./momo.exe → ./momoにするなど適宜読み替えてください。

1.ダウンロード&解凍する

MomoのgithubリポジトリのReleasesより、自分が使いたいプラットフォームに合ったビルド済みのバイナリをダウンロードします。

github.com

番外編.対応OS・ハードウェアについて 「"MOMO" IS GOD!!!!!」

記事執筆時点(2021年1月)では以下のOSに対応しているようです。

  • Windows10 (1809~)
  • Ubuntu18.04&20.04 (x86_64)
  • Ubuntu18.04(armv8)
  • MacOS11.0(arm64)
  • MacOS11.0(x86_64)
  • RaspberryPiOS(armv6&v7&v8)

ハードウェアで言い換えると、

  • RaspberryPi Zero
  • RaspberryPi 2
  • RaspberryPi 3
  • RaspberryPi 4
  • M1搭載Mac
  • Intel Mac
  • NVIDIA Jetson Nano
  • NVIDIA Jetson AGX Xavier
  • WindowsPC

ということになります。

いや、普通に列挙してみたけど多いでしょ、めちゃめちゃ。

発売されたばかりのM1 Macとかしれ~っと入っちゃってますからね。

開発者様のおかげでほとんどのPC・マイコンで動くので、これから必要になった場面で活躍してくれそうです。

 

ダウンロードしたら、適当に場所に解凍して、開きます。

以下のようになってたらOK。

f:id:k-nonbiriya:20210131114725p:plain

解凍後のフォルダーの中身

2.実行→映像を確認

コマンドプロンプトなりPowershellなりを開いて、解凍した場所まで移動します。

まずはヘルプを読んで、なんとなくどんなオプションがあるか見てみましょう。

引数なしで実行するとヘルプというか引数一覧が出てきます。

$ ./momo.exe

 とりあえず今回は1対1での片方向映像送信なので、テストモードで起動すればいいらしい。

$ ./momo.exe test 

これで起動されました。

※マイク・カメラはWindowsで規定のデバイスになってるものが自動選択されます。たぶん。

そしたら今度は、ブラウザを開いて、

http://localhost:8080/html/test.html 

 にアクセスしましょう。

f:id:k-nonbiriya:20210131120757p:plain

アクセスしてみましたの図

きっとこんな画面が見えているはずです。

でもまだ映像は現れてない。

 まず、現在「H.264」となっているプルダウンメニューを「VP9」に変更し、「Connect」ボタンを押します。

↑「H.264」を変更する部分はPCによって変動すると思います。適宜映像が正常に映るコーデックを探してみてください。

f:id:k-nonbiriya:20210131122854p:plain

無事に映りましたの図(+顔隠しのラズパイ

3. さらに画質を向上させる

このままだとwebカメラの映像が低解像度でしかも4:3なので、HD解像度でアスペクト比16:6になるように変更します。

momo起動時に、「--resolution HD」という引数を追加します。

「HD」という部分は{4K,FHD,QVGA,VGA}に変更できます。

※数値で指定する方法もあるようですが、割愛します

$ ./momo.exe --resolution HD test 

 

f:id:k-nonbiriya:20210131124234p:plain

無事にHD解像度で16:9になりましたの図(+顔隠しのラズパイ

 4.視聴用のUIの改善

------------------------

2021/10/18 追記

諸事情により現在公開を停止しています.再開予定は立っていません.

------------------------

 さて、ある程度基本的な部分は完成しました。

しかし、通信状況悪化した場合に画質が自動的に落とされるのですが、一緒に映像が表示される枠の大きさも変化してしまいます。

それだと使い勝手が悪いので、自動で画質変更された場合でも、枠の大きさが変化しないように、HTML/JSファイルを改造します。

※主は初心者です。自分の環境で動いたからとりあえずいいや!思考なので、動かない場合もありますし、コードも汚いです。理解いただける方のみ使用してください。

以下改造内容です。

  • Bootstrap / JQuery / popperJS / Google Fonts読込
  • ページ読込時にVP9コーデックを選択済みに
  • ボタンを修飾
  • 表示のみの場合に使用しない「play」「Send」ボタンの非表示

ボタンの非表示は "display : none;"としているだけですので使用される方は適宜削除をお願いします。

以下ソースコードです。

 

解凍したフォルダ内にあるtest.html内を上記の内容で上書きするか、別名で/htmlディレクトリ内の別名で保存してください。

以下は無事に成功した場合のスクリーンショットです。

 

f:id:k-nonbiriya:20210131150658p:plain

無事に完成しましたの図(+もう見慣れたかもしれないラズパイ

 

終わり & 最後に

これで無事完成です!

お疲れ様でした。

カメラ入力をOBSの仮想カメラにすれば低遅延配信が必要な場合に使えるかもしれません。様々な応用が可能な素晴らしいソフトです。世界中の人が使えばいいのに。

改めて、開発者の方、時雨堂の方、本当にありがとうございます。

今後もメンテナンスが続きますように...

 

それではみなさん、よきWebRTCライフを!

また次の記事でお会いしましょう。...書きます、気が向いたら...

記述等間違えている箇所ありましたらコメントいただけるとありがたいです。