配信と視聴を行う

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

OBS で配信する

配信 URL を作成する

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

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

API_TOKEN は1つ前のチュートリアルで入力した、Castify コンソールで確認できるトークンを入れてください。 以下のような結果が返ってくれば、配信用の URL を取得できています。

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

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

上記で得られた recorder.uploadUrl の値、もしくは recorder.rtmp.url + recoder.rtmp.streamKey の値を配信ソフトウェアに設定することで配信できます。 ここでは OBS を利用しますが、RTMP で配信を行えるソフトウェアであれば何でも構いません。

  1. OBS > 設定 (Preference) から OBS の設定ダイアログを開いてください。

  2. "配信" メニューを選択し、各項目を以下のように設定してください。

    • サービス: カスタム...

    • サーバー: recorder.rtmp.url の値

    • ストリームキー: recorder.rtmp.streamKey の値

  3. "出力" メニューを選択し、以下のように設定します。

    • 配信タブ > エンコーダ: x264 (デフォルト)

    • 配信タブ > ビットレート: 512 Kbps

      • Castify では特にビットレートの制限を設けておりませんが、ここではテストのためにあまり高すぎない数値を指定しています。

    • 配信タブ > キーフレーム間隔: 1

  4. 左下の OK ボタンを押して、設定ダイアログを閉じます。

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

配信を視聴する

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

以下の HTML を作成し、ローカルに .html ファイルとして保存してください。 途中の var broadcastId = 'ここに broadcastId を記入'; 部分に、 配信 URL を作成した際に得られている, bc_ から始まる broadcastId を入力してください、

<!DOCTYPE html>
<html>
<body>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <video id="video" width="100%" autoplay playsinline muted></video>
  <script>
  var video = document.getElementById('video');
  var broadcastId = 'ここに broadcastId を記入';
  var playlistURL = 'https://edge-api.castify.jp/streamers/' + broadcastId + '/index.m3u8';
  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(playlistURL);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      hls.media.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = playlistURL;
    video.addEventListener('loadedmetadata', function() {
      video.play();
    });
  }
  </script>
</body>
</html>

このファイルをお使いのブラウザで開くと、あなたの配信が視聴できるはずです。 正しく視聴できない場合は、ブラウザの開発者ツールの JavaScript コンソールを見て、エラーなどが表示されていないか確認してください。 ここでは hls.js を使っている関係で、視聴の遅延が若干ありますが、Castify SDK を使った視聴では、この遅延はごく低減されます。

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

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