LoginSignup
148
147

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-02

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

Skyway_logo.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

アプリがSkyWayのサーバにアクセスする際のドメイン名を記載します。
ドメイン名は自由に指定できます。
スクリーンショット 2015-06-28 17.12.41.png

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

スクリーンショット 2015-06-21 20.58.42.png

SkyWay iOS SDKのダウンロード

開発者登録が完了したらSkyWay iOS SDKを入手します。
http://nttcom.github.io/skyway/
スクリーンショット 2015-06-28 17.46.13.png
2015年6月現在、最新版のver0.1.0をダウンロードします。

スクリーンショット 2015-06-28 17.48.07.png

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

SkyWay iOSサンプルの実行

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

スクリーンショット 2015-06-28 17.36.44.png

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

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

スクリーンショット 2015-06-28 17.39.30.png

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

スクリーンショット 2015-06-28 17.56.17.png

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

スクリーンショット 2015-06-28 17.58.22.png

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

MediaConnectionViewController.m

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

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

スクリーンショット 2015-06-28 18.10.41.png

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

Screen Shot 2015-06-28 at 22.31.21.png

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

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) { 
        // エラー時の処理
     }];

}


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

Screen Shot 2015-06-28 at 22.40.16.png

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

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

148
147
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
148
147