SwiftでWebRTC実装ハンズオン 事前準備編

# 自己紹介
### @tnoho

しがない通信会社の社員
WebRTCを使った大規模会議システムを作ってます。

WebRTC MeetUp Tokyoでしかしゃべってないので、ちょっと幅を広げようとやってきました。

---

## 宣伝

最近 Tech Night @ Shiodomeというイベントやってます。是非参加をして頂けますと幸いです！

https://techsio.connpass.com/

0. ARMとElasctic
0. TensorflowとIkalog
0. さくらの高火力とGoogleのTPU
0. DevOpsと自動化 (7月3日！)

---

# 今回作るもの

WebRTCを利用した1対1のビデオチャットアプリを作ります。  

iOS <-> iOS はもちろんですが、WebRTCの特性を生かすべくWebBrowser編の[WebRTCハンズオン](http://qiita.com/yusuke84/items/de9f0f6d221acec6fc07)の成果物とも通信できるようにして   
iOS <-> Chrome or Firefoxも目指します。

---

#今回のハンズオンで必要なもの

---

## 事前知識

このハンズオンは下記を前提とします

- Xcodeを使って実機でアプリを動かせる
- StoryBoardを使ってUI作成できる

この準備編を自力で完了できればOKです。

**無理そうな方**

[これからつくるiPhoneアプリ開発入門](https://swiftbg.github.io/swiftbook/)
と言う本を読むと丸二日くらいで出来るようになるので、週末にどうぞ。

---

## 事前準備が済んでいるソースコード
- この後の「プロジェクトの作成」の手順に従って事前準備してください
- **手順が分からなくなった/時間が足りない場合**は、[githubにアップロード](https://github.com/tnoho/WebRTCHandsOn)してありますので、Cloneしてご利用ください
    - 準備済みのソースコードを利用する場合でも`pod install`は必要です。
    - STEP毎にブランチがきってあるので、適宜ご利用ください。

---

## ハードウェア

- 持ち運べるMac
- 開発デバイスとして登録済みのiOS端末

**カメラを使います！ 
エミュレーターでは未テストです**
 
---

## ソフトウェア

- 最新版のXcode
- Cocoapod
    - 未導入のかたは[こちら](http://qiita.com/ShinokiRyosei/items/3090290cb72434852460)を参考に導入

## 環境

- ネットワーク回線(要インターネット接続)

---

# プロジェクトの作成

---

## 今回利用させて貰うライブラリ

Cocoapodで導入して利用させて頂きます

- [WebRTC](https://cocoapods.org/pods/WebRTC) 
WebRTC Native Clinetです。ChromeのWebRTC実装をiOS向けにビルドしたものになります。 
自力ビルドも可能ですが時間がかかるのでAnakros氏がビルドしたものを使います。

- [Starscream](https://github.com/daltoniam/starscream) 
WebSocket通信ライブラリです。シグナリングに利用します。シグナリングについては当日説明します。

- [SwiftyJSON](https://github.com/SwiftyJSON/SwiftyJSON) 
JSONを簡単に扱うライブラリです。

---

## プロジェクトの作成

iOSのSingleViewApplicationでつくります。
言語はもちろんSwiftでいきましょう！
<img width="722" alt="Screen Shot 2017-05-27 at 16.54.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/db409d02-9890-ce57-95e9-e7f7b6eb55f9.png">

---

## CocoaPodsの初期化と設定

```shell-session
cd <Xcodeで作成したプロジェクトディレクトリ>
pod init
```

生成されているPodfileの編集をします。

```
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'WebRTCHandsOn' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks! # <- コメントアウト解除

  # Pods for WebRTCHandsOn
  ##### 追記ここから #####
  pod 'WebRTC', '58.17.16937'
  pod 'Starscream', '~> 2.0.3'
  pod 'SwiftyJSON'
  ##### 追記ここまで #####
end
```

---

## Podインストール

編集が終わったら、Xcodeを閉じた状態で、

```shell-session
pod install
```

今後はプロジェクトディレクトリに作成されたワークスペースからXcodeを開いてください。
<img width="117" alt="Screen Shot 2017-05-27 at 21.57.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/55a72a74-0b8c-3601-47e7-a7de868f7a2d.png">


---

## プロジェクトの設定

ProjectのBuild Settings->Build Optionsから
**BitCodeは切ってください**

<img width="409" alt="Screen Shot 2017-01-27 at 20.02.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/27bba5ae-c0b6-acdc-03ea-d67efd0437d5.png">

Info.plist の
**CameraとMicをPrivacyに追加してください**

<img width="377" alt="Screen Shot 2017-01-27 at 20.03.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/d311e370-fd00-0bcc-c64b-06552e8acfb1.png">

---

# UIの作成

---

## ベースの画面と画面遷移作成

ChatViewControllerと対応するClassを作成して、
root view controller から ChatViewControllerへJoinボタンで画面遷移、Closeボタンで戻ってくるようにしてください。 
また、ConnectとHangUpボタンも作成してChatViewControllerに押した際のActionを追加しておいてください

<img width="872" alt="Screen Shot 2017-05-30 at 10.46.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/07bdea85-cbe5-1d5a-2738-2adfb8bfd5b6.png">

---

## RTCEAGLVideoViewを追加

StoryBoardで相手の映像を表示するViewを追加します。
単なるViewをChatViewControllerに追加してCustom Classに**"RTCEAGLVideoView"**と記載します。

<img width="457" alt="Screen Shot 2017-05-30 at 10.50.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/42ab0bd2-9922-272b-9bee-2702d77c8355.png">


画面に大きく表示されるように配置した上でソースコードに関連づけておいてください。

```swift:ChatViewController.swift
@IBOutlet weak var remoteVideoView: RTCEAGLVideoView!
```

importにWebRTCを追記するのも忘れずに。

```swift:ChatViewController.swift
import WebRTC
```

---

## RTCCameraPreviewViewを追加

次に自分の映像を表示するViewを追加します。
単なるViewをChatViewControllerに追加してCustom Classに**"RTCCameraPreviewView"**と記載します。

<img width="451" alt="Screen Shot 2017-05-30 at 10.52.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/89fac31b-9557-7391-6ab7-045dbcf923b1.png">

画面の隅に表示されるように配置した上でソースコードに関連づけておいてください。

```swift:ChatViewController.swift
@IBOutlet weak var cameraPreview: RTCCameraPreviewView!
```

---

## UI完成図

UIはこの状態で完成です。 Chat View Controller の View のツリー構造には注意してください。

<img width="875" alt="Screen Shot 2017-05-30 at 11.00.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/59204/a6f436a4-4a1d-0145-3c3b-6d77e4164ecf.png">

**事前準備はこれで完了です**

---

# 本編は[こちら](http://qiita.com/tnoho/items/f5afa3ba749eed9b9716)