webRTCでP2Pのビデオ通話を制作しているのですが、不具合に直面しております！
詳しい方いらっしゃいましたが、ご教授頂けると幸いです！🙇
【課題】
2~30人の複数人接続を実現したい。
ルームが複数個あり、画面上でユーザーが移動すると、別のルームに接続させる仕様
課金が必要なAPIなど(Skyway,twilioなど)は極力使いたくない。
【経緯】
①
完成し、1つのルームあたり2~4人での動作ではうまく動いたのですが、1つのルームで5~12人など 人数が多くなることで 一部の音声が極端に小さくなったり、新規で追加接続されたユーザーのトラック(ビデオカメラ/画面共有 など)が ルーム内の一部のユーザーに届かない 現象が起きました。
②
エラーが見当たらなかった(見つけられなかった)こと、webRTCは複数人接続に不向きであるという話もあったので、原因がコード側ではなく、webRTCで１つのルームあたりの人数が大きくなることで起きる現象だと仮説を立てました。
③
UI上のルームごとに、webRTCのルームを作る仕様をやめて、同一ルームに存在するユーザーを感知して、そのユーザーと１対１で即席のピアー接続を毎回作る仕様に変更しました。
具体的には、
-新規ユーザーが自分のルームに入った際に、その人と１対１のルームを制作し、その後、既に[音声・画面共有・ビデオカメラ]をONにしている場合は、そのローカルトラックを 制作したばかりのルームに追加する
-既に複数人がルームに入っている場合、例えばAさん、Bさんがルーム内にいて、Cさんが入った場合、A-B間のルーム、A-C間のルームを制作し、適切なトラックを送る
-ユーザーがルームを出た場合は、その人が入っている１対１のルームを全て削除する
上記のような仕様にしました。
④
③での構築が 全体的にコードが複雑になり、想定以上に難航しております。
一部は動いているのですが、部屋に入ってもトラックがピアー接続にうまく乗らないことがあったり(乗ったり乗らなかったりする)、UI上のルームで、2人までは上手く動いても3人になった時に動かないケースが出たりしています。
【質問】
⑴ そもそも②で立てた仮説に間違いはないか。
⑵ 仮説が正しいとして、もっとシンプルに構築できるアイディア/方法はないか。
⑶ コードの量が多くどこをシェアすれば良いのかわからなく シェアしていないので、回答が難しくなるかと思いますが、④で現在起きている現象に 何か思い当たる節はないか。以下、コード自体ではないですが、大まかな構成を記載しました。具体的な場所でシェアすべきコードがあれば、シェア可能です。
【大まかなコード内容】
-vue.jsで制作
-firebaseのrealtimeDatabaseで各ユーザーがどのルームに居るかを感知、誰かがルーム移動した際に、自分のルームが関わっていた場合、トリガーを引く
-その際に、まずsocket.ioで新規ソケットを制作し、オファー、アンサー、Candidate制作送信、などのソケットにトリガーを設定。
-自分が移動して、その部屋に既に1人でもユーザーがいる場合同じ準備を行う
-その後、入室した側のユーザーが、既に入っていたユーザーにオファーを送る
-新規のピアー接続を用意し、こちらにも、他ユーザーのトラック追加/削除に対してのリアクション用のトリガーをセットする。
-ピアー接続が上手くいった場合、その後、既にUI上で自分の[カメラ、画面、音声]それぞれのスイッチがONになっていた場合に、そのピアー接続に載せる。
-ピアー接続のトリガーの仕様は、onnegotiationneededを経由して、ontrack、removetrackのアクションを稼働させている。removetrackができるようにontrackの際にsenderをクライアント側で保存させておいて、removetrackではそれを使用する
何卒宜しくお願いいたします！🙇