誰でも無料で無料通話アプリが作れるWebRTCのSkyWay iOS SDKの導入方法と使い方

LINEやskypeのような無料で通話できる機能がWebRTCの技術で実現可能です。
NTTコミュニケーションズが提供するWebRTCのiOS用SDK「SkyWay iOS SDK」を
無料で利用できるので導入方法と使い方を紹介します。

![Skyway_logo.png](https://qiita-image-store.s3.amazonaws.com/0/34488/3d9d9513-4e6e-4745-0358-ba2856cd2015.png)

#WebRTCとは？
「Webブラウザで簡単に通話や画像送信などができる仕組み」です。

Webブラウザ向けに公開されているWebRTC APIを、
iOSで使用できるようにObjective-CでラッパーしたSDKをGoogleが公開しています。
http://www.webrtc.org/native-code/ios

SkyWay iOS SDKはWebRTCを仲介するために必要なサーバをNTTコミュニケーションズが提供しているものを使用するため、サーバを準備する必要もありません。

WebRTCのiOS SDKを提供している他サービスとしてはOpenTokがあるようですが、
こちらは有償サービスのようですので、無料で使用できるSkyWayを利用します。

#SkyWay iOS SDKの導入


##開発者登録
初めにSkyWay SDKを使用するために開発者登録を行います。
https://skyway.io/ds/registration/

名前、メールアドレス、パスワードを入力します。

![スクリーンショット 2015-06-28 17.16.08.png](https://qiita-image-store.s3.amazonaws.com/0/34488/fcde2314-a15b-2565-ad88-84680f4d8121.png)

アプリがSkyWayのサーバにアクセスする際のドメイン名を記載します。
ドメイン名は自由に指定できます。
![スクリーンショット 2015-06-28 17.12.41.png](https://qiita-image-store.s3.amazonaws.com/0/34488/13560de1-6c0c-569c-aef1-abd5580c6f66.png)

登録ボタンを押して完了するとAPIキーが払い出されます。
（下のスクリーンショットの"あなたのAPIキー"のところに具体的な値、
 "設定したドメイン"に先ほど入力したドメイン名が表示されているはずです。）

![スクリーンショット 2015-06-21 20.58.42.png](https://qiita-image-store.s3.amazonaws.com/0/34488/637fdd7e-0cd0-2bca-5528-a6fc7cf64e90.png)

##SkyWay iOS SDKのダウンロード
開発者登録が完了したらSkyWay iOS SDKを入手します。
http://nttcom.github.io/skyway/
![スクリーンショット 2015-06-28 17.46.13.png](https://qiita-image-store.s3.amazonaws.com/0/34488/4e5f5431-d270-2718-8f17-daa61b7bb27b.png)
2015年6月現在、最新版のver0.1.0をダウンロードします。

![スクリーンショット 2015-06-28 17.48.07.png](https://qiita-image-store.s3.amazonaws.com/0/34488/9429c4b2-9cc4-1dc2-9715-05a5264acebf.png)

ダウンロードしたzipを解凍した中にあるSkyWay.frameworkを使用します。

#SkyWay iOSサンプルの実行
SkyWayを動かすためのコードを１から書かずとも、
NTTコミュニケーションズがgithubで公開してくれているサンプルがあるので、
そちらを利用させて頂きます。
https://github.com/nttcom/SkyWay-iOS-Sample

![スクリーンショット 2015-06-28 17.36.44.png](https://qiita-image-store.s3.amazonaws.com/0/34488/5bbcd7f7-8a30-abb2-b339-92cb4ae51b87.png)

上のスクリーン右下にある「Download ZIP」のボタンを押して、ソースコードを入手します。

ダウンロードしたzipファイルを解凍して中にある.xcodeprojを開きます。

![スクリーンショット 2015-06-28 17.39.30.png](https://qiita-image-store.s3.amazonaws.com/0/34488/0de10520-6ecd-ae88-f6c1-f9472b8db1e1.png)

Xcodeが起動して、SkyWayのサンプルのプロジェクトが開かれます。

![スクリーンショット 2015-06-28 17.56.17.png](https://qiita-image-store.s3.amazonaws.com/0/34488/b6a488cd-8d94-70f2-4f51-989fd6d29291.png)

デフォルトの状態ではSkyWay.frameworkが赤字になっており、
ビルドしてもエラーになるため、
先ほど入手したSkyWay.frameworkをドラッグ＆ドロップします。

![スクリーンショット 2015-06-28 17.58.22.png](https://qiita-image-store.s3.amazonaws.com/0/34488/33fc9e9b-d253-1c55-d7fc-6684b887d534.png)

以下の２つのファイルの上部にあるkAPIKeyとkDomainを、
先ほど取得したあなたのAPIキーとドメインの値に変更します。
・DataConnectionViewController.m
・MediaConnectionViewController.m

```objc:MediaConnectionViewController.m

static NSString *const kAPIkey = @"yourAPIKEY";
static NSString *const kDomain = @"yourDomain";

```

アプリをビルドするとトップ画面が表示されます。
「Media connection」と「Data connection」の２つのボタンがあり、
「Media connection」ボタンを押すとテレビ電話の画面に、
「Data connection」ボタンを押すとチャット画面に遷移します。

![スクリーンショット 2015-06-28 18.10.41.png](https://qiita-image-store.s3.amazonaws.com/0/34488/ab0903b9-faca-b43e-4724-12649c59a5a5.png)

MediaConnectionのテレビ電話の画面に遷移すると、
自身のIDと接続用の「Call to」ボタン、
実機であれば右下にインサイトカメラの映像が表示されます。

![Screen Shot 2015-06-28 at 22.31.21.png](https://qiita-image-store.s3.amazonaws.com/0/34488/764259c4-ff27-2296-2d97-078ab5ee5ae3.png)

画面が開かれたときにSkyWayで通信するための準備を行います。

```objc:MediaConnectionViewController.m

SKWPeerOption* option = [[SKWPeerOption alloc] init];
    
option.key = kAPIkey;
option.domain = kDomain;
    
_peer	= [[SKWPeer alloc] initWithId:nil options:option];
[self setCallbacks:_peer];


- (void)setCallbacks:(SKWPeer *)peer {
    [peer on:SKW_PEER_EVENT_OPEN callback:^(NSObject* obj) {
        // 	 peerがOPENしたときの処理
    }];

    [peer on:SKW_PEER_EVENT_CALL callback:^(NSObject* obj) {
        // peerがCALLされたときの処理
    }];
	
    [peer on:SKW_PEER_EVENT_CLOSE callback:^(NSObject* obj) {
        // peerがCLOSEしたときの処理
    }];
	
    [peer on:SKW_PEER_EVENT_DISCONNECTED callback:^(NSObject* obj) {
        // peerの接続が外れた時の処理
    }];
	
    [peer on:SKW_PEER_EVENT_ERROR callback:^(NSObject* obj) { 
        // エラー時の処理
     }];
    
}


```

１つの端末のみでアプリを使用している場合は、Call toボタンを押した時に、
Select Target's PeerIDに何も表示されません。
別端末にアプリをインストールして起動すれば、別端末のIDが表示され、
そのIDを選択することで端末同士で会話することが可能です。
画面の真ん中に相手のカメラの映像が、右下に自身のカメラの映像が表示されます。

![Screen Shot 2015-06-28 at 22.40.16.png](https://qiita-image-store.s3.amazonaws.com/0/34488/cb8485df-3c06-f591-948e-fa0aa110af5e.png)

Call toボタンを押した時に同一のドメインにする全てのpeerを探します。

```objc:MediaConnectionViewController.m

[_peer listAllPeers:^(NSArray* aryPeers) {
     // 同一ドメインにあるpeerが見つかった時の処理
}


// peerIDを選択してMediaConnection画面に戻った後
- (void)setMediaCallbacks:(SKWMediaConnection *)media {
    [media on:SKW_MEDIACONNECTION_EVENT_STREAM callback:^(NSObject* obj) {
        // Media Connectionを開いて取得したビデオ情報をSDWVideoのViewに設定する
        SKWMediaStream *stream = (SKWMediaStream *)obj;
        SKWVideo *vwRemote = (SKWVideo *)[self.view viewWithTag:TAG_REMOTE_VIDEO];
        [vwRemote addSrc:vwRemote track:0];
    }];

    [media on:SKW_MEDIACONNECTION_EVENT_CLOSE callback:^(NSObject* obj) {
        // Media Connectionをcloseする
    }];

    [media on:SKW_MEDIACONNECTION_EVENT_ERROR callback:^(NSObject* obj) {
        // Media Connectionでエラーが発生したとき
    }]; 
}

```

#まとめ
SkyWay iOS SDKを利用するための準備方法と使い方を紹介しました。
内部実装について触れることができませんでしたが、別記事で紹介しようと思います。
WebRTCをアプリで使用した導入例として、イベントでの多人数ビデオチャットやサポートセンターでの電話応対などがあるようです。
ご自身のアプリに無料通話機能を追加してみてはいかがでしょうか。

#参考
http://nttcom.github.io/skyway/
http://www.webrtc.org/native-code/ios