基本的な iOS クライアントの設定(Objective-C)

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

概要

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

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

注: このチュートリアルのコードはObjective-Cで書かれています。で書かれたコードのチュートリアルもあります。 スウィフト.

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

完成予想時間:25分

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

必要条件

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

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

  1. Xcodeを開き、新しいプロジェクトを作成する。

  2. 選択 シングルビューアプリケーション をテンプレートとして使用する。

  3. 選択 オブジェクティブC をアプリコードの言語として使用する。

ステップ 2: OpenTok ライブラリの追加

以下の手順に従って、CocoaPods を使用して OpenTok ライブラリとその依存関係をアプリに追加してください。CocoaPods を使用したくない場合は、以下の手順に従ってください。 SDKの使い方.

  1. ターミナルでプロジェクトのルート・ディレクトリに移動し、以下を入力する:

    pod init

    プロジェクト・ディレクトリのルートにPodfileが作成されます。

  2. Podfileを編集し、以下の行をコメントの後に追加する。 # Pods for [YourProjectName] (ポッドファイルはXCodeプロジェクトには表示されないので、プロジェクトフォルダから直接開く必要があります):

    pod 'OpenTok'

  3. Podfileに変更を保存します。

  4. ターミナルで、プロジェクトのルートディレクトリに次のように入力する:

    pod install

  5. Xcode でプロジェクトを閉じます。その後、Finder で新しい .xcworkspace ファイルをダブルクリックしてプロジェクトを再度開きます(プロジェクトのルートディレクトリにあります)。

カメラとマイクにアクセスするには、Info.plistファイルを変更する必要があります:

  1. Xcodeの左側のナビゲータパネルで、プロジェクトファイル(プロジェクト名が表示されているもの)をクリックして、中央のプロジェクトパネルを開きます。

    の左側にある 一般 タブをクリックすると、プロジェクト名が表示されます。もしその名前があなたのプロジェクトと異なるもの(例えば[YourProjectName]Tests)であれば、それをクリックし、ターゲットをあなたのプロジェクト名に設定してください。

  2. パネル内で「情報」タブに切り替える。

  3. カスタムiOSターゲット・プロパティ」セクションが折りたたまれている場合は、それを展開する。

  4. 任意のキーにマウスオーバーし、+ボタンをクリックすると、新しいキーが追加されます。キーを追加する Privacy - Camera Usage Description キーを押し、次の文字列を代入する:

    $(PRODUCT_NAME) uses the camera.

    次に、+ボタンをクリックして、新しい Privacy - Microphone Usage Description キーを押し、次の文字列を代入する:

    $(PRODUCT_NAME) uses the microphone.

    アプリが最初にカメラとマイクにアクセスしたときに、これらの文字列が表示されます。

    (これらのセキュリティ機能はiOS 10で追加されました。)

ビューコントローラーにOpenTokライブラリを追加します。

  • XcodeでViewController.mファイルを開き、ファイルの先頭にOpenTokライブラリをインポートする行を追加します:

    #import "ViewController.h" #import <OpenTok/OpenTok.h>

ステップ3:認証の設定

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

  1. まず、以下のコードブロックをコピーして ViewController.m ファイルに追加します:

    // Replace with your OpenTok API key static NSString* kApiKey = @""; // Replace with your generated session ID static NSString* kSessionId = @""; // Replace with your generated token static NSString* kToken = @"";

    以下の行を @interface と宣言した。

  2. の値をハードコーディングしてコードを調整する。 kApiKey, kSessionId そして kToken (空の引用符の内側)。

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

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

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

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

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

  1. 追加 session プロパティを ViewController クラスに追加します:

    @interface ViewController() @property (nonatomic) OTSession *session; @end

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

  2. OTSession オブジェクトをインスタンス化し、その [OTSession connectWithToken: error:] メソッドで呼び出すことができます。それから viewDidLoad:

    - (void)viewDidLoad { [super viewDidLoad]; [self connectToAnOpenTokSession]; } - (void)connectToAnOpenTokSession { _session = [[OTSession alloc] initWithApiKey:kApiKey sessionId:kSessionId delegate:self]; NSError *error; [_session connectWithToken:kToken error:&error]; if (error) { NSLog(@"%@", error); } }

    について [OTSession initWithApiKey:sessionId:delegate:] メソッドは3つのパラメーターを取る:

    • お客様の OpenTok API キー
    • セッションID
    • OTSessionDelegate プロトコルを実装するオブジェクト

    について [OTSession connectWithToken: error:] このメソッドは、クライアントアプリケーションを OpenTok セッションに接続します。セッション内で音声・映像ストリームの送受信を行う前(あるいはセッションに対して何らかの操作を行う前)に、必ず接続を行う必要があります。このメソッドには 2 つのパラメータが必要です:

    • token これは、このクライアントが OpenTok セッションに接続するための認証トークンです。

    • error メソッド呼び出し時に同期的にエラーが発生した場合は、OTError オブジェクトがセットされます。

  3. ViewController インターフェース宣言を変更し、クラスが OTSessionDelegate プロトコルを使用する:

    @interface ViewController() <OTSessionDelegate>

    次に、OTSessionDelegateプロトコルのメソッドを実装する。ViewController クラスの最後(クラスの @end ステートメント):

    # pragma mark - OTSession delegate callbacks - (void)sessionDidConnect:(OTSession*)session { NSLog(@"The client connected to the OpenTok session."); } - (void)sessionDidDisconnect:(OTSession*)session { NSLog(@"The client disconnected from the OpenTok session."); } - (void) session:(OTSession*)session didFailWithError:(OTError*)error { NSLog(@"The client failed to connect to the OpenTok session: (%@)", error); } - (void)session:(OTSession*)session streamCreated:(OTStream *)stream { NSLog(@"A stream was created in the session."); } - (void)session:(OTSession*)session streamDestroyed:(OTStream *)stream { NSLog(@"A stream was destroyed in the session."); }

    このプロトコルには、セッションに関連するイベントを処理するためのメソッドが含まれている:

    • クライアントが OpenTok セッションに接続すると、 [OTSessionDelegate sessionDidConnect:] メッセージが送信される。

    • クライアントが OpenTok セッションへの接続に失敗した場合、 [OTSessionDelegate session:didFailWithError:] メッセージが送信される。

    • クライアントがOpenTokセッションから切断すると [OTSessionDelegate sessionDidDisconnect:] メッセージが送信される。

    • 別のクライアントが OpenTok セッションにストリームを配信すると、 [OTSessionDelegate session:streamCreated:] メッセージが送信される。

    • 別のクライアントが OpenTok セッションへのストリームの配信を停止すると、 [OTSessionDelegate session:streamDestroyed:] メッセージが送信される。

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

アプリケーションをデバッグしてください。アプリが OpenTok セッションに正常に接続できれば、 [OTSessionDelegate sessionDidConnect:] メソッドは、デバッグ・コンソールに表示しなければならない。

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

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

  1. 追加 publisher プロパティを ViewController クラスに追加します:

    @interface ViewController() <OTSessionDelegate> @property (nonatomic) OTSession *session; @property (nonatomic) OTPublisher *publisher; @end

    OTPublisher クラスは、OpenTok iOS SDK に定義されています。このクラスは、デバイスのカメラとマイクを使用して、OpenTok セッションのストリームを配信します。

  2. の実装を変更する。 sessionDidConnect(_:) メソッドに、ストリームをセッションに公開するコードを追加します:

    - (void)sessionDidConnect:(OTSession*)session { OTPublisherSettings *settings = [[OTPublisherSettings alloc] init]; _publisher = [[OTPublisher alloc] initWithDelegate:self settings:settings]; OTError *error = nil; [_session publish:_publisher error:&error]; if (error) { NSLog(@"Unable to publish (%@)", error.localizedDescription); return; } CGSize screenSize = [UIScreen mainScreen].bounds.size; CGRect rect = CGRectMake(screenSize.width - 150 - 20, screenSize.height - 150 - 20, 150, 150); [_publisher.view setFrame:rect]; [self.view addSubview:_publisher.view]; }

    アプリがセッションに接続すると、OpenTok iOS SDK で定義されている OTPublisher のインスタンスが初期化されます。その [OTPublisher initWithDelegate:] メソッドは、OTPublisherDelegateプロトコルを実装したオブジェクトと settingsオブジェクトがある。

    その後、このコードは OTPublisher オブジェクトを [OTSession publish:] メソッド。このメソッドは、iOSデバイスのカメラとマイクを使用して、OpenTokセッションにオーディオ・ビデオストリームを送信します。(なお、Xcodeシミュレータでは、OpenTok iOS SDKはストリームを送信する際にテスト用の動画を使用します。)

    OTPublisher オブジェクトには、 view UIView オブジェクトである `property`。このビューには、デバイスのカメラからキャプチャされた動画が表示されます。このコードでは、このビューをメインの ViewController のビューのサブビューとして追加しています。

  3. ViewController インターフェース宣言を変更し、クラスが OTPublisherDelegate プロトコルを使用する:

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate>

    次に、OTSessionDelegateプロトコルのメソッドを実装する。ViewController クラスの最後(クラスの @end ステートメント):

    # pragma mark - OTPublisher delegate callbacks - (void)publisher:(OTPublisherKit*)publisher didFailWithError:(OTError*) error { NSLog(@"The publisher failed: %@", error); }

    クライアントが OpenTok セッションへの公開に失敗した場合、OTError オブジェクトが [OTPublisherDelegate publisher:didFailWithError:] メソッドを使用する。

アプリケーションをデバッグしてください。アプリが OpenTok セッションに正常に接続されると、セッションにストリームが配信され、アプリ内で配信者の動画が表示されます。

ステップ6:他のクライアントのストリームを購読する

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

  1. 追加 subscriber プロパティを ViewController クラスに追加します:

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate> @property (nonatomic) OTSession *session; @property (nonatomic) OTPublisher *publisher; @property (nonatomic) OTSubscriber *subscriber; @end

    OTSubscriber クラスは、OpenTok iOS SDK で定義されています。このクラスは、デバイスのカメラとマイクを使用して、OpenTok セッションのストリームを購読します。

  2. の実装を変更する。 [OTSessionDelegate session: streamCreated] メソッド(OTSessionDelegate のコールバックの 1 つ)を使用して、セッション内の他のクライアントのストリームを購読するコードを組み込みます:

    - (void)session:(OTSession*)session streamCreated:(OTStream *)stream { _subscriber = [[OTSubscriber alloc] initWithStream:stream delegate:self]; OTError *error = nil; [_session subscribe:_subscriber error:&error]; if (error) { NSLog(@"Unable to subscribe (%@)", error.localizedDescription); return; } [_subscriber.view setFrame:[UIScreen mainScreen].bounds]; [self.view insertSubview:_subscriber.view atIndex:0]; }

    別のクライアントがセッションにストリームを公開すると、このメソッドが呼び出され、OTStream オブジェクトが引数として渡されます。 OTStreamクラスはOpenTok iOS SDKで定義されており、OpenTokセッション内の音声・動画ストリームを表します。このコードでは、OpenTok iOS SDKで定義されているOTSubscriberクラスのインスタンスを初期化しています。 OTSubscriber() コンストラクタには2つのパラメータが渡されます。1つは(表示したいストリームを表す)OTStreamオブジェクト、もう1つはOTSubscriberDelegateプロトコルを実装するオブジェクトです。

  3. ViewController インターフェース宣言を変更し、クラスが OTSubscriberDelegate プロトコルを使用する:

    @interface ViewController() <OTSessionDelegate, OTPublisherDelegate,OTSubscriberDelegate>

    次に、OTSessionDelegateプロトコルのメソッドを実装する。ViewController クラスの最後(クラスの @end ステートメント):

    # pragma mark - OTSubscriber delegate callbacks - (void)subscriberDidConnectToStream:(OTSubscriberKit *)subscriber { NSLog(@"The subscirber: %@ did connect to the stream", subscriber); } - (void)subscriber:(OTSubscriberKit*)subscriber didFailWithError:(OTError*)error { NSLog(@"subscriber %@ didFailWithError %@", subscriber.stream.streamId, error); }

    • クライアントが OpenTok セッションへの接続に失敗した場合、OTError オブジェクトが subscriber(_: didFailWithError:) メソッドを使用する。

ステップ7:アプリの実行

コードが完成したので、Xcodeのエミュレータでアプリを実行してみましょう。これにより、シミュレートされた配信動画が生成されます。エミュレータはウェブカメラにアクセスできないため、配信動画にはカメラの映像の代わりに、回転するティーポットのグラフィックが表示されます。

2つ目のパブリッシャー(エミュレータ上ではサブスクライバーとして表示されます)を追加するには、接続済みのiOSデバイスでアプリをもう一度実行するか、 OpenTok プレイグラウンド 以下の手順に従って、サポートされているウェブブラウザでセッションに接続してください:

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

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

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

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

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

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

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

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

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

次のステップ

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

サーバーの設定

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

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

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

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

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

Deploy

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

Node.jsの方がお好みですか? をご覧ください。 learning-opentok-node Node.js を使用した同機能のリポジトリ(Heroku デプロイボタンを含む)。

Herokuにサーバーをデプロイしたら、クライアント側のコードに数行追加する必要があります。代わりに connectToAnOpenTokSession 直接アクセスするには、そのパスに対してネットワーク呼び出しを行う必要があります /session まず、サーバー上で有効な OpenTok の認証情報を取得してください。

以下のコードをコピーして、それを用いて置き換えてください viewDidLoad ViewController.m ファイル内で:

- (void)viewDidLoad { [super viewDidLoad]; NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration defaultSessionConfiguration]; NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration]; NSURL *url = [NSURL URLWithString:<#https://YOURAPPNAME.herokuapp.com/session#>]; NSURLSessionDataTask *dataTask = [session dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) { if (!error) { NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:nil]; kApiKey = dict[@"apiKey"]; kSessionId = dict[@"sessionId"]; kToken = dict[@"token"]; [self connectToAnOpenTokSession]; } else { NSLog(@"%@", error); } }]; [dataTask resume]; [session finishTasksAndInvalidate]; }

以下を置き換える必要があります https://YOURAPPNAME.herokuapp.com 実際のHerokuアプリのURLをここに入力してください。このURLは、Herokuのウェブサイトにあるアプリページで確認できます。

上記のコードは、 /セッション エンドポイント (https://YOURAPPNAME.herokuapp.com/session)、これにより、セッションID、トークン、およびAPIキーがJSONデータとしてフォーマットされたHTTPレスポンスが返されるはずであり、その内容はその後、対応する変数に代入されます。

これは /session エンドポイントは常に同じセッションIDを返しますが、呼び出されるたびに新しいトークンを生成します。これにより、各クライアントは一意のトークンを受け取ることになります。

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

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