クイックスタート¶

本章では Sora JavaScript SDK を使ってシンプルな Web アプリケーションを作成するまでの流れを紹介します。

用意するもの¶

WebRTC に対応している Web ブラウザ (Chrome や Firefox など)
Web カメラとマイク
Sora サーバー（ここでは次の条件での運用を仮定します。詳しくは Sora のドキュメントを参照してください。)
- サーバーの IP アドレス： 192.0.2.100
- シグナリングのポート番号： 5000
- HTTP を使用
- チャネル ID: sora-js-sdk
sora.js
- sora-js-sdk の最新版の sora.js をダウンロードする。ここでは dist/sora.js を使用する

プロジェクトを作成する¶

重要

getUserMedia API は基本的に HTTPS またはホスト名が localhost か 127.0.0.1 の場合のみ動作するため、そのほかの URL でアクセスする場合は動作しません

sendrecv.html を作成します。

js ディレクトリ以下に sora.js をコピーします。

example_project
├── js
│   └── sora.js
└── sendrecv.html

SendRecv HTML を作成する¶

example_project/sendrecv.html を作成します。

<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <video id="local-video" autoplay="" playsinline="" controls="" muted=""></video>
    <hr />
    <div id="remote-videos"></div>
    <script type="text/javascript" src="./js/sora.js"></script>
    <script type="text/javascript">
      const debug = true;
      const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
      const channelId = 'sora-js-sdk';
      const metadata = '';
      const options = {
        multistream: true,
      };
      const sendrecv = sora.sendrecv(channelId, metadata, options);

      sendrecv.on('track', (event) => {
        const stream = event.streams[0];
        if (!document.querySelector(`#remote-video-${stream.id}`)) {
          const video = document.createElement('video');
          video.id = `remote-video-${stream.id}`;
          video.autoplay = true;
          video.playsinline = true;
          video.srcObject = stream;
          document.querySelector('#remote-videos').appendChild(video);
        }
      });

      sendrecv.on('removetrack', (event) => {
        if (document.querySelector(`#remote-video-${event.target.id}`)) {
          document.querySelector(`#remote-video-${event.target.id}`).remove();
        }
      });

      navigator.mediaDevices
        .getUserMedia({ audio: true, video: true })
        .then((stream) => sendrecv.connect(stream))
        .then((stream) => {
          document.querySelector('#local-video').srcObject = stream;
        })
        .catch((e) => {
          console.error(e);
        });
    </script>
  </body>
</html>

http サーバーを立てる¶

http サーバーを立て example_project 以下に http プロトコルでアクセスできるようにします。

ここでは Python3 を使用して簡易 http サーバーを立てます。

$ cd example_project
$ python3 -m http.server 8000

ブラウザから確認する¶

ブラウザから http://127.0.0.1:8000/sendrecv.html にアクセスできることを確認します。

http://127.0.0.1:8000/sendrecv.html ページを複数開くことにより1:N接続が確認できます。

重要

映像/音声が出力されない場合は、カメラまたはマイクがブロックされていないか確認してください

https://i.gyazo.com/8215eec5b33a864633007ea2cc676b79.png