Sora LaboでSora JavaScript SDKを試す

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
```


## 送信側

以下のファイルをコピペして、`channelId`と`signalingUrl`と`metadata`を自分のものに修正します。

```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>
```

## 受信側

以下のファイルをコピペして、`channelId`と`signalingUrl`と`metadata`を自分のものに修正します。

```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 でないとブラウザからカメラやマイクを使用することができません。)