基本的な Windows クライアントの設定

このチュートリアルでは、Vonage Video API を使用する基本的な Windows クライアントを設定する手順を順を追って説明します。

概要

Vonage Video API を使用するすべてのアプリケーションには、以下の両方が必要です。 クライアント そして サーバー コンポーネント。クライアントサイドのコードは、エンドユーザーの Windows アプリに読み込まれ、OpenTok の機能の大部分を処理するもので、これには以下が含まれます。 接続 に対する セッション, 出版 オーディオ・ビデオ ストリーム をセッションに追加し 購読 を他のクライアントのストリームに追加する。クライアント、サーバー、セッションの詳細については、以下を参照のこと。 OpenTokの基本.

このチュートリアルでは OpenTok Windows SDK、Windows 向けの OpenTok クライアントサイドライブラリを使用して、リアルタイムの双方向ビデオアプリケーションを迅速かつ簡単に構築できます。

このチュートリアルでは、以下の項目について解説します：

• 必要条件
• ステップ1：新しいプロジェクトの作成
• ステップ 2: OpenTok Windows SDK の追加
• ステップ3：認証の設定
• ステップ4：セッションへの接続
• ステップ 5: サンプルアプリの UI を調整する
• ステップ 6: セッションへのストリームの公開
• ステップ 7: 他のクライアントストリームの購読
• ステップ 8：アプリの実行とインストーラーの作成
• 次のステップ
• サーバーの設定

完成予想時間：25分

このチュートリアルをスキップしたい？ 完成したWindowsクライアントのコードは ベーシック・ビデオチャット のフォルダにあります。 Windowsサンプルアプリレポ をGitHubにアップした。このレポには、コードを実行し探索するためのドキュメントを含むREADMEが含まれている。

必要条件

このチュートリアルを完成させるために必要なもの：

• 有効なVonage Video APIアカウント - お持ちでない場合は、以下のことが可能です。 無料体験を申し込む
• マイクロソフトビジュアルスタジオ

ステップ1：新しいプロジェクトの作成

1. Visual Studioを開き 新規 > プロジェクト より ファイル メニューがある。
2. の中で 新プロジェクト ダイアログボックスで ウィンドウズ > WPFアプリケーション (Visual C#)、アプリケーションの名前を付け、次に OK ボタンをクリックする。

ステップ 2: OpenTok Windows SDK の追加

NuGet を使用して、以下のいずれかの方法で OpenTok Windows SDK を読み込んでください：

• Visual Studioの ツール メニューセレクト NuGetパッケージマネージャ > ソリューション用NuGetパッケージの管理を検索する。 OpenTok.Client.OpenTok.Client パッケージをビルドするプロジェクトに割り当てます。

• Visual Studio Package Manager コンソールで以下のコマンドを入力します：

  コピー

  Install-Package OpenTok.Client
  

• .NET Coreコマンドラインツールを使用して、OpenTokパッケージをインストールします。プロジェクト・ディレクトリ内から以下のコマンドを実行します：

  コピー

  dotnet add package OpenTok.Client
  

アプリケーションに OpenTok の Windows クラスを追加します。Visual Studio で、 MainWindow.xaml.cs ファイルに追加する。そして、以下のステートメントを追加する：

using OpenTok;

これにより、アプリで使用する OpenTok Windows SDK のクラスがインポートされます。

ステップ3：認証の設定

OpenTokセッションに接続するには、クライアントは認証情報（つまり、 APIキー, セッションIDそして トークン.本番アプリケーションでは、これらの認証情報は サーバー、ですが、作業を効率化するため、ひとまず値を直接記述することにします：

1. MainWindowクラスに、APIキー、セッションID、トークンを格納する静的変数を追加します。また、ログ・メッセージの識別子とパーミッションのための定数も追加します：

   public partial class MainWindow : Window { public const string API_KEY = ""; public const string SESSION_ID = ""; public const string TOKEN = "";

2. の値をハードコーディングしてコードを調整する。 API_KEY, SESSION_ID そして TOKEN.

   これを行うには、ご自身のアカウントにログインして Video APIアカウント, 新しいOpenTok APIプロジェクトを作成するか、既存のOpenTok APIプロジェクトを使用し、プロジェクトページに移動して、ページを下へスクロールして プロジェクトツール セクションを参照してください。そこから、セッションIDとトークンを手動で生成することができます。プロジェクトのAPIキーと、生成したセッションIDとトークンを使用してください。

重要だ： テストや開発中は、引き続きAccountからセッションIDやトークンの値を取得できますが、本番環境に移行する前にサーバーを設定する必要があります。これについては、 次のステップ このチュートリアルの最後で。

セッション、トークン、サーバーの詳細については、以下を参照してください。 ビデオAPIの基礎.

ステップ4：セッションへの接続

次に、OpenTokセッションに接続します。セッションに音声・映像ストリームを配信したり、他の参加者のストリームを視聴したりするには、この操作を先に完了しておく必要があります。

1. 追加 Session メンバ変数をMainWindowクラスに追加します（下記で追加した最後の行のすぐ後です）。 ステップ3):

   Session Session;

   Session クラスは、OpenTok Windows SDK で定義されています。このクラスは OpenTok セッションを表しており、セッションとやり取りするためのメソッドが含まれています。

2. の中で MainWindow() コンストラクタ関数の次の行を追加します。 InitializeComponent() メソッドを使用する：

   Session = new Session(Context.Instance, API_KEY, SESSION_ID); Session.Connected += Session_Connected; Session.Disconnected += Session_Disconnected; Session.Error += Session_Error; Session.StreamReceived += Session_StreamReceived; Session.Connect(TOKEN);

   このコードでは Session() コンストラクタでセッションオブジェクトをインスタンス化します。コンストラクタは3つのパラメータを取ります：

   • このアプリケーションに関連付けられた Windows コンテキスト
   • OpenTokのセッションID
   • トークン

   次の行では、セッション関連のイベントハンドラを追加している。(これらは次のステップで実装します）。

   について Session.Connect() のメソッドを使用する。 session このオブジェクトは、クライアントアプリケーションを OpenTok セッションに接続します。セッション内で音声・映像ストリームを送受信する前（あるいは、セッションに対して何らかの操作を行う前）に、接続を行う必要があります。この Connect() このメソッドは、1つのパラメータを受け取ります。それは、このクライアントがOpenTokセッションに接続するための認証トークンです。

3. 次に、SessionListenerインターフェースのメソッドを実装します。以下のコードをMainWindowクラスの最後（クラスを閉じる括弧の前）に追加します：

   private void Session_Connected(object sender, EventArgs e) { Console.WriteLine("Connected to session."); } private void Session_Disconnected(object sender, EventArgs e) { Console.WriteLine("Disconnected from session."); } private void Session_Error(object sender, Session.ErrorEventArgs e) { Console.WriteLine("Session error:" + e.ErrorCode); } private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Console.WriteLine("Stream received in session."); }

   • クライアントが OpenTok セッションに接続すると、 Session.Connected イベントが発生する（そして Session_Connected() イベントハンドラが呼び出される）。

   • クライアントがOpenTokセッションから切断すると Session.Disconnected イベントが送信される（そして Session_Disconnected() メソッドが呼び出される)。

   • クライアントが OpenTok セッションへの接続に失敗した場合、 Session.Error イベントが送信される（そして Session_Error() メソッドが呼び出される)。

   • 別のクライアントが OpenTok セッションにストリームを配信すると、 Session.StreamReceived イベントが発生する（そして Session_StreamReceived() イベントハンドラが呼び出される）。

   今のところ、これらのイベントが発生すると、アプリはデバッガー・コンソールに書き込む。

アプリケーションをデバッグしてください。アプリが OpenTok セッションに正常に接続できれば、 Session_Connected() メソッドはデバッグコンソールにログを記録する。

ステップ 5: サンプルアプリの UI を調整する

デフォルトでは、OpenTok Windows SDK は、VideoRenderer クラス（OpenTok Windows SDK で定義されている）を使用して、配信および受信する動画をレンダリングします。このクラスは、Windows Presentation Framework コントロールに動画をレンダリングします。

このサンプル・アプリケーションでは、アプリケーションの MainWindow.xaml ファイルでターゲット・コントロールを定義します。Visual Studio* でそのファイルを開き、XML を編集して OpenTok 名前空間を追加し VideoRenderer オブジェクトをメイン Grid アプリケーションのコントロール：

<Window x:Class="BasicVideoChat.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:BasicVideoChat" xmlns:OpenTok="clr-namespace:OpenTok;assembly=WPFVideoRenderer" mc:Ignorable="d" Title="MainWindow" Height="960" Width="640"> <Grid> <OpenTok:VideoRenderer x:Name="PublisherVideo" HorizontalAlignment="Center" Height="480" VerticalAlignment="Top" Width="640"> </OpenTok:VideoRenderer> <OpenTok:VideoRenderer x:Name="SubscriberVideo" HorizontalAlignment="Center" Height="480" VerticalAlignment="Bottom" Width="640"> </OpenTok:VideoRenderer> </Grid> </Window>

ステップ 6: セッションへのストリームの公開

アプリが OpenTok セッションに接続した際、カメラとマイクを使用して、そのセッションに音声・動画ストリームを送信するようにしたい：

1. 追加 Publisher メンバ変数をMainWindowクラスに追加する。 Session メンバー変数)：

   Publisher Publisher;

   Publisher クラスは、OpenTok Windows SDK に定義されています。

2. を変更する。 MainWindow() コンストラクタに、パブリッシャー用のビデオキャプチャを初期化し、パブリッシャー オブジェクトでそのビデオキャプチャを使用するコードを含めることができます：

   Publisher = new Publisher(Context.Instance, renderer: PublisherVideo);

   このコードでは Publisher() コンストラクタを使用して、Publisher オブジェクトをインスタンス化します。コンストラクタには、Windows アプリケーション コンテキストとビデオ レンダラー（MainApplication.xaml ファイルで定義）の 2 つのパラメータが渡されます。

3. を変更する。 Session_Connected() メソッドに、ストリームをセッションに公開するコードを追加します：

   private void Session_Connected(object sender, System.EventArgs e) { Session.Publish(Publisher); }

   アプリケーションがセッションに接続すると（そして SessionConnected イベントが発生した場合 Session_Connected イベントハンドラは Session.Publish() メソッドを呼び出し、Publisher オブジェクトを渡します。これにより、アプリはビデオキャプチャ機能のマイクとカメラを音声ソースおよび映像ソースとして使用し、OpenTok セッションに音声・映像ストリームを配信します。

アプリケーションをデバッグしてください。このアプリは、パブリッシャーのローカル動画プレビューを表示し、OpenTokセッションへの接続に成功すると、そのセッションにストリームを送信します。

注： このアプリケーションでは、デフォルトのビデオキャプチャ機能を使用します。この機能では、公開されるストリームの映像および音声ソースとして、システムのデフォルトのカメラとマイクが使用されます。OpenTok Windows SDK で定義されている IVideoCapturer および IVideoRenderer インターフェースを実装するクラスを作成することで、カスタム動画キャプチャ機能や動画レンダラーを実装できます。サンプルコードについては、 vonage-video-windows-sdk-サンプル GitHubのレポにある。

ステップ 7: 他のクライアントストリームの購読

私たちはクライアントに次のことを望んでいる。 サブスクライブ セッション内の他のクライアントのストリームにアクセスする(または表示する)：

• の実装を変更する。 Session_StreamReceived() メソッドに、他のクライアントのストリームを購読するコードを含める：

  private void Session_StreamReceived(object sender, Session.StreamEventArgs e) { Subscriber subscriber = new Subscriber(Context.Instance, e.Stream, SubscriberVideo); Session.Subscribe(subscriber); }

他のクライアントがセッションにストリームをパブリッシュすると Session.StreamReceived メッセージが送信されると、このメソッドが呼び出されます。OpenTok Windows SDK で定義されている Stream オブジェクトが、イベントハンドラに渡されます。これは、OpenTok セッション内の音声・動画ストリームを表しています。

このコードは、OpenTok Windows SDK で定義されている Subscriber クラスのインスタンスを初期化します。Subscriber クラスは、クライアントが他のクライアントによって公開されたストリームを購読（閲覧）するために使用するオブジェクトを定義しています。

について Subscriber() コンストラクターは3つのパラメーターを取る：

• Windowsアプリケーションのコンテキスト。
• Streamオブジェクト。
• サブスクライバオブジェクトのレンダラー。このアプリでは、レンダラーは SubscriberVideo オブジェクトが定義されている。

ステップ 8：アプリの実行とインストーラーの作成

セッションに2つ目のストリームを追加するには（エミュレータにサブスクライバーとして表示されます）、別のWindowsデバイスで2回目のアプリを実行するか、または OpenTok プレイグラウンド 以下の手順に従って、サポートされているウェブブラウザでセッションに接続してください：

1. こちらへ OpenTok プレイグラウンド (にログインしている必要があります。 Account)

2. を選択する。 既存のセッションに参加する タブ

3. ViewController.mファイルで使用したセッションIDをコピーし、次の場所に貼り付けます。 セッションID 入力フィールド

4. クリック セッションに参加する

5. 次の画面で 接続をクリックする。 ストリームを公開する

6. パブリッシャーのオプション（必須ではありません）を調整できます。 続ける に接続し、公開と購読を開始する。

この時点で、ウェブカメラから公開されるストリームと、エミュレータから公開されるストリームが表示されるはずです。エミュレータに戻ると、エミュレートされた画面に新しいパブリッシャーが表示されているはずです。

アプリケーションのインストーラーを作成する場合は、Visual C++ Redistributable for Visual Studio 2015 をインストーラー・パッケージとして追加します。アプリケーションのアーキテクチャに応じて、x86 バージョン、x64 バージョン、またはその両方を使用してください。

おめでとうございます！基本的なWindowsクライアントのセットアップ」チュートリアルを終了しました。
ここで開発したコードを、アプリケーションのクライアント・サイドに適用するために、引き続き弄ったり調整したりすることができる。 サーバーコンポーネント を参照）。 サーバーの設定 下記参照）。

このサンプルアプリの完成版は ベーシックビデオチャット のフォルダにある。 vonage-video-windows-sdk-サンプル レポをGitHubに追加した。この完成版では、セッションID、トークン、APIキーを（ハードコードされた値を使う代わりに）ウェブサービスから読み込むコードが追加されている。

次のステップ

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

• サーバーの設定 — 本番環境に移行する前に、認証情報を生成するためのサーバーを設定する必要があります
• Video API の基礎 — まだご覧になっていない方は、OpenTok がどのように機能するのかを詳しく理解するために、数分間お時間を割いてください
• コードサンプル — OpenTokのさまざまな機能やユースケースを紹介するサンプルアプリのコレクション
• 開発者向けガイド — OpenTokのすべての機能に関する詳細なドキュメント
• その他のチュートリアル — その他のOpenTok機能やユースケースを実装するための手順解説
• Windows SDK リファレンス — OpenTok Windows SDK に関連するメソッドやイベントについて詳しく見る

サーバーの設定

上記のチュートリアルでは、皆さんに 認証情報をハードコードする。しかし、本番環境のアプリケーションでは、 sessionId そして token コード内の値は、アプリケーションサーバーによって生成され、クライアントに渡される必要があります。 本番環境のアプリに認証情報をハードコーディングすべきではない理由をいくつか挙げます：

• トークンは（生成時に指定された）一定時間が経過すると有効期限が切れるため、定期的に新しいトークンを生成する必要があります
• 新しいセッションを動的に作成することはできないため、アプリを利用するすべてのユーザーは1つの「ルーム」に閉じ込められた状態になってしまいます。

ハードコーディングされた値を使ってアプリケーションのテストを続けることもできますが、サーバーをセットアップする段階になったら、その方法にはいくつかあります：

サーバーオプション 1 — ワンクリックで Heroku 上にシンプルな REST サーバーを起動する

これはおそらく、サーバーを立ち上げて稼働させる最も手っ取り早い方法ですが、機能には制限があります。以下の「Heroku」ボタンをクリックするだけで、Herokuのウェブサイトに遷移し、OpenTokのAPIキーとAPIシークレットの入力を求められます。これらの値は、プロジェクトページで取得できます。 Video APIアカウント. HerokuのAccountをお持ちでない場合は、登録する必要があります（無料です）。

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

Node.jsの方がお好みですか？ をご覧ください。 learning-opentok-node Node.js を使用した同様の機能を提供するリポジトリ（Heroku へのデプロイボタン付き）。

Herokuにサーバーをデプロイしたら、サーバーから認証情報を取得するために、プロジェクトにコードを追加する必要があります。 このコードは、以下のURLに対してHTTP GETリクエストを送信する必要があります。 https://YOURAPPNAME.herokuapp.com/session. レスポンスの本文はJSON形式で、OpenTok APIキー、セッションID、およびトークンを定義するプロパティが含まれています：

{
    "apiKey": "8675309",
    "sessionId": "2_MX20NTMyODc3Mn5...",
    "token": "eyJhbG..."
}

サーバーオプション 2 — サーバー SDK を使用して一から構築する

オプション 1 では、クライアントへの認証情報の送信に REST エンドポイントを使用していますが、これは OpenTok を使用してサーバーを実装する多くの方法のうちの 1 つにすぎません。より高度なカスタマイズをご希望の場合は、OpenTok の サーバー SDK のドキュメント お好みのサーバーサイド言語用（利用可能な言語は PHP, Node.js, ジャワ, .NET, パイソン そして ルビー). このドキュメントでは、セットアップの手順や、セッションやトークンを生成するために必要なさまざまな方法、およびその他のサーバーサイド機能について解説しています。