WebRTCで映像音声を送信し、HLSで視聴するときの手順を説明します。
配信を開始するにはまずチャンネルを作成します。 チャンネルを作成するにはCreateChannel APIを呼び出します。 チャンネルのパラメータには生成するHLSのパラメータとWebhookの送信先URLを指定します。Webhookの送信先URLは省略可能です。
すべてのAPI呼び出しにはアクセストークンが必要です。アクセストークンはAuthorizationヘッダに指定します。
指定したチャンネルに対し、配信クライアントがWebRTCで接続して、映像、音声を送信します。 接続して数秒後にHLSのプレイリストファイルが作成されてHLS配信が開始されます。
チャンネルを使い終わったら、DeleteChannel APIを呼び出してチャンネルを削除します。 まだ接続中のチャンネルを削除した場合には強制的に切断されます。 チャンネルを削除しない場合、意図せずそのチャンネルが再利用されてしまったときに予期しない課金が発生することがあります。
何度も配信をする場合には、同じチャンネルを使いまわすのでなく配信のたびに新たにチャンネルを作ってください。
最小限の方法で配信の動作確認をする手順を紹介します。この確認はmacOS Catalina 10.15.4で行いました。
ImageFlux Live Streamingのアカウント開設時に発行してもらったアクセストークン、または、自分で発行したアクセストークンの文字列を手元に用意してください。 アクセストークンはAPIトークン管理画面で確認できます。また、同画面で新規にアクセストークンを発行できます。その際はLive Streaming権限を指定してください。 なお、アクセストークンの文字列はエンコード済みのものをご利用ください。
サンプルコードをこちらからダウンロードし、zipアーカイブからsend.html
, recv.html
, hls.html
を取り出してカレントディレクトリに置いてください。
sora JavaScript SDKサイトからsora.js
をダウンロードします。
curl -OL https://raw.githubusercontent.com/shiguredo/sora-js-sdk/master/dist/sora.js
カレントディレクトリをブラウザから開けるようにするため、python3でHTTPサーバをうごかしておきます。
python3 -m http.server 8000
curlで次のコマンドを実行するとチャンネルが作成され、その情報がJSONで返ってきます。 ACCESS_TOKEN
のところは自分のアクセストークンの文字列に変更してください。
ACCESS_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXX"
curl -XPOST -H "Content-Type: application/json" -H "X-Sora-Target: ImageFlux_20180905.CreateChannel" -H "Authorization: Bearer ${ACCESS_TOKEN}" -d '
{
"hls": [
{
"durationSeconds": 1,
"startTimeOffset": -2,
"video": {
"width": 1280,
"height": 720,
"fps": 30,
"bps": 2000000
},
"audio": {
"bps": 96000
}
},
{
"durationSeconds": 1,
"startTimeOffset": -2,
"video": {
"width": 640,
"height": 360,
"fps": 30,
"bps": 500000
},
"audio": {
"bps": 96000
}
}
]
}
' https://live-api.imageflux.jp/
レスポンスは以下のような内容のJSON形式となります。 これをファイルに保存するなどして覚えておいてください。
{
"channel_id": "XXXXXXXXXXXXX....",
"sora_url": "wss://XXXXXXXX.imageflux.jp/signaling",
"playlist_url": "https://XXXXXXXXXXXX.imageflux.jp/XXXXXXXXXXXXXXXXXXXX.m3u8"
}
channel_id
とsora_url
はsoraに対してWebRTCで接続するときに使用します。playlist_url
はHLSで視聴するときに使用します。
APIについての詳細はこちらを参照してください。
サンプルコードのsend.html
の中のchannel_id
とsora_url
を先ほど取得したものに置き換えます。
...
<script type="text/javascript">
const channel_id = 'XXXXXXXXXXXXX....';
const sora_url = 'wss://XXXXXXXX.imageflux.jp/signaling';
const metadata = {};
...
サンプルコードのrecv.html
の中のchannel_id
とsora_url
を先ほど取得したものに置き換えます。
...
<script type="text/javascript">
const channel_id = 'XXXXXXXXXXXXX....';
const sora_url = 'wss://XXXXXXXX.imageflux.jp/signaling';
const metadata = {};
...
サンプルコードのhls.html
の中のplaylist_url
を先ほど取得したものに置き換えます。
...
<script>
const playlist_url = 'https://XXXXXXXXXXXX.imageflux.jp/XXXXXXXXXXXXXXXXXXXX.m3u8';
const video = document.getElementById('video');
...
Chromeブラウザで以下のそれぞれのURLを開きます。
http://localhost:8000/send.html
http://localhost:8000/recv.html
http://localhost:8000/hls.html
送信するときに、カメラとマイクの使用許可を求めるダイアログが出るので許可します。 再生は自動で開始されます。音声はmute状態になっているので、画面上のボタンを操作してmuteを解除してください。
(macOS 10.15の場合、Chromeから初めて送信する際には、マイクとカメラの使用を許可するためのコントロールパネルのセキュリティの設定の登録がChromeからうながされます。その指示に従って、Chromeを追加してください)
次はこれらのファイルを、httpsのサーバに置いてやってみてください。 (httpsでないとブラウザからカメラやマイクを使用できません)
使い終わったチャンネルは以下のコマンドで削除します。 ACESS_TOKEN
のところは自分のアクセストークンの文字列に、CHANNEL_ID
のところは削除するchannel_idの文字列に置き換えてください。
ACCESS_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXX"
CHANNEL_ID="XXXXXXXXXXXXX...."
curl -v \
-X POST \
-H "Authorization: Bearer ${ACCESS_TOKEN}" \
-H "Content-Type: application/json" \
-H "x-sora-target: ImageFlux_20180501.DeleteChannel" \
-d "{ \"channel_id\": \"${CHANNEL_ID}\" }" \
https://live-api.imageflux.jp/