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