基本的な iOS クライアントの設定（Swift）

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

概要

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

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

注： このチュートリアルのコードはSwiftで書かれている。で書かれたコードのチュートリアルもあります。 オブジェクティブC.

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

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

完成予想時間：25分

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

必要条件

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

• 有効なVonage Video APIアカウント - お持ちでない場合は、以下のことが可能です。 無料体験を申し込む

• A 対応バージョン の エックスコード

• ココアポッズ

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

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

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

3. 選択 スウィフト をアプリコードの言語として使用する。

ステップ 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.swift」ファイルを開き、ファイルの先頭にOpenTokライブラリをインポートする行を追加します：

  import UIKit import OpenTok

ステップ3：認証の設定

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

1. まず、以下のコードブロックをコピーして、ViewController.swift ファイルに追加してください：

   // Replace with your OpenTok API key var kApiKey = "" // Replace with your generated session ID var kSessionId = "" // Replace with your generated token var kToken = ""

   以下の行を class ViewController と宣言した。

2. の値をハードコーディングしてコードを調整する。 kApiKey, kSessionId そして kToken.

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

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

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

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

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

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

   class ViewController: UIViewController var session: OTSession?

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

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

   override func viewDidLoad() { super.viewDidLoad() connectToAnOpenTokSession() } func connectToAnOpenTokSession() { session = OTSession(apiKey: kApiKey, sessionId: kSessionId, delegate: self) var error: OTError? session?.connect(withToken: kToken, error: &error) if error != nil { print(error!) } }

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

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

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

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

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

3. 次に、OTSessionDelegate プロトコルのメソッドを実装します。ViewController.swift ファイルの末尾、ViewController クラスの閉じ括弧の直後に、以下のコードを追加してください：

   // MARK: - OTSessionDelegate callbacks extension ViewController: OTSessionDelegate { func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") } func sessionDidDisconnect(_ session: OTSession) { print("The client disconnected from the OpenTok session.") } func session(_ session: OTSession, didFailWithError error: OTError) { print("The client failed to connect to the OpenTok session: \(error).") } func session(_ session: OTSession, streamCreated stream: OTStream) { print("A stream was created in the session.") } func session(_ session: OTSession, streamDestroyed stream: OTStream) { print("A stream was destroyed in the session.") } }

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

   • クライアントが OpenTok セッションに接続すると、 sessionDidConnect(_:) メソッドが呼び出される。

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

   • クライアントがOpenTokセッションから切断すると sessionDidDisconnect(_:) メソッドが呼び出される。

   • 別のクライアントが OpenTok セッションにストリームを配信したとき。

   • 別のクライアントが、OpenTokセッションへのストリームの配信を停止したとき。

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

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

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

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

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

   class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher?

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

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

   func sessionDidConnect(_ session: OTSession) { print("The client connected to the OpenTok session.") let settings = OTPublisherSettings() settings.name = UIDevice.current.name guard let publisher = OTPublisher(delegate: self, settings: settings) else { return } var error: OTError? session.publish(publisher, error: &error) guard error == nil else { print(error!) return } guard let publisherView = publisher.view else { return } let screenBounds = UIScreen.main.bounds publisherView.frame = CGRect(x: screenBounds.width - 150 - 20, y: screenBounds.height - 150 - 20, width: 150, height: 150) view.addSubview(publisherView) }

   アプリがセッションに接続すると、OpenTok iOS SDK で定義されている OTPublisher のインスタンスが初期化されます。コンストラクタには、OTPublisherDelegate プロトコルを実装するオブジェクトという 1 つのパラメータが渡されます。

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

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

3. 次に、OTPublisherDelegate プロトコルのメソッドを実装します。このプロトコルには、パブリッシャーに関連するイベントを処理するためのメソッドが含まれています。ViewController.swift ファイルの末尾、OTSessionDelegate 拡張の閉じ括弧の直後に、以下のコードを追加してください：

   // MARK: - OTPublisherDelegate callbacks extension ViewController: OTPublisherDelegate { func publisher(_ publisher: OTPublisherKit, didFailWithError error: OTError) { print("The publisher failed: \(error)") } }

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

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

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

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

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

   class ViewController: UIViewController { var session: OTSession? var publisher: OTPublisher? var subscriber: OTSubscriber?

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

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

   func session(_ session: OTSession, streamCreated stream: OTStream) { subscriber = OTSubscriber(stream: stream, delegate: self) guard let subscriber = subscriber else { return } var error: OTError? session.subscribe(subscriber, error: &error) guard error == nil else { print(error!) return } guard let subscriberView = subscriber.view else { return } subscriberView.frame = UIScreen.main.bounds view.insertSubview(subscriberView, at: 0) }

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

3. 次に、OTSubscriberDelegate プロトコルのメソッドを実装します。このプロトコルには、サブスクライバーに関連するイベントを処理するためのメソッドが含まれています。ViewController.swift ファイルの末尾、OTPublisherDelegate 拡張の閉じ括弧の直後に、以下のコードを追加してください：

   // MARK: - OTSubscriberDelegate callbacks extension ViewController: OTSubscriberDelegate { public func subscriberDidConnect(toStream subscriber: OTSubscriberKit) { print("The subscriber did connect to the stream.") } public func subscriber(_ subscriber: OTSubscriberKit, didFailWithError error: OTError) { print("The subscriber failed to connect to the stream.") } }

   • クライアントが OpenTok セッションに接続すると、 subscriberDidConnect(_:) メソッドが呼び出される。

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

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

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

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

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

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

3. ViewController.swift ファイルで使用したセッション ID をコピーして、ここに貼り付けてください セッションID 入力フィールド

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

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

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

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

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

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

次のステップ

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

• サーバーの設定 — 本番環境に移行する前に、認証情報を生成するためのサーバーを設定する必要があります
• Video API の基礎 — まだご覧になっていない方は、OpenTok がどのように機能するのかを詳しく理解するために、数分間お時間を割いてください
• コードサンプル — OpenTokのさまざまな機能やユースケースを紹介するサンプルアプリのコレクション
• 開発者向けガイド — OpenTokのすべての機能に関する詳細なドキュメント
• その他のチュートリアル — その他のOpenTok機能やユースケースを実装するための手順解説
• iOS SDK リファレンス — OpenTok iOS 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にサーバーをデプロイしたら、クライアント側のコードに数行追加する必要があります。代わりに connectToAnOpenTokSession 直接アクセスするには、そのパスに対してネットワーク呼び出しを行う必要があります /session まず、サーバー上で有効なOpenTokの認証情報を取得してください。

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

override func viewDidLoad() { super.viewDidLoad() let configuration = URLSessionConfiguration.default let session = URLSession(configuration: configuration) let url = URL(string: <#https://YOURAPPNAME.herokuapp.com/session#>) let dataTask = session.dataTask(with: url!) { (data: Data?, response: URLResponse?, error: Error?) in guard error == nil, let data = data else { print(error!) return } let dict = try! JSONSerialization.jsonObject(with: data, options: .allowFragments) as? [AnyHashable: Any] kApiKey = dict?["apiKey"] as? String ?? "" kSessionId = dict?["sessionId"] as? String ?? "" kToken = dict?["token"] as? String ?? "" self.connectToAnOpenTokSession() } 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, パイソン そして ルビー). このドキュメントでは、セットアップの手順や、セッションやトークンを生成するために必要なさまざまな方法、およびその他のサーバーサイド機能について解説しています。