AndroidでWebRTCアプリ開発(開発環境準備編)

はじめに

こんにちは、ベーコン婆男です。

今までKurento Media Serverのチュートリアルデモをいくつか紹介しました。Kurentoサーバでできることのイメージを持っていただけたのではないでしょうか。

ここからは、Kurentoサーバを使ったスマホのWebRTCアプリを開発していきたいと思います。

まずは「WebRTCでマルチパーティ接続」でご紹介したKurento Room DemoアプリをAndroidとiOSで動作させたいと思います。Kurento Room DemoがAndroidとiOSで動作するようになれば、スマホやタブレットで多人数のWeb会議を行うことができるようになります。

開発に当たっては、WebViewを使ったハイブリッドアプリを採用します。理由はKurento RoomのKurento Room JavaScript Clientライブラリを利用できることと、ハイブリッドアプリで開発すればAndroidでもiOSでも基本的に同一コードで動作するためです。
(一部、AndroidとiOSでWebRTCのAPIの仕様が異なるため、OS依存のコードが必要ですが、ほとんど同一コードで動作可能です。)

まずは、Androidでの開発方法を説明し、そのあと、iOSについて説明していきます。

本記事では、Android向けのKurento Room Demoアプリを開発するにあたり、ハイブリッドアプリの開発環境の構築手順について説明します。

開発環境(Android向け)

  • 開発ターゲット:Android 4.2+
  • 開発用PC: Windows10
  • 開発ツール:Microsoft Visual Studio Code(無償)
  • 開発フレームワーク: Cordova + AngularJS + Ionic

開発環境の構築手順

以下の開発ツールをインストールします。

  1. JDK
  2. Node.js
  3. Android SDK
  4. Cordova
  5. Ionic
  6. Visual Studio Code

1.JDK~4.Cordovaのインストール

こちらのサイトでインストール手順が詳しく記載されていますので手順に従ってインストールしてください。なお、Android SDKの「SDK Tool Only」のインストーラは2018年1月時点で該当サイトに見つからなかったため、代わりにAndroid Studioをインストールしました。SDK Toolは、Android Studionの起動後のセットアップでインストールされます。

5.Ionicのインストール

Cordovaのインストールと同様にnmpでインストールします。AngularJSも一緒にインストールされます。

$ npm install -g ionic

6.Visual Studio Code(VS Code)のインストール

Visual Studio Codeのサイトからインストーラをダウンロードして、インストールしてください。必要に応じて、ソース管理のGitをインストールしてください。

また、VS Codeの拡張機能として、Cordova Toolをインストールしてください。

Visual Studio Codeは、他のエディタを利用しても構いませんが、個人的には無料で使えて、軽量なエディタとして、使いやすいと思います。

開発環境の確認

サンプルプロジェクトを作成し、ionicとandroid SDKが問題なくインストールされているか確認します。Windowsのコマンドプロンプトもしくは、Windows PowerShellから各コマンドを実行してください。

サンプルプロジェクトの作成とビルド

  • プロジェクトの作成

$ ionic start test blank --type ionic1

ionic startコマンド:ionicテンプレートで新規プロジェクトを作成
test:作成するプロジェクト名。任意のpath付きのプロジェクト名を指定。
blank:ionicのテンプレート。それ以外にタブ付きやサイドメニューを使う場合は、tab、sidemenuを指定できます。
–type ionic1:ionicのバージョンを指定。ionic-cordova(デフォルト)を指定すると最新版。

プロジェクト作成中に以下の質問があるので、それぞれ回答

Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)

→ yを選択

Install the free Ionic Pro SDK and connect your app?

→ nを選択

  • プロジェクトにandroidの設定を追加

$ ionic cordova platform add android

  • ビルド

$ ionic cordova build android

エミュレータで確認

  • エミュレータの作成
    • Android Studio > Tools > Android > AVD Manger からAVDを起動
    • AVDのCreate Virtual Devicesで、エミュレータを作成。AndroidのAPI Levelは、API Level 17以上(Android 4.2+)を選択。
  • エミュレータで実行

$ ionic cordova emulate android

実機で確認

andoroid端末を開発PCにUSBで接続

$ ionic cordova run android

トラブルシューティング

  • Android端末をPCに接続しても認識されない
    • こちらのサイトに認識方法が記載されているので参照
      (端末が認識されているかどうかは、コンソールで、$ adb devices で確認できる)
    • デバイスマネージャで、USB Composite Deviceにビックリマークがついていた場合は、一旦そのドライバを削除し、Android端末を抜き差しして認識し直す
    • Android端末側のUSBの認識タイプを、「Photo transfer(PTP)」を選択してみる
  • Androidのエミュレータが作成できない(Android Studioで、AVDアイコンが非活性)
    • Android Studioで、新規プロジェクト作成し、Event Logにエラーが表示されている場合は、そのエラーリンクをクリックして、必要なモジュールをインストール
    • Android Studioを管理者権限で実行
  • ionic startでプロジェクト作成する時エラーがでる。
    • 必要なAndroid SDK Platformのバージョンがインストールされていない可能性があるので、SDK Managerから追加。(2018年1月時点では、Android SDK Platform 26)

以上

“AndroidでWebRTCアプリ開発(開発環境準備編)” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です