SkyWayとA-Frameを組み合わせて360度WebVR会議システムを作る！

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay1、初日です！

『WebXR』をテーマにしたアドベントカレンダー『WebXR ( WebVR/WebAR ) Advent Calendar 2021』の Day 4 でもあります！
前回はやのせん@VR/メタバース教育さんの前回は「VIVE FlowでWebXR」について手短にでした。

今日はWebでリアルタイムコミュニケーションを実現する、SkyWayというSDKを使用し、A-Frameと組み合わせWebVR上で360度会議をする方法をご紹介していきます！

このような複数人での360度会議ができるようになります。

SkyWayとは

SkyWayはNTTコミュニケーションズが提供するビデオ通話、音声通話をかんたんにアプリに実装できる、マルチプラットフォームなSDKです。
WebベースのJavaScript SDKはもちろん、iOSやAndroidのSDKも用意されており、またサンプルのコードも充実しており、エンジニアが簡単にWeb会議など通話を組み込むことが可能です。

このように一対一の通信通話はもちろん、多人数の通話など、有料機能であれば録音しクラウドストレージに保存する機能などがあります。

SkyWayのサンプルで多人数のオンライン通話をしてみる

それでは、サンプルベースで多人数のオンライン通話を実装してみましょう。

こちらのチュートリアルに従っていきましょう。
CDN、もしくはnpmからSkyWayのパッケージをインポートします。

$ npm install skyway-js

<script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.3.js"></script>

次にアプリケーションを追加し、ドメインを追加します。
設定画面でAPIが確認できる他、ドメインはいつでも追加編集可能です。
ここでドメインホワイトリストを登録しないと使用することができません。

localhostやngrokを検証用、デプロイ用にs3などを登録しておくと試しやすいです。

また権限としてTURN、SFU、listAllPeers API、Peer認証などの利用可否を設定できます。

それでは設定が終わったらサンプルコードを実装していきます。
こちらの多人数通話のコードを参考にしていきます。

const Peer = window.Peer;

(async function main() {
  // 自分のストリーミングエリア
  const localVideo = document.getElementById('js-local-stream');
  //  ルームへの参加ボタン
  const joinTrigger = document.getElementById('js-join-trigger');
  const roomId = document.getElementById('js-room-id');
  const getRoomModeByHash = () => (location.hash === '#sfu' ? 'sfu' : 'mesh');
  // カメラや音声へのアクセス
  const localStream = await navigator.mediaDevices
    .getUserMedia({
    audio: true,
    video: true,
  })
  .catch(console.error);
  // Render local stream
  localVideo.muted = true;
  localVideo.srcObject = localStream;
  localVideo.playsInline = true;
  await localVideo.play().catch(console.error);

  const peer = (window.peer = new Peer({
    key: "", // api keyの入力
    debug: 3,
  }));

  joinTrigger.addEventListener('click', () => {
    if (!peer.open) {
      return;
    }

    const room = peer.joinRoom(roomId.value, {
      mode: getRoomModeByHash(),
      stream: localStream,
    });

  room.on('stream', async stream => {
  // videoタグを追加しpeerIdを付与
    const newVideo = document.createElement('video');
    newVideo.srcObject = stream;
    newVideo.playsInline = true;
    newVideo.setAttribute('id', stream.peerId);
    newVideo.setAttribute('data-peer-id', stream.peerId);
    aAssets.append(newVideo);
    });
  });
  peer.on('error', console.error);
})();

たったこれだけのコードで通話処理が可能です！
※サンプルからPeerの削除などは除外し、とてもシンプルな構成にしました。

SkyWayのサンプルはこちらです。

A-Frameと組み合わせてみる

それでは、A-Frameと組み合わせてみます！
今回はWebVR空間上にビデオ通話エリアを表示させていきます。

index.html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SkyWay 360</title>
<link rel="stylesheet" href="./style.css">
<script src="https://aframe.io/releases/1.0.1/aframe.min.js"></script>


<a-scene>
  <a-assets>
    <img id="image1" src="./image1.jpg">
    <video id="js-local-stream"></video>
  </a-assets>
  <a-sky id="image-360" radius="10" src="#image1"></a-sky>
  <a-video src="#js-local-stream" width="1" height="1" position="0 2 -3"></a-video>
</a-scene>
<div class="container" style="position: absolute; top: 1px;">
  <div id="header">
    <h1 class="heading" style="color: white;">360度会議システム</h1>
    <div class="room">
    <div>
      <input type="text" placeholder="Room Name" id="js-room-id">
      <button id="js-join-trigger">Join</button></div>
    </div>
  </div>
</div>
<script src="//cdn.webrtc.ecl.ntt.com/skyway-4.4.3.js"></script>
<script src="./script.js"></script>

a-assetsに自分のストリーミング映像（video要素）を入れ、そこからa-videoで呼び出しています。

<a-video src="#js-local-stream" width="1" height="1" position="0 2 -3"></a-video>

またJS部分ではルームへの参加者が増えるごとにvideo要素とa-videoを追加しています。

room.on('stream', async stream => {
  member += 1;
  const newVideo = document.createElement('video');
  newVideo.srcObject = stream;
  newVideo.playsInline = true;
  newVideo.setAttribute('id', stream.peerId);
  newVideo.setAttribute('data-peer-id', stream.peerId);
  aAssets.append(newVideo);

  const newAVideo = document.createElement('a-video');
  newAVideo.setAttribute('src', '#' + stream.peerId);
  newAVideo.setAttribute('width', 1);
  newAVideo.setAttribute('height', 1);
  newAVideo.setAttribute("position", {x:member * 1.75, y:2, z:-3});
  aScene.append(newAVideo);
  await newVideo.play().catch(console.error);
});

positionだけではなく本来rotationで角度も動的に変更する、など対処が必要ですが今回は簡易版なのでpositionのx軸のみ動的座標にしています。

こうして完成したのがこちらのシステムです！

まずこちらのJoinでルーム名を入力し、PeerIdを発行します。

他の参加者（実は別タブでも参加可能です）が同じルーム名でJoinされた際に、a-videoタグが追加され、そちらがこのように360度画像上に円状に表示され、近未来感のある会議システムができました！

まとめ

今回はSkyWayを組み合わせ、360度空間でビデオ通話するサンプルを作成していきました。

実はもともとはWebARのSDKである8th Wallと組み合わせ、AR上で目の前の空間に通話相手を表示させる、というシステムを実現予定でした。ただビデオをAR上で表示する中での問題が起きており、そこの解決ができず一旦A-Frameベースですすめることにしました。
次回はWebAR上での会議システムを作っていこうと思います！

bageleeを運営しているpalanではこういったWebARの開発を行っている他、誰でも手軽にWebARをノーコードで作成できるpalanARというサービスも展開していますので、ご興味ある方はぜひご覧ください！