クイックスタート

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

用意するもの

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

  • Web カメラとマイク

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

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

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

    • HTTP を使用- WebSocket の接続に ws を使用

    • チャネル ID: "sorajssdk"

  • sora.js

プロジェクトを作成する

重要

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

  • sendonly.html, recvonly.html を作成する

  • js ディレクトリ以下に sora.min.js をコピーする

example_project
├── js
│   └── sora.min.js
├── recvonly.html
└── sendonly.html
  • http サーバを立て example_project 以下を http プロトコルでアクセスできるようにする

    • ここでは Python を使用して簡易 http サーバを立てる

      python3 系の場合

      cd example_project
      python -m http.server 8000
      
    • ブラウザから http://127.0.0.1:8000/sendonly.html http://127.0.0.1:8000/recvonly.html にアクセス出来ることを確認

配信者用 HTML を作成する

  • example_project/sendonly.html を修正する

    <html lang="ja">
      <head>
        <meta charset="utf-8" />
      </head>
      <body>
        <video id="local-video" autoplay="" playsinline="" controls="" muted=""></video>
        <script type="text/javascript" src="./js/sora.min.js"></script>
        <script type="text/javascript">
          const debug = true;
          const sora = Sora.connection("ws://localhost:5000/signaling", debug);
          const channelId = "sora-js-sdk";
          const metadata = "";
          const sendonly = sora.sendonly(channelId, metadata);
    
          navigator.mediaDevices
            .getUserMedia({ audio: true, video: true })
            .then((stream) => sendonly.connect(stream))
            .then((stream) => {
              document.querySelector("#local-video").srcObject = stream;
            })
            .catch((e) => {
              console.error(e);
            });
        </script>
      </body>
    </html>
    

視聴者用 HTML を作成する

  • example_project/recvonly.html を修正する

    <html lang="ja">
      <head>
        <meta charset="utf-8" />
      </head>
      <body>
        <video id="remote-video" autoplay="" playsinline="" controls=""></video>
        <script type="text/javascript" src="./js/sora.min.js"></script>
        <script type="text/javascript">
          const debug = true;
          const sora = Sora.connection("ws://localhost:5000/signaling", debug);
          const channelId = "sora-js-sdk";
          const metadata = "";
          const recvonly = sora.recvonly(channelId, metadata);
    
          recvonly
            .connect()
            .then((stream) => {
              document.querySelector("#remote-video").srcObject = stream;
            })
            .catch((e) => {
              console.error(e);
            });
        </script>
      </body>
    </html>
    

ブラウザから確認する

重要

sendonly で映像/音声が出力されない場合、カメラまたは音声がブロックされていないか確認する

_images/media_block.png