シェア:
){kind=small}
エンリコはVonageの元チームメンバーです。ソリューション・エンジニアとして、技術的な専門知識で営業チームをサポートした。 クラウド、スタートアップ、新技術に情熱を注ぐ。イタリアのWebRTCスタートアップの共同設立者。仕事以外では、旅行とできるだけ多くの奇妙な食べ物を味わうのが好き。
Vonage APIを使用したセキュアなビデオ予約アプリケーションの構築
所要時間：1 分
今日の世界では、Videoは多くのユースケースにおいて必要不可欠で強力なツールです。遠隔地から教室に参加したり、医師と相談したり、あるいは緊急時に居場所を共有したり。これらは、開発者が私たちのプラットフォームを使って構築したもののほんの一例にすぎませんが、それらすべてに少なくとも共通しているのは、ビデオを使用してパーソナライズされた体験を提供するソリューションであるということです。
このブログ記事では、Videoアポイントメントのリファレンス・アプリケーションを紹介します。このアプリケーションは、様々な実装の基礎を提供するために作成しました。このアプリケーションにどのように機能を追加し、どのように異なるユースケースに適用できるかを紹介します。
いくつかの簡単なステップで、Videoアポイントメントを作成し、アポイントメントリンクを含むメッセージを参加者に送信し、もちろんVideo会話を開始することができるソリューションを実現できます。また、ルック＆フィールの観点からカスタマイズする方法も学ぶことができます。
サンプルアプリケーションの全コードは GitHub.
ソリューション・エンジニアとして、私たちは開発者が私たちのAPIを使ってどのようなものを作るかを学ぶことができます。それがユニークなユースケースであれ、クールな統合であれ、あるいはバグの回避策であれ。
私たちの仕事のひとつは、お客様が構築するもののパターンを特定することであり、そこからリファレンス・アプリケーションを作成します。私たちの目標は、開発時間を短縮し、より良い出発点を提供することです。
ビデオ予約アプリケーションを考えたとき、私たちは3つの必要不可欠な機能を考えた：
事前にアポイントメントを取り、その日時を厳守すること。
参加者に、通話に参加するためのリンクをメッセージで送る。
基本的なビデオ通話のUIには、参加者自身がミュートしたり、画面を共有したりできるボタンがあります。
このプロジェクトで私たちが期待したのは、お客様にVideoプロジェクトのスタートを切っていただくことでした。
アプリケーションの上に実装できるユースケースはいろいろあり、その方法を説明する。
この記事では、2つのコンポーネントをカスタマイズする方法を紹介する：Vue-WebアプリケーションとExpress-NodeJSアプリケーションサーバーです。このチュートリアルを終えると、基本的で設定可能なビデオ予約アプリケーションが完成します。
注:GitHubに「Herokuにデプロイ」ボタンを追加しました。
これから構築するアプリケーションについて、簡単な医療ユースケースを想定してみましょう。通常、次のような役割があります：臨床医、医師、患者です。
臨床医がアプリケーションを使って患者と医師のアポイントメントを設定すると、2つのリンクが生成される。1つのリンクは患者に送られ、もう1つのリンクは医師に送られるか、もしくは医師のカレンダーに登録されます。
患者へのリンクはSMSやWhatsAppのようなメッセージング・チャンネルで送ることができる。時間が来たら、患者は予約に参加し、医師もリンクを使って予約に参加する。
これらのリンクは、アプリケーションでビデオ診察を開始します。ソリューションをどのように実装するかによって、各役割は異なる権限を持つかもしれません。例えば、医師はいつでも予約に参加できるのに対し、患者はスケジュールされた時間にのみ参加することができます。
ビデオAPIアカウント
初心者レベルのNodeJS経験
初級レベルのVue経験
Vonage Video APIはWebRTCベースのソリューションです。ブラウザ、Android、iOS、Windows、macOSなど多くのプラットフォームをサポートしています。私たちはAPIを使用して、異なる役割間のライブ・ビデオ・セッションを作成します。APIの詳細については Vonage Video Developer Centerでご覧いただけます。.
このアプリケーションには、'OpenTok API' プロジェクトが必要です。まだお持ちでない場合は Video ダッシュボード.
Vonage Messages APIはSMS、WhatsApp、Viberなど複数のメッセージングチャネルへのゲートウェイです。1つ以上のチャンネルでメッセージを送受信することができます。私たちはこのAPIを使用して、予約の詳細が記載されたSMSメッセージをユーザーに送信します。APIについての詳細は デベロッパーポータル.
アプリケーションで使用する電話番号が必要です。アカウントダッシュボードの Accountダッシュボードを使用して、このプロジェクトで使用する電話番号を検索してください。
を使用することをお勧めします。 ngrokを使用してサーバーと Visual Studio Codeを使うことをお勧めします。
サンプルリポジトリをクローンし、プロジェクトフォルダに移動します：
git clone https://github.com/nexmo-se/opentok-secure-appointment.git
cd opentok-secure-appointmentこの example.envファイルには、プロジェクトを実行するために必要なパラメーターがすべて含まれている。設定後、コピーする必要がある：
cp example.env .envコンフィギュレーションを見てみよう：
Messages APIの認証情報を提供する必要があります。 ダッシュボード.に加えて API_KEYと API_SECRETに加えて、アカウントにリンクした電話番号を含める必要があります。
この番号は、アプリケーションがアポイントメントの詳細をSMSメッセージで送信する際に使用します。
Messages API のセットアップと同様に、以下のように API_KEYと API_SECRETを含める必要があります。これらは 動画ダッシュボード.
セッションには2つのタイプがあります。 SESSION_MEDIA_MODEリレー型とルーティング型です。
中継セッションはピアツーピアで、メディアはVonageのメディアサーバーを経由しません。一方、Routedはピアツーピアではなく、メディアはVonageのメディアサーバを経由してストリーミングされます。
中継セッションはレイテンシーが低いが、参加者は3人までとすることを推奨する。また をサポートしない。また、アーカイブなどの一部の機能はサポートされない。一方、ルーティングされたセッションは、非常に低帯域幅の状況で はうまく動作しないが、より多くの機能をサポートし、多くの参加者を扱うことができる。
クライアント・アプリケーションは、サーバーの URL で設定する必要があります。この URL は、サーバーをどのようにデプロイするかによって決まります。アプリケーションの開発とテストにはngrokを使用することをお勧めします。
さらに、サンプル・アプリケーションには設定可能な2つのUIコンポーネントがあります。LOGO_URL& COMPANY_NAMEそれぞれ)です。
ビデオセッションは、デフォルトでカメラがオフのときに、音声のみで参加することができます。アプリケーションに最適なものを検討し、それに応じて AUDIO_ONLYフラグを設定します。
最後になりますが、あなた自身のSMSテンプレートを作成したいかもしれません。予約日、予約時間、予約リンクです。これは医師がそのオプションを選択した場合、新しい予約がスケジュールされた時に送信されるSMSメッセージです。
というようなものだ：
You have an appointment set for {date} at {time}, please click this link to join! {link}あるいは
An appointment to our clinic has been set for you for {date}, at {time}. To join the video call please use this link: {link}私たちが指定したパラメータを使用して、あなた自身のニーズに合わせてカスタマイズすることができます。
ボーナス:メソッドを編集して、さらにパラメータを追加します。 sendAppointmentMessage(appointment, number, shouldSendSMS)メソッドを Booking.vue.医師の名前を追加して、より個人的なものにすることもできる。
セットアップが終わったら、プロジェクトをインストールします。 npm install.それから npm run start-dev.
これでサーバーはクライアントと一緒にローカルで実行されるはずです。にアクセスしてください。 localhost:3000(またはあなたが選んだポート)にアクセスし、最初の予約をします！時間と "患者 "にSMSを送るかどうかを選択できます。アポイントメントが作成されたら、ホストまたはゲストのURLをコピーしてビデオ会議に参加することができます。
もし、クライアントのルートを詳しく見たいのであれば、以下にある ./src/client/App.vue.また、アプリケーションにさらにルートを追加することもできます。
技術的に詳しい説明は クライアントREADMEと サーバーREADME.
デフォルトのルートは /booking.
臨床医として、あなたのエントリーポイントは次のようになります。 https://SERVER_ADDRESS/booking(SERVER_ADDRESSはあなたがアプリケーションをデプロイした場所です)。このページでは予約のスケジューリングや以前にスケジューリングされた予約のリストを見ることができます。
予約時にSMSで患者にリンクを送ることもできます。また、予約表から "リンクをコピー "することもできます。WhatsAppのような別のチャネルを統合したり、あるいは予約について通知するために電話をかけてくる音声合成ボットのようなものを統合することで、エクスペリエンスを向上させることができます。
すべてのアポイントメントは2つのリンクを持つ: ホストリンクとゲストリンク。ヘルスケアのユースケースでは、ホストURLは医師に送られ、ゲストURLは患者に送られます。
アポイントメントのスケジューリングに成功すると、通話の双方がリンクを使用してアポイントメントに参加できます。ミュート、Videoの公開解除、画面の共有ができます。
これまでのセクションで、簡単なビデオ会議アプリケーションの作り方を学び、それを医療に応用する方法についても説明した。
ヘルスケアは古典的な実装ですが、それだけではありません。このプロジェクトに着手したとき、私たちはeラーニング、金融、就職面接など、多くのユースケースを念頭に置いていた。私たちの目標は、これらのユースケースの最大公約数を見つけることでしたが、まだまだやるべきことがあることは分かっています。
コミュニケーションがますますマルチチャンネル化するにつれ、ソリューションも複雑化しています。ビデオはこの記事の中核ですが、ソーシャル・メッセージング、SMS、CRMなどの他のチャネルと組み合わせると、さらに強力になります。
当社のAPIで何ができるかについてもっと知りたい場合は、以下をご覧ください。 Vonage API.