クイックスタート

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

用意するもの

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

プロジェクトを作成する

重要

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

  • upstream.html, downstream.html を作成する
  • js ディレクトリ以下に sora.min.js をコピーする
example_project
├── downstream.html
├── js
│   └── sora.min.js
└── upstream.html
  • http サーバーを立てて example_project 以下を http プロトコルでアクセス出来るようにする

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

      python2 系の場合

      pip install SimpleHTTPSServer
      cd example_project
      python -m SimpleHTTPServer 8000
      

      python3 系の場合

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

配信者用 HTML を作成する

  • example_project/upstream.html を修正する

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

視聴者用 HTML を作成する

  • example_project/downstream.html を修正する

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

ブラウザから確認する

重要

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

_images/media_block.png