クイックスタート¶
本章では Sora JavaScript SDK を使ってシンプルな Web アプリケーションを作成するまでの流れを紹介します。
用意するもの¶
WebRTC に対応している Web ブラウザ (Chrome や Firefox など)
Web カメラとマイク
Sora サーバー(ここでは次の条件での運用を仮定します。 詳しくは Sora のドキュメント を参照してください。)
サーバーの IP アドレス: 192.0.2.100
シグナリングのポート番号: 5000
HTTP を使用
チャネル ID: sora-js-sdk
sora.js
sora-js-sdk の最新版の sora.js をダウンロードする。 ここでは dist/sora.js を使用する
プロジェクトを作成する¶
重要
getUserMedia API は基本的に HTTPS またはホスト名が localhost か 127.0.0.1 の場合のみ動作するため、そのほかの URL でアクセスする場合は動作しません
sendrecv.html を作成します。
js ディレクトリ以下に sora.js をコピーします。
example_project
├── js
│ └── sora.js
└── sendrecv.html
SendRecv HTML を作成する¶
example_project/sendrecv.html を作成します。
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<video id="local-video" autoplay="" playsinline="" controls="" muted=""></video>
<hr />
<div id="remote-videos"></div>
<script type="text/javascript" src="./js/sora.js"></script>
<script type="text/javascript">
const debug = true;
const sora = Sora.connection('ws://192.0.2.100:5000/signaling', debug);
const channelId = 'sora-js-sdk';
const metadata = '';
const options = {
multistream: true,
};
const sendrecv = sora.sendrecv(channelId, metadata, options);
sendrecv.on('track', (event) => {
const stream = event.streams[0];
if (!document.querySelector(`#remote-video-${stream.id}`)) {
const video = document.createElement('video');
video.id = `remote-video-${stream.id}`;
video.autoplay = true;
video.playsinline = true;
video.srcObject = stream;
document.querySelector('#remote-videos').appendChild(video);
}
});
sendrecv.on('removetrack', (event) => {
if (document.querySelector(`#remote-video-${event.target.id}`)) {
document.querySelector(`#remote-video-${event.target.id}`).remove();
}
});
navigator.mediaDevices
.getUserMedia({ audio: true, video: true })
.then((stream) => sendrecv.connect(stream))
.then((stream) => {
document.querySelector('#local-video').srcObject = stream;
})
.catch((e) => {
console.error(e);
});
</script>
</body>
</html>
http サーバーを立てる¶
http サーバーを立て example_project 以下に http プロトコルでアクセスできるようにします。
ここでは Python3 を使用して簡易 http サーバーを立てます。
$ cd example_project
$ python3 -m http.server 8000
ブラウザから確認する¶
ブラウザから http://127.0.0.1:8000/sendrecv.html
にアクセスできることを確認します。
http://127.0.0.1:8000/sendrecv.html
ページを複数開くことにより1:N接続が確認できます。
重要
映像/音声が出力されない場合は、カメラまたはマイクがブロックされていないか確認してください
