クイックスタート

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

用意するもの

  • WebRTC に対応している Web ブラウザ (Chrome や Firefox など)

  • Web カメラとマイク

  • Sora サーバ(ここでは次の条件での運用を仮定します。 詳しくは Sora のドキュメント を参照してください。)

    • サーバの IP アドレス: 192.0.2.100

    • シグナリングのポート番号: 5000

    • HTTP を使用

    • チャネル ID: sora-js-sdk

  • sora.js

プロジェクトを作成する

重要

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

sendrecv.html を作成します。

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

example_project
├── js
│   └── sora.min.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.min.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 プロトコルでアクセスできるようにします。

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

python3 系の場合

cd example_project
python -m http.server 8000

ブラウザから確認する

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

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

重要

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

_images/media_block.png
© Copyright 2021, Shiguredo Inc. Created using Sphinx 4.2.0