SkyWay API使ってみた　webRTC 入門

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

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

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では上手く動きませんでした。