WebRTC SFUのSora を無料で試すことができるSora Labo がオープンしたのでさっそく試してみました。
試したときの環境は以下の通り。
MacOS 10.15.1
Google Chrome バージョン: 78.0.3904.108（Official Build） （64 ビット）
Sora Laboにログインして必要な情報を得る
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を自分のものに修正します。
<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を自分のものに修正します。
<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 でないとブラウザからカメラやマイクを使用することができません。)