Castify

配信と視聴

Castify プラットフォームへの配信には SDK を利用することができますが、 既存のソフトウェアを使って配信を行うこともできます。 ここではチュートリアルとして、配信には OBS Studioopen in new window, 視聴には Castify SDK を使って、配信と視聴を行ってみましょう。

OBS で配信する

配信 URL を作成する

REST API POST broadcasts を呼び出して Broadcast リソースを作成します。

$API_TOKEN の部分には、１つ前のチュートリアルで入力した、 Castify コンソールで確認できるトークンを入れてください。

curl -X POST 'http://api.castify.jp/api/v1/broadcasts/@new' \
  -H "Authorization: Bearer $API_TOKEN" \
  -H 'Content-Type: application/json'   \
  -d '{ "deferred": true }'

以下のような結果が返ってくれば、配信用の URL を取得できています。

{
  "broadcastId": "bc_XXX",
  "recorder": {
    "uploadUrl": "rtmp://sink.castify.jp/castify/bc_XXX?token=aaa",
    "rtmp": {
      "url": "rtmp://sink.castify.jp/castify",
      "streamKey": "bc_XXX?token=aaa"
    }
  }
}

配信ソフトウェアに配信 URL を入力する

上記で得られた recorder.uploadUrl の値、 もしくは recorder.rtmp.url + recoder.rtmp.streamKey の値を 配信ソフトウェアに設定することで配信できます。

ここでは OBS を利用しますが、RTMP で配信を行えるソフトウェアであれば何でも構いません。

  1. OBS > 設定 (Preference) から OBS の設定ダイアログを開いてください。 OBS の設定ボタン
  2. "配信" メニューを選択し、各項目を以下のように設定してください。
    • サービス: カスタム...
    • サーバー: recorder.rtmp.url の値
    • ストリームキー: recorder.rtmp.streamKey の値 OBS の設定ダイアログ
  3. "出力" メニューを選択し、以下のように設定します。
    • 配信タブ > エンコーダー: x264 (デフォルト)
    • 配信タブ > ビットレート: 500 Kbps
      • Castify では特にビットレートの制限を設けておりませんが、トライアルモードでは1Mbpsに制限されます。また、ここではテストのためにあまり高すぎない数値を指定しています。
    • 配信タブ > キーフレーム間隔: 1 s OBS の設定ダイアログ
  4. 左下の OK ボタンを押して、設定ダイアログを閉じます。

設定ダイアログが閉じられたら、ソースにウィンドウキャプチャやお好みの動画を指定し、配信開始ボタンをクリックします。配信中ステータスになれば配信は正常に開始されています。

配信を視聴する

では、正しく配信されているかどうかを自分で視聴して確かめてみましょう。 ここでは Castify SDK を利用しますが、 hls.jsopen in new window など、 HLS が視聴できるプレイヤーであれば基本的に何でも構いません。

以下の HTML を作成し、ローカルに .html ファイルとして保存してください。

<!DOCTYPE html>
<html>
<body>
<video id="player" width="640" height="360" playsinline muted></video>
<script src="https://public.castify.jp/js/castify-player/1.latest/player.js"></script>
<script>
  (function() {
    let broadcastId = new URLSearchParams(location.search).get('id')
    if (!broadcastId) {
      alert("クエリに id パラメータが指定されていません。")
      return
    }
    let player = new Castify.Player(document.getElementById('player'))
    player.source = new Castify.Source(broadcastId)
    player.seek('live')
  })();
</script>
</body>
</html>

このファイルをお使いのブラウザで開き、クエリパラメータとして ?id= に Broadcast ID を与えます。 そうすると、今 OBS から配信している映像が視聴できるはずです。 もし正しく視聴できない場合は、ブラウザの開発者ツールの JavaScript コンソールを見て、 エラーなどが表示されていないか確認してください。

これで Castify の API, そして配信と視聴について学ぶことができました。 この他にも iOS, Android での開発や、プレビュー画像 (サムネイル) の作成方法についてのガイドがありますので、 必要に応じて目次から各ページをご覧ください。

不明な点があれば、是非 Castify 開発チームへのフィードバックをお願いします！

最終更新日: