目的

• サーバ監視で困った際に誰もがすぐにアドバイス出来る環境を作りたい
  • スクリーン共有＆音声通話を同時に出来る事が最低条件
• WebRTCを利用して軽快な動作を実現したい
• PC/携帯両対応で動作を実現したい
  今回は一番最後のスマホアプリ作成について触れます。

前回/今回作成したアプリの連携動作図

前回作成したWebアプリについて

http://www.skyarch.net/blog/?p=3911

利用したライブラリ

前回同様 NTTコミュニケーションズ様のSkyWay を利用させて頂きました、今回のアプリについてもサンプルアプリをベースにほんの少しの機能拡張を行っただけです。
本当に便利なライブラリと豊富なサンプルのOSS提供をありがとうございます！

SkyWay - WebRTCを簡単＆柔軟に使えるプラットフォーム
http://nttcom.github.io/skyway/

サンプルから変更した部分

• ミュート機能の追加 (社内のH氏からとても現場目線の要望を頂きました、ありがとうございます！)
• ビデオ共有/表示は行わない (Media StreamのvideoはOffにして音声のみ利用)
• デザイン変更
  • スプラッシュや背景を変更
  • メイン機能としてスクリーン/音声共有のみ利用のため、Media画面サンプルのみ利用
  • ステータス表示機能を追加

作成した物

Androidアプリケーション

Layoutに隠れたオブジェクトの表示に悩みましたがiPhoneアプリよりスムーズに実装出来ました。

iPhoneアプリケーション

機能は一緒ですが、ミュートや接続を同一画面から行える様になっています
AutoLayoutに丸一日ハマりました、、、StoryBoardでデザインするの中々大変ですね

ミュート機能に関して

UIアップデートのAsync等処理等は空気を読んで実装し、メイン部分は下記のように実装しました。

Android

case R.id.menu_mute:
case R.id.menu_mute_release:
    item.setEnabled(false);

    if (null != _msLocal) {
        if (!_bMute) {
            _msLocal.setEnableAudioTrack(0, false);
            _bMute = true;
        } else {
            _msLocal.setEnableAudioTrack(0, true);
            _bMute = false;
        }
    }

    item.setEnabled(true);

    break;

iOS

// MicボタンがOnになった際のアクション
- (IBAction)swMicAction:(id)sender {
    if (nil == _msLocal) return;

    if ([sender isOn]) {
        [_msLocal setEnableAudioTrack:0 enable:YES];
        [self updateRecImage:YES];
    } else {
        [_msLocal setEnableAudioTrack:0 enable:NO];
        [self updateRecImage:NO];
    }
}