#概要
agora.io Cloud RecordingにWeb Page Recordingが追加されました。
Web Page Recordingは、Cloud Recordingの録画モード(Individual/Mix/WebPage)の1つで、agora.io SDKの映像や音声と外部Webページ、又はサードパーティ製の機能を組み合わせたWebページを、1つの録画映像に保存することができます。
[利用イメージ]
※agora.io 公式ページより転用
この記事では、Web Page Recordingについて、録画実行のサンプルを用いて、録画実行から録画ファイル作成、再生までをざっくりと説明します。
#想定ケース
例えば、以下の機能があるライブ配信サービスがあります。
・映像/音声機能(agora.io Video SDK)
・チャット機能(agora.io RTM SDK)
・ホワイトボード機能(サードパーティ製)
これらの機能を1つのWebページ上に表示したものをWeb Page Recordingで録画することができます。
※agora.io 公式ページより転用
#RESTful API
Web Page Recordingでは以下のAPIを利用します。
・acquire：録画実行IDの取得
・start：録画開始
・stop：録画停止
acquire→start→stopの順で動作します。
詳細は「agora.io Cloud Recording SDK クイックスタートガイド」をご参考ください。
#サンプルソース
以下よりダウンロードしてください。
サンプルソース
#実装
サンプルソースについての説明です。
##録画実行プログラム
録画実行プログラム(webpage.php)では、RESTful APIをコールする処理を実装しています。
###start()のリクエスト値
※acquire()、stop()は他のモード(mix/individual)も全て同じなので省略
start()時の設定値の特徴、注意点は以下になります。
特徴
・clientRequestの"extensionServiceConfig"は、WebPage Recording固有の情報を設定する。
・"serviceParam"は、録画するWebページ情報("url"、"audioProfile"、"videoWidth"、"videoHeight"など)を設定する。
・"maxRecordingHour"は、指定時間後に自動的に録画を停止するための時間を設定する。
function start() {
#(省略)#
$params = [
'cname' => $cname,
'uid' => $uid,
'clientRequest' => $clientRequest
];
$clientRequest = [
'token' => $token,
'extensionServiceConfig' => $extensionServiceConfig, ★
'recordingConfig' => $recordingConfig,
'storageConfig' => $storageConfig
];
$extensionServiceConfig = [
'errorHandlePolicy' => 'error_abort',
'extensionServices' => [$extensionServices]
];
$extensionServices = [
'errorHandlePolicy' => 'error_abort',
'serviceName' => 'web_recorder_service',
'serviceParam' => $serviceParam
];
$serviceParam = [
'url' => 'https://sameple.com(録画用WebページのURL)', ★
'audioProfile' => 0, ★
'videoWidth' => 1280, ★
'videoHeight' => 720, ★
'maxRecordingHour' => 1 ★
];
#(省略)#
}
##配信用Webページ
配信用Webページ(basicLive.js)は、agora.io Video SDK(Web4.x)のbasicLiveサンプルをそのまま使用します。
##録画用Webページ
録画用Webページ(basicLive_audience/basicLive.js)は、agora.io Video SDK(Web4.x)のbasicLiveサンプルを改造したものを使用します。
実装のポイント
Web Page Recordingは、ボタンクリックなどのインタラクティブには対応していないため、録画用Webページは視聴のみページにする必要があります。
[修正点]
・URLクリック時(ロード時)にaudience(視聴者)でJoinさせる。そしてhost(配信者)の映像をSubscribeする。(basicLive.js)
・iframeを追加し、外部ウェブページ(agora.io公式ページ)を設定する。(index.html)
// the demo can auto join channel with params in url
$(() => {
var urlParams = new URL(location.href).searchParams;
options.appid = "****"; //APPID
options.channel = "demo"; //Channel
options.token = urlParams.get("token");
if (options.appid && options.channel) {
$("#appid").val(options.appid);
$("#token").val(options.token);
$("#channel").val(options.channel);
$("#join-form").submit();
}
join(); //ロード時にjoin処理をコール
})
<!--外部Webページの追加-->
<div id="remote-playerlist">
<div id="player-wrapper-66666">
<p class="player-name">外部Webページ</p>
<div id="player-66666" class="player">
<iframe src="https://www.agora.io/en/" width="600" height="720"></iframe>
</div>
</div>
</div>
※表示イメージ(録画用Webページ)
#仕様上の注意点
- Web Page Recordingは、ボタンクリックなどのインタラクティブには対応していませんので、ページロード時に全コンテンツを表示するような視聴のみページを作成する必要があります。
- start()からおよそ5秒後に録画が開始されます。(完全に録画したい場合は5秒前にはstart()しておく必要があります。）
- stop()をしなかった場合、maxRecordingHourの時間が過ぎるまで、録画は続きます。(maxRecordingHourはなるべく小さい値を設定しておくことをおすすめします。)
Web Page Recordingの注意点については、以下リファレンスをご参照ください。
・Prerequisites
・Application restrictions
・restful-api-requests
・other-considerations
#動作確認
##実行環境
・ストレージ(S3)
・Webサーバ(xampp)
・agora.io SDK 4.x
##前準備
各サンプルソースに設定値(APPID、ストレージキー等)を設定してください。
(webpage.php、basicLive.js)
##動作実行
１. 配信用Webページ(index.html)を起動します。
２. (APPID、Channelを入力後)”Join as host”をクリックし、配信を開始します。
※APPID、Channelはwebpage.phpで指定した値を同じものを設定
３. 録画用Webページ(index.html)を起動します。
配信者の映像と外部Webページが表示されています。
４. 録画実行プログラム(webpage.php)を実行します。
acquire() → start() → 60秒待機 → stop()の順に実行されます。
５. (60秒後)録画が停止します。
(録画実行プログラム(webpage.php)より)レスポンスが表示されます。
６.クラウドストレージに接続し、ファイルを確認します。
クラウドストレージ上にファイルが作成されています。
ファイル名：sid_channel名_unixtime
６.再生します。
録画されたWeb page全体が表示されています。
Web Page Recordingの実行とファイル作成、確認ができました。
#関連リンク
・Cloud Recordingのstop()時にステータスコード404(エラー)になるのはなぜですか？
・録画モードの違いについて教えてください。
・On-premise RecordingとCloud Recordingの違いは何ですか？
