シェア:
){kind=small}
Liz AcostaはVonageのDeveloper Advocateです。映画学生からマーケター、エンジニア、デベロッパー・アドボケイトという彼女のキャリア・パスは型破りに見えるかもしれないが、デベロッパー・リレーションズにとってはごく一般的なものだ！ピザ、植物、パグ、Pythonが大好き。
FlaskとVonageでPythonビデオ会議Webアプリを作る
所要時間：2 分
このチュートリアルでは、Flask と Vonage Video API を使ってブラウザベースのビデオ会議アプリを作成します。
2020年の世界的なパンデミック（世界的大流行）により、私たちの交流方法が大きく変化した後、ビデオ会議は瞬く間に世界中の人々の主要なコミュニケーション手段のひとつとなった。他国の同僚に会うにせよ、他都市の友人に会うにせよ、ブラウザベースのビデオ会議は今や日常生活の一部となっている。
技術が成熟するにつれ、ユーザーの期待も高まっている。かつては複雑であったものが、今では合理的で洗練されたものとなり、最新のビデオ会議ソリューションには、高品質で信頼性の高いリアルタイム体験の提供が期待されています。
このチュートリアルでは、Python、JavaScript、Vonage Video APIを使用して最小限のビデオ会議アプリを構築する方法を学びます。 Video API を使って最小限のビデオ会議アプリを構築する方法を学びます。.このハンズオンガイドでは、シンプルな WebRTC ビデオアプリの作成を通して、Python ビデオ会議の背後にあるコアコンセプトを紹介します。
アプリのビルドに入る前に、サンプルアプリで使われている用語や技術について説明します。すでにこれらの概念に慣れている場合は、次のチュートリアルに進んでください。 VonageとPythonを使ったビデオ会議Webアプリ構築チュートリアルに進むか、GitHubからサンプルアプリをクローンして READMEに従って素早く実行することもできます。
このチュートリアルを完成させるために、Vonage以外の技術的なコンセプトやツールに頼りますが、それはソフトウェア開発の他の分野で役に立つかもしれません。
このチュートリアルでは、Webアプリケーションを作成するために Flaskを使ってWebアプリケーションを作成します。フレームワークとして、開発者はWebブラウザで動作するWeb技術を使用してソフトウェアアプリケーションを迅速にスピンアップすることができます。このチュートリアルでは、その使いやすさとミニマルなアプローチからFlaskを選びました。他のPython Web開発フレームワークとは異なり、シンプルなビデオ会議ソリューションを作成するのに必要なものだけを提供してくれます。
このチュートリアルでは、ウェブアプリケーションを作成し、あなたのマシン上でローカルに実行します。ローカルで実行するため、公共のインターネットからはアクセスできず、Webアプリケーションにアクセスできなければ、ビデオ会議に参加者を追加できません。そこでトンネリングの登場です。トンネリングは、一時的または静的な公開URLを通じて、ローカルサーバーを公開インターネットに公開します。 ngrokは、このサービスを提供するソフトウェアプラットフォームだ。
ユーザーは高品質のビデオ通話を期待している。 途切れることなくユーザーは、高品質なビデオ通話が途切れることなく機能することを期待している。しかし、舞台裏では、そのような体験を提供することはそれほど簡単ではない。
リアルタイム・ビデオは本質的に予測不可能である。参加者は、異なるデバイス、異なるネットワーク、世界の異なる地域から参加する。モバイル・デバイスがWi-Fiからセルラーに切り替わったり、企業のファイアウォールが特定のUDPパスをブロックしたり、ローエンドのラップトップがCPU負荷で苦戦したりすることもある。
Vonage Video APIプラットフォームは、リアルタイムの高品質なインタラクティブビデオ、Messages、画面共有などをWebやモバイルアプリケーションに組み込むことを可能にします。これを実現するために、Video API は音声ビデオ通信に WebRTC を使用しています。Video API を使用する上で、理解しておくべき重要な用語と概念は次のとおりです：
セッション:セッションとは、コネクションとストリームの論理的なグループである。同じセッション内の接続は、メッセージを交換することができる。セッションは、参加者同士が交流できる「仮想の部屋」と考えてください。
接続:セッションに参加し、メッセージを送受信できるエンドポイント。コネクションは、接続されていてメッセージを受信できるか、切断されていてメッセージを受信できないかのどちらかである。
ストリーム:メディアストリームは2つのコネクション間を流れる。これは、交換されるメディアを含む実際のバイトを指す。メディアは、オーディオのみ、またはオーディオとビデオで構成できます。スクリーンシェアやカスタムストリームを作成することもできます。
トークン:Video API プラットフォームは認証にトークンを使用するので、プラットフォーム上でユーザーを作成することを心配する必要はありません。このチュートリアルでは、トークンを使って Video セッションの参加者をその場で作成します。
出版社:クライアントがメディア・ストリームを公開すること。
購読者:メディアストリームを受信するクライアントを指す。
シグナリング:これは、セッションに接続されたクライアント間でテキストやデータをメッセージとして送信することを指します。これらのメッセージにより、開発者は基本的なテキストチャットを構築したり、あるクライアントから別のクライアントに指示を送ったり、その他の価値ある体験を作り出すことができます。
これらの重要な用語や概念についてさらに深く知りたい方は、以下をご覧ください。 Video API用語集を参照するか Video API ドキュメントまたは以下の Video をご覧ください。
コアとなる概念を理解したところで、実際にビデオ会議アプリを構築して応用してみましょう。
このチュートリアルでは、ビデオセッションの作成、接続の追加、リアルタイムチャットのためのシグナリングの使用など、ビデオ会議アプリの基本的な構成要素に焦点を当てます。バックエンドにはPythonとFlaskを使用し、ビデオセッションの作成と調整にはJavaScriptを使用します。
このチュートリアルを完了するには、以下のものが必要です：
Python 3.8+
ngrok ngrokアカウントとインストール
ビデオ会議に参加する友人
組み立てを始める前に、すべてのことを整理しておこう。
Video APIアプリケーションを作成する必要があります。ここでいうアプリケーションとは、以下のようなものである。 Video API に必要な設定やセキュリティ情報を格納するコンテナ。.アプリケーションを作成する際に、次のオプションを切り替えます。 Videoオプションを 機能セクションで
アプリケーションを作成するには アプリケーションの作成ページでアプリケーションの名前を定義します。
Webhooksを使用するAPIを使用する場合は、秘密鍵が必要です。Generate public and private key "をクリックすると、自動的にダウンロードが始まります。この鍵は紛失すると再ダウンロードできません。この鍵は紛失しても再ダウンロードできません。 private_<あなたのアプリID>.key.この鍵はAPIコールの認証に使用できます。 注意：アプリケーションを保存するまで、キーは機能しません。
必要な機能（Voice、Messages、RTCなど）を選択し、必要なWebhook（イベントURL、応答URL、受信メッセージURLなど）を提供します。これらはチュートリアルで説明します。
保存してデプロイするには、"Generate new application "をクリックして設定を確定します。これでアプリケーションはVonage APIで使用する準備が整いました。
Video APIは、あなたのWebhookにリクエストできるようにアクセスできなければならない。そのため、エンドポイントURLは公衆インターネットに公開されていなければならない。そのために ngrok がある。
別のターミナル・ウィンドウで実行する：
ngrok http 5000このコマンドは、ローカルサーバーがポート5000にトンネルする公開URLを生成します。公開URLに注意してください：
Forwarding https://0a6ec0a950eb.ngrok-free.app -> http://localhost:5000 ngrokの有料プランを使用していない限り、生成された公開URLは永続的ではないことに注意してください。つまり ngrokコマンドを実行するたびに、結果の URL は変更されます。これを防ぐには、このチュートリアルの間、ngrokを起動したままにしておいてください。
すべての準備が整ったところで、いよいよビルド開始だ。
ここでは、このチュートリアルを完了するために取る手順の概要を説明します：
1.Python仮想環境を作成し、アクティベートする
2.依存関係のインストール
3.Vonageクライアントを確立し、バックエンドでウェブアプリのルートを定義する。
4.セッションを作成し、コネクションを追加し、フロントエンドでのチャットシグナルの扱い方を定義する。
5.コードを実行し、試してみる。
このチュートリアルのコードは GitHub の にあります。にあります。
プロジェクト・ディレクトリを作成し、そこにディレクトリを変更する：
mkdir sample-video-conference && cd sample-video-conference
パイソン 仮想環境を使うと、システムの残りの部分から隔離された場所にパッケージをインストールすることができます。これはシステム全体の混乱や、異なる Python バージョンやパッケージとの衝突を防ぐのに役立ちます。仮想環境については ブログ記事.
プロジェクト・ディレクトリで、以下のコマンドを実行して仮想環境を作成し、有効化します：
virtualenv venv && source venv/bin/activate
このチュートリアルで必要な依存関係をインストールするために、以下を実行する：
pip install Flask python-dotenv vonage
環境変数(しばしば "env vars "と呼ばれる)は、プログラムの外部に保存する変数で、プログラムの実行方法に影響を与えることができる。例えば、APIのキーとシークレットを含む環境変数を設定することができる。そうすると、APIに接続する際にその変数を使用することになります。環境変数については
Vonageクライアントをインスタンス化するには、作成したVonageアプリケーションのIDとVonage秘密鍵が必要です。
アプリケーション ID は、開発者ダッシュボードのこのチュートリアル用に作成した Video アプリケーションの設定で確認できます。
秘密鍵の生成とダウンロードもここで行います。開発者ダッシュボード Applicationsメニューでメニューで、このチュートリアル用に作成したアプリケーションをクリックし、次に 編集.編集ウィンドウが開いたら、"公開鍵と秘密鍵を生成する "というボタンをクリックします。これにより、秘密鍵が拡張子 .key.ファイルがダウンロードされたら、プロジェクト・ディレクトリのルートに移動します。
このファイルは秘密にしておき、漏洩する可能性のある場所では共有しないでください。このコードをどこかに公開するつもりなら、秘密鍵ファイルをあなたの .gitignoreファイルに追加してください。
ルート・ディレクトリに .envという名前のファイルを作成し、以下の変数を追加する：
VONAGE_APPLICATION_ID=your-application-id
VONAGE_PRIVATE_KEY_PATH=path-to-your-private-key-file
このアプリケーションのバックエンドは、Vonage クライアントのインスタンス化、Web アプリルートの定義、ビデオセッションの開始、ビデオ会議参加者のトークンの生成を担当します。
という名前のファイルを作成し appy.pyというファイルを作成し を追加する。.
このコードを本番環境にデプロイしたいとは思わないだろうが、Video API の動作を素早く体験することができる。その方法は、2つのルートを持つ最小限のウェブアプリをスピンアップすることだ：
ルート
/ルートは、Video セッションへの参加を促す Web ページを表示します。ビデオストリームを公開するには、「管理者として参加」オプションを選択する必要があります。セッションに参加する "ボタンをクリックした後、ルートは各参加者のトークンを生成します。
/api/generate-sessionルートは各参加者のトークンを生成し、参加者がadminであるかどうかに基づいて、ストリームを公開するか購読します。
次のコードは、Vonageクライアントを使用してビデオセッションを開始するところです：
session_options = SessionOptions(media_mode=MediaMode.ROUTED)
video_session = vonage_client.video.create_session(options=session_options)
session_id = video_session.session_id各セッションは特定のIDで識別される。このIDは、参加者間の接続とストリームを作成するために使用される。セッションにはさまざまなオプションがあり、このセッションでは ルーティングメディアモードを使用する。このセッションでは ルーティングより多くの参加者に適しており、アーカイブも可能です。セッションとセッションオプションの詳細については ドキュメント.
このコードで各参加者のトークンが作成されます：
token_options = TokenOptions(session_id=session_id)
token = vonage_client.video.generate_client_token(token_options).decode("utf-8")セッションに接続するユーザーを認証するために、コードはアプリケーションIDとともにトークンを渡さなければなりません。トークンは、セッションに接続しようとするユーザごとに生成されます。トークンを生成する際には、セッション ID を含める必要があります。トークンとトークン・オプションの詳細については ドキュメントを参照してください。.
その session_id, tokenと application_idは、フロントエンドに埋め込まれた Video を作成するために、以下のコードで他のデータとともにフロントエンドに渡されます：
return jsonify(
{
"session_id": session_id,
"token": token,
"is_admin": admin,
"name": name,
"application_id": application_id,
"success": True,
}
)
Video API を使用すると、高品質のインタラクティブ動画、音声、Messages、画面共有を Web アプリやモバイル アプリに簡単に埋め込むことができます。
ジャバスクリプト
ルート・ディレクトリに static.その中に staticディレクトリに app.jsという名前のファイルを作成し ファイルを作成します。.
Vonageでどのようにセッションが作成され、処理されるかを説明しましょう：
1.を使用して application_idと session_idでセッション・オブジェクトが作られる：
session = OT.initSession(applicationId, sessionId);2.クライアントが管理者であれば、メディアストリームが公開される：
session.connect(token, (error) => {
if (error) {
console.error('Error connecting:', error);
return;
}
if (isAdmin === "true") {
const publisher = OT.initPublisher('publisher', { name: name });
session.publish(publisher);
}
});3.メディアストリームが発行されると、セッションオブジェクトは streamCreatedイベントをディスパッチし、新しいコネクションをサブスクライブする：
session.on('streamCreated', (event) => {
session.subscribe(event.stream, 'subscriber');
});4.一方、以下のコードでは、クライアント間のチャットを実装するために、シグナルイベントを作成し、リッスンしている：
session.on('signal', (event) => {
const messages = document.getElementById('messages');
messages.innerHTML += `<p>${event.data}</p>`;
});HTML
でバックエンドで作成したルートに対して、フロントエンドでレンダリングするテンプレートが必要です。 app.pyで作成したルートに対して、フロントエンドでレンダリングするテンプレートが必要です。これが index.htmlファイルです。このコードでは Video API 固有のものは何も使用していないので、ここでは説明しません。をコピーして templates ディレクトリとその内容をコピーしてください。
ルート・ディレクトリで以下のコマンドを実行し、アプリを立ち上げる：
python app.pyブラウザで、ngrokが生成した公開URLに移動します。ビデオセッションに参加」を促すウェブページが表示され、名前を入力するテキストフィールドがあるはずです。ビデオストリームを公開したい場合は、必ず 管理者として参加するをクリックしてください。 セッションに参加.
デバイスのビデオフィードを表示するページにリダイレクトされるはずです。 注:最初にカメラとマイクの許可を与える必要があるかもしれません。
このVideoフィードが確立された状態で、同じngrokのURLを友人に送り、次のように参加してもらう。 参加させる。を選択せずに 管理者として参加する.これにより、管理者のカメラからのビデオのみを見ることができるように、その人が加入者としてセッションに追加されます。
チャット機能はすべての参加者に機能します。フィールドにテキストを入力して 送信をクリックすると、参加者全員にテキストが表示されます。
このチュートリアルでは、Python、JavaScript、Vonage Video API を使って最小限のブラウザベースのビデオ会議アプリケーションを構築する方法を学びました。その過程で、バックエンドを素早く構築するための Flask や、ローカル環境をインターネットに公開するための ngrok といった、重要なサポート概念も学びました。また、Video API のコアとなる構成要素であるセッション、トークン、コネクション、ストリームについて説明し、それらがどのように連携してリアルタイムの通信を可能にするのかを見ていきました。シンプルな Flask バックエンドと JavaScript を使用したフロントエンドを組み合わせることで、ライブビデオと基本的なチャット機能をサポートする動作するアプリを作成しました。ここから、モデレーションコントロール、録画、画面共有、またはユースケースに合わせて強化された UI/UX のような、より高度な機能でこの基盤を拡張することができます。この Video API プレイグラウンドを使えば、ブラウザ上で簡単にさまざまな機能を試すことができます。
Vonageビデオを始めるためのベストプラクティス:Vonage Video APIを利用した機能豊富なビデオアプリケーションを構築する前に、ぜひご検討ください。
Vonage Video APIとReactによるビデオアーカイブ:エクスペリエンス・コンポーザーを含む、Vonage Video API による 4 つの動画アーカイブ・モードについて説明します。
リアルタイム品質モニタリングでユーザーのVideo体験を向上させる:MOSはビデオ通話の優れたビデオ品質指標です。Vonage Videoがどのようにこれを使用してユーザー体験を向上させているかをご覧ください。
Vonage Video APIを始めよう: Vonage Video APIを使って新しいアプリケーションを作成するのに数分しかかかりません。当社の Node SDK と Video Web SDK を使用して、ゼロからアプリケーションを作成する手順を説明します。
ご質問がある場合、またはあなたが作っているものを共有したい場合は、こちらをクリックしてください。
登録する 開発者ニュースレター
フォローする X（旧ツイッター）最新情報
チュートリアルを見る YouTubeチャンネル
LinkedInの LinkedIn の Vonage デベロッパーページ
最新の開発者向けニュース、ヒント、イベント情報をお届けします。