自己紹介

@tnoho

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

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


宣伝

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

https://techsio.connpass.com/

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

今回作るもの

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

iOS <-> iOS はもちろんですが、WebRTCの特性を生かすべくWebBrowser編のWebRTCハンズオンの成果物とも通信できるようにして

iOS <-> Chrome or Firefoxも目指します。


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


事前知識

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

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

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

無理そうな方

これからつくるiPhoneアプリ開発入門
と言う本を読むと丸二日くらいで出来るようになるので、週末にどうぞ。


事前準備が済んでいるソースコード

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

ハードウェア

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

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


ソフトウェア

  • 最新版のXcode
  • Cocoapod
    • 未導入のかたはこちらを参考に導入

環境

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

プロジェクトの作成


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

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

  • WebRTC
    WebRTC Native Clinetです。ChromeのWebRTC実装をiOS向けにビルドしたものになります。
    自力ビルドも可能ですが時間がかかるのでAnakros氏がビルドしたものを使います。

  • Starscream
    WebSocket通信ライブラリです。シグナリングに利用します。シグナリングについては当日説明します。

  • SwiftyJSON
    JSONを簡単に扱うライブラリです。


プロジェクトの作成

iOSのSingleViewApplicationでつくります。
言語はもちろんSwiftでいきましょう!
Screen Shot 2017-05-27 at 16.54.15.png


CocoaPodsの初期化と設定

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を閉じた状態で、

pod install

今後はプロジェクトディレクトリに作成されたワークスペースからXcodeを開いてください。
Screen Shot 2017-05-27 at 21.57.53.png


プロジェクトの設定

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

Screen Shot 2017-01-27 at 20.02.26.png

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

Screen Shot 2017-01-27 at 20.03.53.png


UIの作成


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

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

Screen Shot 2017-05-30 at 10.46.01.png


RTCEAGLVideoViewを追加

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

Screen Shot 2017-05-30 at 10.50.20.png

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

ChatViewController.swift
@IBOutlet weak var remoteVideoView: RTCEAGLVideoView!

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

ChatViewController.swift
import WebRTC

RTCCameraPreviewViewを追加

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

Screen Shot 2017-05-30 at 10.52.55.png

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

ChatViewController.swift
@IBOutlet weak var cameraPreview: RTCCameraPreviewView!

UI完成図

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

Screen Shot 2017-05-30 at 11.00.17.png

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


本編はこちら