Help us understand the problem. What is going on with this article?

Sora LaboでSora JavaScript SDKを試す

More than 1 year has passed since last update.

WebRTC SFUのSora を無料で試すことができるSora Labo がオープンしたのでさっそく試してみました。

試したときの環境は以下の通り。
MacOS 10.15.1
Google Chrome バージョン: 78.0.3904.108(Official Build) (64 ビット)

Sora Laboにログインして必要な情報を得る

https://sora-labo.shiguredo.jp/

GitHub アカウントでサインアップまたはサインインする のリンクからGitHubにログインします。

シグナリング URL(wss://ではじまるもの) とシグナリングキーが必要なものです。

WebRTC SFU Testing Service Sora Labo の使い方
https://gist.github.com/voluntas/fb4cdc1626c941443e41a5a39050eb33

JavaScript SDKで試す

JavaScript SDKのクイックスタートのページを参考にして進めていきます。
https://sora.shiguredo.jp/js-sdk-doc/quickstart.html

sora.min.js をダウンロードする

curl -OL https://raw.githubusercontent.com/shiguredo/sora-js-sdk/master/dist/sora.min.js

カレントディレクトリをブラウザから開けるようにするために、python3でHTTPサーバをうごかしておきます。

python3 -m http.server 8000

送信側

以下のファイルをコピペして、channelIdsignalingUrlmetadataを自分のものに修正します。

upstream.html
<html lang="ja">
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    <video id="local-video" autoplay controls muted></video>
    <script type="text/javascript" src="./sora.min.js"></script>
    <script type="text/javascript">
     const channelId = 'your-github-id@sora-labo';
     const signalingUrl = 'wss://sora-labo.shiguredo.jp/signaling';
     const metadata = {"signaling_key": "xxxxxxxxxxxxxxxxxxxxx"};

     const debug = true;
     const sora = Sora.connection(signalingUrl, debug);
     let options = {
             audio: true,
             audioCodecType: 'OPUS',
             audioBitRate: 96,
             video: true,
             videoCodecType: 'H264',
             videoBitRate: 1500,
         }
     const publisher = sora.publisher(channelId, metadata, options);
     let constraints = {
             audio: true,
             video: {
                 width: 640,
                 height: 480,
                 frameRate: 20,
             }
         }
     navigator.mediaDevices.getUserMedia(constraints)
          .then(stream => publisher.connect(stream))
          .then(stream => {
              document.querySelector('#local-video').srcObject = stream;
          })
          .catch(e => { console.error(e); })
    </script>
    </body>
</html>

受信側

以下のファイルをコピペして、channelIdsignalingUrlmetadataを自分のものに修正します。

downstream.html
<head>
    <meta charset="utf-8">
</head>
<body>
    <video id="remote-video" autoplay controls muted></video>
    <script type="text/javascript" src="./sora.min.js"></script>
    <script type="text/javascript">
     const channelId = 'your-github-id@sora-labo';
     const signalingUrl = 'wss://sora-labo.shiguredo.jp/signaling';
     const metadata = {"signaling_key": "xxxxxxxxxxxxxxx"};

     const debug = true;
     const sora = Sora.connection(signalingUrl, debug);
     let options = {
         audio: true,
         audioCodecType: 'OPUS',
         audioBitRate: 96,
         video: true,
         videoCodecType: 'H264',
         videoBitRate: 1500,
     }
     const subscriber = sora.subscriber(channelId, metadata, options);

     subscriber.connect()
               .then(stream => {
                   document.querySelector('#remote-video').srcObject = stream;
               })
               .catch(e => {
                   console.error(e);
               });
    </script>
</body>
</html>

送信と受信を試す

Chromeブラウザで以下のそれぞれのURLを開く。
http://localhost:8000/upstream.html
http://localhost:8000/downstream.html

これでupstreamのページから送信したものをdownstreamのページで見ることができます。
(MacOS 10.15では最初に試した時に、Chromeからマイクとカメラを使用するのを許可するためにコントロールパネルのセキュリティの設定の登録をうながされますので、それにしたがってChromeを追加しておきます。)

次はこれを、httpsのサーバに置いてやってみてください。
(https でないとブラウザからカメラやマイクを使用することができません。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away