3DバーチャルオフィスにWebRTCで画面共有と録画機能を実装する

こんにちは！Vitalify AsiaでBPMとして働いているVy（ヴィー）です！
当社のエンジニアさんが「3Dバーチャルオフィスでの画面の共有と録画」というテーマで記事を書きましたので、日本語に翻訳して皆さんへ紹介したいと思います。<元記事(英語)>

はじめに

最近、私たちは人々が交流し、お互いにビデオ通話が出来るルームを作りました。このリンクでご参考することができます。

ThreeJS + Socket.IO + WebRTC リアルタイムマルチプレイヤー | Vitalify Asia

ブラウザだけで動くメタバースの作り方。Three.jsの3D描画、Socket.IOの低遅延な座標同期、WebRTCのP2P通信を組み合わせ、複数人が同時に集まれる仮想空間の実装方法を解説します。

Vitalify AsiaVitalify Asia

ただし、完全に機能するバーチャルオフィスを実現するには、画面を共有および記録する機能を実装する必要があります。この強化により、オンライン会議が大幅に豊かになり、すべての参加者にとってより包括的で楽しいものになります。

この記事では、これらの機能を追加した方法と、それらがどのように機能するかを詳細に説明します。

このリンクよりデモをご参考ください。
https://udl-3d-web-multiplayer.onrender.com/

機能

このバージョンでは、ユーザーはGoogle Meetなどの他の会議プラットフォームと同様に、画面を共有できます。ユーザーは、クロムタブ、ウィンドウ、または画面全体を共有することを選択できます。

ユーザーは共有画面を録画することもできます。録画されたビデオには、共有画面のビデオとオーディオの両方、およびすべての参加者の声が含まれます。録画が完了すると、画面の隅にあるポップアップにプレビュービデオが表示されます。ユーザーは、ビデオの下のボタンを押して、ビデオを保存するか削除するかを選択できます。

仕組み

画面ストリームの送信

以前は、WebRTCを利用して2人の参加者間のピア接続を確立し、その接続を介してウェブカメラストリームの送受信を可能にしました。

画面共有機能を実装するには、追加のストリーム（画面共有ストリーム）を他の人に送信する方法を見つける必要があります。利用者のPCのCPUとネットワーク帯域のリソースが大量に必要であり、サーバーの負荷も大幅に上がってしまいます。

そこで、既存の接続に共有ストリームを追加し、ソケットを使用して他のすべての参加者に信号を送り、接続を更新することにしました。パフォーマンスのオーバーヘッドを大幅に削減します。

共有画面の録画

共有画面を録画するために、RecordRTCを利用しました。このライブラリでは、MediaStream(ビデオ+オーディオ)を録音できます。しかし、実際には、ミーティングではユーザーが複数のストリームを受信します。例えば、ひとりずつのウェブカムのストリームは別々のストリームであり、ミーティングには複数の参加者がいる場合もあります。

そのため、私たちの目標は、共有画面と参加者全て音声を録画することです。

すべてのオーディオストリームを1つのオーディオストリームにマージし、共有画面ビデオとマージされたオーディオストリームでストリームを作成することで、この目標を達成します。

3Dスペースに画面の表示

ThreeJSを使用すると、ビデオをテクスチャとして使用し、3D空間のメッシュやモデルに適用できます。最初に、共有ストリームのデータを含むビデオコンポーネントを検索します。次に、このビデオデータを抽出してVideoTextureを作成します。その後、このテクスチャから素材を生成し、テレビの3Dモデルに適用します。また、その新しいテクスチャにcolorSpaceを「srgb」に設定してください。そうしないと、色が変わったように見えるかもしれません。

機能

画面共有と録画機能の追加により、バーチャルオフィスは完全に機能するミーティングスペースに変身しました。
将来的には、オンライン会議でさらに楽しい体験にするために、さらに多くの機能を追加していきます。

【Vy（ヴィー）のコメント】

私は、ビデオ通話や画面共有ができるインタラクティブなルームを作るアイデアは素晴らしいと思います。特に、リモートワークがますます一般的になっている状況で、このようなアイデアは非常に有益だと感じます。
このようなユーザフレンドリーなリモート会議ツールが普及してくれると仕事が楽しくなりそうですね！各社に合わせてカスタマイズ出来るようですので、興味ある方はお問い合わせください！