https://d226lax1qjow5r.cloudfront.net/blog/blogposts/making-video-calls-using-vonage-video-and-flutter/flutter_videocall_1200x600.png

Vonage VideoとFlutterを使ってビデオ通話をする

最終更新日 July 6, 2021

所要時間:1 分

Flutterはますます人気を集めているので、2つのデバイス間でビデオ通話ができるシンプルなアプリケーションを作ることにした。アプリを作るために使用した2つの技術は、FlutterとVonage Video SDKsです。これらの技術について簡単に説明しよう:

  • Flutter- Android、iOS、Linux、Mac用のクロスプラットフォームアプリケーションを開発するために使用されるオープンソースのUIソフトウェア開発キット。主なプログラミング言語は Dart.

  • ビデオ- は、さまざまなデバイス間でビデオ通話を構築するために使用されます。使用されているプログラミング言語は コトリンであり スウィフトである。

このアプリケーションはBasic-Video-Chatアプリケーション(Basic-Video-Chatアンドロイド版/ Basic-Video-Chat iOS).アプリケーションの主な機能は以下の通りです:

  • Vonage Videoセッションへの接続

  • セッションにオーディオ・ビデオストリームを公開する

  • 他のクライアントのオーディオ・ビデオ・ストリームを購読する

注:アプリケーションのソースコードは GitHub.

Flutterはここでのメインテクノロジーだ。AndroidやiOS上で動作するモバイルアプリケーションを構築するための基盤だ。FlutterはUIの管理と表示を担当し、アプリケーションロジックを含む。こうすることで、アプリケーションのロジックは両プラットフォームで一度だけ書くことになる。

ボンネットの下では、このFlutterアプリケーションは以下を使用する。 Android VonageビデオSDKそして iOS Vonage Video SDKを使用します。(を使用します(Android/iOSネイティブプロジェクト経由):

Flutter application under the hood

プラットフォーム(Android、iOS)のネイティブコードはFlutterの メソッドチャネルメソッドコールを使う。MethodChannelはFlutterとネイティブコード(AndroidのネイティブプロジェクトとiOSのネイティブプロジェクトに追加)の間でメッセージを送るためのブリッジとして機能する。これにより、ユーザーをログインさせ、ビデオ通話をするためのビデオセッションをセットアップすることができる:

Flutter application flow

Flutterはアプリのネイティブ(Android / iOS)部分にメッセージを送ることができ、アプリのネイティブ部分はFlutterにメッセージを送り返すことができる。Flutterは initSessionメソッドを呼び出し apiKey, sessionIdtokenをネイティブコードに渡し、Vonage Videoセッションを開始する。ネイティブコードはログイン成功(またはエラー)をアプリのFlutter部分に通知し、Flutter側のコードはUIを更新する。

注:FlutterアプリはAndroidまたはiOSアプリとしてパッケージ化できますが、両方同時にパッケージ化することはありません。ターゲットプラットフォームがAndroidに設定されている場合、MethodChannelはAndroidネイティブアプリコードと通信します。ターゲットプラットフォームがiOSに設定されている場合、MethodChannelはiOSネイティブアプリコードと通信します。

アプリケーションを実行するには アプリケーションを実行するにはを実行するには、Flutterをインストールする必要がある。これはプラットフォームによって異なります。 詳しい説明.

注意:必ず flutter doctorを実行してローカルフラッターセットアップを Verify してください。

Vonage Videoセッションにログインするには、以下のアカウントが必要です。 Vonage Videoアカウントそして initSession, apiKeyおよび sessionId.これらの値は ビデオダッシュボード.ファイルを開き main.dartファイルを開き、対応する変数でこれらの値を使用します:

static String API_KEY = "";
static String SESSION_ID = "";
static String TOKEN = "";

モバイルアプリを起動してビデオ通話を開始します。

注意:あなたは デベロッパープレイグラウンドを使って、Flutterアプリを実行しているモバイルデバイスと同じセッションに接続することができます。

概要

まだいくつかの欠点がある。 欠点が、FlutterとVonage Videoの全体的な統合は非常にスムーズだ。Flutterのネイティブパッケージがなくても、Vonage VideoのモバイルSDKを利用し、AndroidやiOSデバイスで動作する本格的なFlutterアプリを素早く作ることができる。

シェア:

https://a.storyblok.com/f/270183/384x384/8ae5af43bb/igor-wojda.png
Igor Wojdaヴォネージの卒業生