mediasoup の demo をローカル実行

frontend

2021.07.15

mediasoupというオープンソースの WebRTC SFU サーバーがあったので
ローカル環境で、mac 2台でやってみたらうまく通信できました。

細かい設定等が必要だったので、手順を書いていきます。

mediasoup – Cutting Edge WebRTC Video Conferencing
https://mediasoup.org

公開サーバーでのデモ
https://demo.mediasoup.org

試してみたのはこのソースコードで、ローカルビルドしてみて動きました。
https://github.com/versatica/mediasoup-demo

macOS Big Sur(Apple Silicon) で動作確認済

ソースコードを取得

% git clone https://github.com/versatica/mediasoup-demo.git

オレオレ証明書の取得

webrtc には ssl が必要なようなので、
localhost用にオレオレ証明書を取得します。

% brew install mkcert
% mkcert 127.0.0.1

以下のファイルが生成されます。

秘密鍵: 127.0.0.1-key.pem
証明書: 127.0.0.1.pem

127.0.0.1.pem を
server/certs/fullchain.pem としてコピー

127.0.0.1-key.pem
server/certs/privkey.pem としてコピー

% cd mediasoup-demo/server
$ cp config.example.js config.js

server/config.js に

ip          : process.env.MEDIASOUP_LISTEN_IP || '1.2.3.4',

のように 1.2.3.4 の箇所がありますが、これを
1代目の mac の IP アドレスに変更します。
私の場合は wifi のアドレスは 192.168.11.2 でした。
２箇所くらいあるので、全部変更します。

起動

% yarn install
% yarn start

準備

% cd mediasoup-demo/app
% yarn install
% yarn start

準備が完了したらブラウザから次のアドレスに
アクセスします。

そうすると
以下のような roomId が付与されます。

このアドレスを、2代目のmacでアクセスすれば、
ビデオチャットができます。