Agora.ioでバーチャル背景を作ろうとして上手くいってないが経過だけでも報告

Agora.ioでバーチャル背景を作ろうとして上手くいってないが経過だけでも報告

こんにちは。キャレット合同会社の椎原です。インフラ構築の片手間に評価用ソフトを開発をしています。

このブログを見てAgoraやってるなと思われている方。弊社では、ライブ配信アプリ制作に手を広げ、最初はAmazon IVSを使いましたが、より安価で低遅延のAgoraに切り替えています。

双方向配信の需要も多いので、一度Amazon Kinesis Video Streams検討してみたんですが、アプリのコンパイルが通らないとか色々敷居が高く、またagoraほど使い勝手もよくなかったので断念してます。

さて、今回バーチャル背景をしようとしました。webで。JavaScript使ってやろうとしてます。ただ、どうしてもクリアできない部分があります。ローカルのバーチャル背景はできるんですが、それをリモートに送ると、背景が欠落して、黒背景になってしまう。

私の作っているアプリのリモート受信部分のバグか? と思って、公開されているサンプルで受信してみたら、こちらも見事に黒背景。

WebRTCで顔認識+バーチャル背景 – Qiita

このサイトを参考にしましたが、そこでも黒背景でうやむやにしてました。リモート側で、背景を合成したら良いんじゃないかなとか書いてましたが、その解決法は間違ってませんか?

結局、なぜか送信時に背景が欠落することがほぼ確定です。もう一つcanvasを作って、そちらにコピーしたらうまくいったので、canvasの仕様で背景に指定した部分は送信ストリームに乗らないのではないかと疑っていますが、クリティカルな回答は見つかってません。もしかしたら、クロスオリジン問題に引っかかっているのかもしれませんが現状良く理解してません。

なんとなく CORS がわかる…はもう終わりにする。 – Qiita

作ったサンプルを上げておきます。設定後、24時間しか動きませんので、appID、チャンネル、トークンは、こちらから登録して取得してください。サンプルの99行目からに入力します。

Dashboard

で、サンプルはこちら。↓ トークンとか書き込まないとうごきません。

<< https://mike2mike.xyz/ttt.html >>

Join hostの画像をJoin audience側で受け取ってますが黒です。

%E9%9B%91%E8%A8%98%E5%B8%B3%20f3d39b0a9f734931bb2a16259a0de78f/_2021-05-12_113719.png

%E9%9B%91%E8%A8%98%E5%B8%B3%20f3d39b0a9f734931bb2a16259a0de78f/_2021-05-12_113800.png

と、ここまでやって、Agora.ioからバーチャル背景のサンプルβ版が2021/5下旬に公開されるという噂が流れてきました。期待して待っておきます。

サポートから連絡があって、現在のところ期待したパフォーマンスでないということなので、サンプル版の公開が夏以降になるとのことです。

お問い合わせ

キャレット合同会社へのお問い合わせやご相談などがありましたら、以下のメールフォームよりお気軽にご連絡ください。

Agora.ioカテゴリの最新記事