アーカイブのチュートリアル（Web）

概要

OpenTokのアーカイブAPIを使用すると、セッションの音声・映像ストリームをMP4ファイルとして記録することができます。

サーバーの設定

OpenTokのセッションをアーカイブするには、以下のものが必要です。サーバーセットアップ。サーバーを使ったアーカイブの実装方法は数多くありますが、このチュートリアルでは、簡単なPHPサーバーをさっと立ち上げてみます。

サーバーを起動するには、下の「Heroku」ボタンをクリックするだけです。クリックするとHerokuのウェブサイトに遷移し、OpenTokのAPIキーとAPIシークレットの入力を求められます。これらの値は、プロジェクトページで取得できます。 Video APIアカウント. HerokuのAccountをお持ちでない場合は、登録する必要があります（無料です）。

コードを詳しく見てみたいですか？ 上のボタンをクリックすると、 learning-opentok-php GitHubのリポジトリ。リポジトリにアクセスして、コードや追加のドキュメントを確認してください。また、リポジトリをフォークして、デプロイ前に変更を加えることも可能です。

プロジェクトの設定

このチュートリアルを進めるには、OpenTokの Webサンプルアプリ GitHub上のリポジトリ：

git clone https://github.com/Vonage-Community/video-api-web-samples.git

次に、 アーカイブ コードエディタ内のフォルダを開いて、手順に沿って進めてください。

重要だ： アーカイブできるのは、 OpenTok メディアルーター（メディアモードが「ルーティング」に設定されているセッション）。デフォルトでは learning-opentok-php このチュートリアルアプリで使用されているコードは、ルーティングされたセッションを採用しています。

コードを詳しく見ていく

アーカイブ録画の開始と停止には、サーバーサイドのコードを使用します。config.js ファイルで、 SAMPLE_SERVER_BASE_URL アプリがアーカイブ録画の開始、録画の停止、および録画済み動画の再生を行うために呼び出すWebサービスのベースURLに、変数を追加します。末尾に / ドメインの末尾で。

アーカイブアプリケーションでは、「Basic Video Chat」フォルダにあるのと同じコードを使用して、OpenTokセッションの初期化、セッションへの接続、ストリームの公開、およびセッション内のストリームへのサブスクライブを行います。まだそのブランチのコードに慣れていない場合は、クライアントの基本チュートリアル続行する前に、Web版をご確認ください。

ビデオストリームの録画を開始するには、ユーザーが「録画開始」ボタンをクリックします。これにより、app.js内のstartArchive()メソッドが呼び出されます。このメソッドは、サーバーに対してXHR（またはAjax）リクエストを送信します。録画対象のセッションのセッションIDが、JSON形式でサーバーに送信されます。startArchive() メソッドが呼び出されるとすぐに、「録画開始」ボタンは非表示になり、「録画停止」ボタンが表示されます。


function startArchive() {
  $.ajax({
    url: SAMPLE_SERVER_BASE_URL + '/archive/start',
    type: "POST",
    contentType: "application/json", // send as JSON
    data: JSON.stringify({"sessionId": sessionId}),

    complete: function() {
      //called when complete
      console.log('startArchive() complete');
    },

    success: function() {
      //called when successful
      console.log('successfully called startArchive()');
    },

    error: function() {
      //called when there is an error
      console.log('error calling startArchive()');
    },
  });

  $('#start').hide();
  $('#stop').show();
}

録画を停止するには、ユーザーが「録画停止」ボタンをクリックすると、stopArchive() メソッドが呼び出されます。このメソッドは、アーカイブを停止するためにサーバーへ Ajax リクエストを送信するという点で、startArchive() メソッドと似ています。唯一の違いは、このメソッドでは、停止対象のアーカイブのIDを、sessionIdの代わりにURLパラメータとして渡す点です。「録画停止」ボタンは非表示になり、「アーカイブを表示」ボタンが有効になります。

function stopArchive() {
  $.post(SAMPLE_SERVER_BASE_URL + '/archive/' + archiveID + '/stop');
  $('#stop').hide();
  $('#view').prop('disabled', false);
  $('#stop').show();
}

記録されたばかりのアーカイブをダウンロードするには、ユーザーは「アーカイブを表示」ボタンをクリックし、これにより viewArchive() メソッドが呼び出されます。このメソッドは、サーバーに Ajax リクエストを送信するという点で、startArchive() および stopArchive() メソッドと似ています。サーバー側のコードには、アーカイブがダウンロード可能かどうかを確認するロジックが実装されています。ダウンロード可能な場合は、アプリケーションがアーカイブページにリダイレクトされます。ダウンロードできない場合は、新しいページが読み込まれ、そのページではアーカイブがダウンロード可能かどうかを継続的に確認し、可能になった時点でアーカイブを読み込みます。

注釈

ほとんどのアプリケーションでは、アーカイブ録画の制御権は各エンドユーザーに付与されることはありません。
クライアントがストリームの公開を開始するたびに記録されるセッションを、自動的にアーカイブすることができます。
アーカイブ録画の保存先として、Amazon S3またはMicrosoft Azureを設定します。

アーカイブの詳細については OpenTok アーカイブ開発者ガイド.

おめでとうございます！Web向けアーカイブ作成チュートリアルを完了しました。
ここで作成したコードをさらに試したり調整したりすることもできますし、あるいは 次のステップ の下にある。

次のステップ

ここでの作業が終わったら、以下の役立つリソースを活用して、OpenTokアプリケーションの構築と機能強化を続けてください：