Vonage Video API ハッカソンキット

ハッカソン向けアプリケーションにVonage Video APIの機能を追加するためのクイックスタートガイド

TokBoxは、 バーチャル・ハッカソン 8月1日から9月18日まで。ぜひご参加ください。 HackTokBoxのSlackグループ そして、次の #arlivevideo 始め方に関するSlackチャンネル。

クイックリンク

OpenTokとは何ですか？

Vonage社が開発したOpenTokプラットフォームを利用すれば、Webアプリやモバイルアプリに、高品質なリアルタイムの双方向ビデオ、音声、メッセージング、画面共有機能を簡単に組み込むことができます。

このプラットフォームには、Web、iOS、Android、Windows、Linux向けのクライアントサイドライブラリに加え、サーバーサイドSDKやREST APIが含まれています。

OpenTokはどのように使えばいいですか？

OpenTokプラットフォームは、Webアプリやモバイルアプリにリアルタイムの音声・ビデオチャット機能を追加できるだけでなく、ほぼあらゆる業界において革新的なユースケースを開発するために活用できる、多種多様な機能を提供しています。

世界中の企業がOpenTokを活用している例をいくつかご紹介します：

  • 人気のソーシャルアプリ ハウスパーティー OpenTokを活用して、ユーザーがモバイル端末で友人と「くつろぐ」ことができるライブ動画ルームを作成しています
  • ミネルヴァが作成した バーチャル教室 最大18人の生徒が、教師とリアルタイムでやり取りできる
  • バビロン・ヘルス スマートフォンから直接、医師やセラピスト、専門医とのリアルタイムのビデオ相談を簡単に設定できます
  • Roll20は、 バーチャル・テーブルトップ オンラインで一緒にプレイするユーザー向けのビデオチャットおよびボイスチャット機能
  • Esuranceが追加されました 動画による査定 同社のアプリにこの機能を追加し、顧客が担当者と通話しながら、事故後の損傷状況をライブ映像で共有できるようにした
  • Be My Eyes ライブ映像を通じて、視覚障害者や弱視者を世界中の健常者の支援者と結びつける
  • ダブル・ロボティクス リアルタイム映像を活用し、オフィスやその他の遠隔地においてユーザーを物理的に再現するテレプレゼンスロボットを開発した
  • OpenTokの活用事例をもっとご覧になりたい方は、当社の お客様の声 ページを参照されたい。

ハッカソン中に作成できるアイデアをいくつかご紹介します：

  • ユーザーがマッチした相手と次々とビデオチャットを行う、ビデオスピードデートアプリ
  • ジェスチャーゲームや『Cards Against Humanity』のようなソーシャルゲームを、ビデオ通話を通じて行うもの
  • 民主主義支援アプリ ― バーチャルタウンホール、抗議活動の組織化、資金調達
  • ビデオチャット機能を搭載したVRアプリケーション
  • OpenTok を以下のものと組み合わせる Clarifai ビデオ通話アプリに画像認識機能を追加する
  • OpenTokの HLSおよびRTMP配信 LivestreamやJWPlayer、あるいはRTMPサーバーにストリームを配信する機能

デモ

OpenTokの実際の動作例をご覧になりたい場合は、以下のビデオ会議デモをご覧ください：

  1. こちらへ opentokdemo.tokbox.com または、App StoreからOpenTokAppをダウンロードしてください
  2. 部屋を作成する
  3. ルームのURL（またはルーム名）を友人に共有するか、新しいタブで開くだけで、ビデオチャットを開始できます

主要コンセプト

セッションとトークン

OpenTokのビデオチャットはすべて、 セッション. セッションは、クライアント（ブラウザやモバイルアプリ）が互いの情報を公開したり購読したりできる「チャットルーム」のようなものだと考えてください。 ストリーム. セッションはOpenTokクラウド上でホストされており、各セッションには一意の セッションID. 複数のクライアント同士がチャットできるようにするには、それらを同じセッションIDに接続させるだけで済みます。

A トークン これはセッションへの「鍵」であり、特定のセッションIDに対して生成されます。各ユーザーは、セッションに接続するために、それぞれ独自のトークンを持つ必要があります。これらのトークンは（開発者が指定した）一定期間経過後に失効しますが、セッション自体は失効しません。

セッションIDやトークンは通常、 サーバーサイド OpenTok アプリケーションのコンポーネントですが、デモや概念実証（PoC）を構築するだけなら、ご自身の Account - 「プロジェクトの概要」ページにアクセスし、画面を下にスクロールして プロジェクトツール.

接続、発行者、購読者

クライアントがセッションIDとトークンを取得すると、 接続 クライアントサイドSDKのコードを使用してセッションに接続します（以下を参照）。この接続により、セッションおよびすでに接続済みのすべてのクライアントにイベントが送信されます。接続が完了すると、クライアントは 出版 そのカメラとマイクからの音声・映像ストリーム

クライアントがストリームを公開すると、そのセッションに接続しているすべてのクライアントにイベントが配信されます。イベントを受信すると、クライアントは サブスクライブ 新しく公開されたストリームへ。

セッション、トークン、ストリームなどに関する詳細については、当社の 「Video API の基礎」ページ.

APIキーを取得する

  1. 無料Accountに登録して、APIキーを取得してください こちら。 登録の際は、必ずハッカソンのプロモーションコードをご利用ください。
  2. Accountにログインしたら、 新しいプロジェクトを作成する. アプリの開発中は、 プロジェクトの概要 セッションIDやトークンを生成するため（詳細は後述）。

クライアントの設定（サンプルアプリ付き）

OpenTokアプリのクライアント側は、OpenTokアプリケーションの機能の大部分を担っています。クライアントは、セッションIDとトークン（上記参照）を使用して、Webブラウザやモバイルアプリからユーザーをセッションに接続します。

基本的なビデオチャット

Web上で最も基本的なクライアントサイドコードを設定する方法については、当社の ハロー・ワールド. モバイル開発については、当社のクライアントサイドのサンプルアプリをクローンまたはダウンロードして、 iOS Swift, iOS Objective-C そして アンドロイド GitHub上で。

Acceleratorのサンプルアプリと追加機能

高度な機能を備えた、より洗練されたクライアントサイドを比較的短期間で立ち上げるには、当社の「Accelerator サンプルアプリ」をご利用いただけます。 ウェブ, iOSそして アンドロイド GitHub上で。

これらのサンプルアプリには、基本的な音声・ビデオチャット機能に加え、ユーザーコントロール、組み込みのテキストチャット機能、および画面共有やアーカイブの設定を行うためのスターターコードが含まれています。これらのサンプルアプリの設定や高度な機能に関する詳細については、GitHub上のREADMEをご覧ください。これらのサンプルのUIは、CSSを使用して自由にカスタマイズすることができます。

その他のモバイルサンプル

モバイル端末でマルチパーティチャットやカスタム音声・動画ドライバー、その他の特殊なユースケースを実装したい場合は、他にもいくつかのサンプルアプリをご用意しています。 アンドロイド, iOS Swiftそして iOS Objective-C

詳細はこちら

OpenTok アプリケーションのクライアントサイドコードの設定に関する詳細については、当社の 開発者ガイド.

サーバーの設定（任意）

OpenTokアプリのサーバーサイドコンポーネントは、アプリケーションユーザー向けのセッションIDやトークンを生成するために使用されます。デモや概念実証（PoC）を構築しているだけの場合、サーバーサイドコンポーネントは必要ないかもしれません。その場合は、プロジェクトの「プロジェクト概要」ページでセッションIDやトークンを生成することができます。 Video APIアカウント （プロジェクトを開くか作成し、画面を下にスクロールして「`Project Tools`」まで進めばよい）。

サーバーサイドコンポーネントの設定にご興味がある場合は、各サーバーサイドSDK言語に対応したクイックスタート用サンプルアプリを以下にご紹介します：
PHP | ジャワ | .NET | ノード | ルビー | パイソン

サーバーサイドコードの設定に関する詳細については、当社の 開発者ガイド.

拡張現実とライブ動画

ARやライブ動画の活用を始めたい方は、以下のサンプルをご覧ください：
ARKit
ARKit フレームのメタデータ

高度な機能

OpenTokは、基本的なビデオチャットに加え、さまざまな高度な機能にも活用できます。当社の Acceleratorのサンプルアプリ 上記には、これらの機能の一部（画面共有、アーカイブ、テキストチャット）を実装するためのコードが含まれていますが、高度な機能の設定に関する詳細情報が記載された役立つガイドを以下にご紹介します：

画面共有：
について Acceleratorのサンプルアプリ 上記には画面共有機能のスターターコードが含まれていますが、以下の画面共有ガイドもぜひご参照ください。 ウェブ, iOSそして アンドロイド. 通常、ウェブ上での画面共有を行うには、 カスタムブラウザ拡張機能を作成する、ただし、アプリのデモにlocalhostのみを使用している場合は、この既製の拡張機能を利用できます。

その他の高度な機能に関するガイド：
アーカイブ - チュートリアル | ガイド
テキストチャット
ブロードキャスト
SIP相互接続 （OpenTokセッションとSIP通話／電話機能を連携させる）

これらの機能やその他の機能の実装に関する詳細については、当社の 開発者ガイド. また、当社の APIリファレンスドキュメント 特定のメソッドや呼び出しに関する情報については。

ヒントとコツ

  • Webアプリを素早くデモするには、ローカルWebサーバーを使うのが最適です。もしお持ちでない場合は、よく使われているサービスとして以下のようなものがあります。 XAMPP そして MAMP. あるいは、PythonのSimpleHttpServer、PHPのWebサーバー、あるいはNode.jsアプリを使用することもできます。
  • 複数のデバイス（例：ノートパソコンやスマートフォンなど）からローカルホストに接続したい場合は、 ングロク 数分で設定を完了し、安全なパブリックURLを通じてローカルホストにアクセスできるようになります。
  • OpenTokに対応しているブラウザの一覧をご覧いただけます これ
  • Chrome では、HTTPS 経由での WebRTC 通信のみが許可されています

ヘルプを得る

アプリの開発に関してご質問やサポートが必要な場合は、迅速な対応を受けるために、以下の方法でご連絡ください：

  • Vonageのイベントにご参加の際は、会場にいる当社の技術チームまでお気軽にお声かけください。
  • お問い合わせ