SkyWay API使ってみた webRTC 入門

こんにちは、マットです。
都内ITベンチャーのエンジニアです。
Go/Next.js/GraphQLを使っています。

業務でも使用しているSkyWayのJavaScript SDK チュートリアルをやってみました。 SkyWayはwebRTC 技術のSDK API を提供しているサービスです。

無料、有料プランがありチュートリアルレベルなら無料で十分試す事ができます。

f:id:shikatech:20211127163009p:plain

webrtc.ecl.ntt.com

コード

コードです。 チュートリアルをなぞっただけなので説明は省きます。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.3.js"></script>

</head>

<body>

    <video id="my-video" width="400px" autoplay muted playsinline></video>
    <p id="my-id">test</p>
    <input id="their-id"></input>
    <button id="make-call">発信</button>
    <video id="their-video" width="400px" autoplay muted playsinline></video>
    <script>

  const peer = new Peer({
    key: 'xxxxxxxxxx',
    debug: 3
  });

  peer.on('open', () => {
    document.getElementById('my-id').textContent = peer.id;
  });

        let localStream;
      navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(stream => {
          const videoElm = document.getElementById('my-video');
          videoElm.srcObject = stream;
          videoElm.play();
          localStream = stream;
        }).catch(error => {
          console.error('mediaDevice.getUserMedia() error:', error);
          return;
        });

  document.getElementById('make-call').onclick = () => {
    const theirID = document.getElementById('their-id').value;
    const mediaConnection = peer.call(theirID, localStream);
    setEventListener(mediaConnection);
  }

  const setEventListener = mediaConnection => {
    mediaConnection.on('stream', stream => {
      const videoElm = document.getElementById('their-video')
      videoElm.srcObject = stream;
      videoElm.play();
    });
  }

  peer.on('call', mediaConnection => {
    mediaConnection.answer(localStream);
    setEventListener(mediaConnection);
  });
    </script>
</body>

</html>

注意点としてvscodeの Live Server機能を使用したのですが、 ドメイン127.0.0.1を登録する必要がありました。 localhostでは上手く動きませんでした。

f:id:shikatech:20211128125624p:plain

実行後、無事に映像を取得することができました。

f:id:shikatech:20211128125744p:plain

PeerID

チュートリアルではPeerIDは自動生成されました。 PeerIDは電話番号の役割なので毎回自動生成されるよりも、できればサーバーやDBと連携する為に固定のものを使用したいです。

new Peer('peerID',{}) とすることで任意の値をpeerIDに指定することができます。

実際のアプリケーションでは、通話をするクライアント同士のpeerIDをサーバーを経由して共有することで発信相手を特定します。

その他のAPI

SkyWay以外にもwebRTC技術を提供しているサービスがありました。

WebRTCの商用サービスまとめ|Twilio, SkyWay, Agora.io など | Agora 開発者ブログ | ブイキューブ

今回は以上です。

最後に、 このブログではweb開発について発信していくのでまたご覧頂けると嬉しいです。 最後までお読み頂きありがとうございました。