クイックスタート

WebRTCで映像音声を送信し、HLSで視聴するときの手順を説明します。

  1. 配信するチャンネルを作成する
  2. チャンネルに対し配信クライアントがWebRTCで接続する
  3. HLSプレイリストを取得する
  4. チャンネルを削除する

配信するチャンネルを作成するlink

配信を開始するにはまずチャンネルを作成します。 チャンネルを作成するにはCreateMultistreamChannelWithHLS APIを呼び出します。 チャンネルのパラメータには生成するHLSのパラメータとWebhookの送信先URLを指定します。Webhookの送信先URLは省略可能です。

すべてのAPI呼び出しにはアクセストークンが必要です。アクセストークンはAuthorizationヘッダに指定します。

チャンネルに対し配信クライアントがWebRTCで接続するlink

指定したチャンネルに対し、配信クライアントがWebRTCで接続して、映像、音声を送信します。接続して数秒後にHLSのプレイリストファイルが作成されてHLS配信が開始されます。

HLSプレイリストを取得するlink

プレイリストURL(.m3u8)をListPlaylistURLs APIで取得し、hls.js等のHLS動画プレイヤーを使用して視聴します。

チャンネルを削除するlink

チャンネルを使い終わったら、DeleteChannel APIを呼び出してチャンネルを削除します。 まだ接続中のチャンネルを削除した場合には強制的に切断されます。 チャンネルを削除しない場合、意図せずそのチャンネルが再利用されてしまったときに予期しない課金が発生することがあります。

何度も配信をする場合には、同じチャンネルを使いまわすのでなく配信のたびに新たにチャンネルを作ってください。

具体的な手順link

最小限の方法で配信の動作確認をする手順を紹介します。この確認はmacOS Sonoma 14.4.1で行いました。

準備

ImageFlux Live Streamingのアカウント開設時に発行してもらったアクセストークン、または、自分で発行したアクセストークンの文字列を手元に用意してください。 アクセストークンはAPIトークン管理画面で確認できます。また、同画面で新規にアクセストークンを発行できます。その際はLive Streaming権限を指定してください。 なお、アクセストークンの文字列はエンコード済みのものをご利用ください。

サンプルコードをこちらからダウンロードし、zipアーカイブからsend.html, recv.html, hls.htmlを取り出してカレントディレクトリに置いてください。

カレントディレクトリをブラウザから開けるようにするため、python3でHTTPサーバをうごかしておきます。

python3 -m http.server 8000

ImageFlux Live StreamingのAPIでチャンネルを生成する

curlで次のコマンドを実行するとチャンネルが作成され、その情報がJSONで返ってきます。 ACCESS_TOKENのところは自分のアクセストークンの文字列に変更してください。

ACCESS_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXX"
curl -H "Content-Type: application/json" \ 
  -H "X-Sora-Target: ImageFlux_20200316.CreateMultistreamChannelWithHLS" \
  -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"
}

channel_id とsora_url はsoraに対してWebRTCで接続するときに使用します。

APIについての詳細はこちらを参照してください。

ファイルの修正

サンプルコードのsend.htmlおよびrecv.htmlの中のchannel_idとsora_urlを先ほど取得したものに置き換えます。

...
  <script type="text/javascript">
    const channel_id = 'XXXXXXXXXXXXX....';
    const sora_url = 'wss://XXXXXXXX.imageflux.jp/signaling';
...

WebRTCの送信を試す

Chromeブラウザで以下のURLを開きます。

http://localhost:8000/send.html

送信するときに、カメラとマイクの使用許可を求めるダイアログが出るので許可します。

(Chromeから初めて送信する際には、マイクとカメラの使用を許可するためのコントロールパネルのセキュリティの設定の登録がChromeからうながされます。その指示に従って、Chromeを追加してください)

localhost以外のホストで実行する場合はhttpsのサーバに置いてください。 (httpsでないとブラウザからカメラやマイクを使用できません)

WebRTCの受信を試す

Chromeブラウザで以下のURLを開きます。

http://localhost:8000/recv.html

再生は自動で開始されます。音声はmute状態になっているので、画面上のボタンを操作してmuteを解除してください。

HLSのプレイリストURLの取得

上記send.htmlで配信をしている状態で、配信中のプレイリストURL(.m3u8)をListPlaylistURLs APIで取得します。 ACESS_TOKEN のところは自分のアクセストークンの文字列に、CHANNEL_IDのところは先ほど取得したchannel_idの文字列に置き換えてください。

ACCESS_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXX"
CHANNEL_ID="XXXXXXXXXXXXX...."

curl -H "Content-Type: application/json" \
  -H "Authorization: Bearer ${ACCESS_TOKEN}" \
  -H "x-sora-target: ImageFlux_20200207.ListPlaylistURLs" \
  -d "{ \"channel_id\": \"${CHANNEL_ID}\" }" \
https://live-api.imageflux.jp/

レスポンスは以下のような内容のJSON形式となります。 これをファイルに保存するなどして覚えておいてください。

{
  "channel_id": "<channel_id>",
  "hls": [
    {
      "connection_id": "<connection_id>",
      "playlist_url": "https://XXXXXXXX.imageflux.jp/XXXX/XXXXXXXX.m3u8"
    }
  ]
}

配信中でない場合は、プレイリストURLを取得できません。

HLSでの受信

サンプルコードのhls.htmlの中のplaylist_urlを先ほど取得したものに置き換えます。

...
  <script>
    const playlist_url = 'https://XXXXXXXX.imageflux.jp/XXXX/XXXXXXXX.m3u8';
...

Chromeブラウザで以下のURLを開きます。

http://localhost:8000/hls.html

再生は自動で開始されます。音声はmute状態になっているので、画面上のボタンを操作してmuteを解除してください。

チャンネルの削除

使い終わったチャンネルは以下のコマンドで削除します。 ACESS_TOKEN のところは自分のアクセストークンの文字列に、CHANNEL_IDのところは削除するchannel_idの文字列に置き換えてください。

ACCESS_TOKEN="XXXXXXXXXXXXXXXXXXXXXXXXX"
CHANNEL_ID="XXXXXXXXXXXXX...."

curl -H "Content-Type: application/json" \
  -H "Authorization: Bearer ${ACCESS_TOKEN}" \
  -H "x-sora-target: ImageFlux_20180501.DeleteChannel" \
  -d "{ \"channel_id\": \"${CHANNEL_ID}\" }" \
https://live-api.imageflux.jp/

より複雑なサンプル

サーバサイドの実装を含む、より複雑なサンプルはこちらを参照してください。

  • © pixiv Inc., SAKURA Internet Inc.