はじめに
こんにちは、ベーコン婆男です。
今まで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
開発環境の構築手順
以下の開発ツールをインストールします。
- JDK
- Node.js
- Android SDK
- Cordova
- Ionic
- 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
プロジェクト作成中に以下の質問があるので、それぞれ回答
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件の返信