Edited at

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

More than 1 year has passed since last update.


自己紹介


@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でいきましょう!



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を開いてください。



プロジェクトの設定

ProjectのBuild Settings->Build Optionsから

BitCodeは切ってください

Info.plist の

CameraとMicをPrivacyに追加してください



UIの作成



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

ChatViewControllerと対応するClassを作成して、

root view controller から ChatViewControllerへJoinボタンで画面遷移、Closeボタンで戻ってくるようにしてください。

また、ConnectとHangUpボタンも作成してChatViewControllerに押した際のActionを追加しておいてください



RTCEAGLVideoViewを追加

StoryBoardで相手の映像を表示するViewを追加します。

単なるViewをChatViewControllerに追加してCustom Classに"RTCEAGLVideoView"と記載します。

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


ChatViewController.swift

@IBOutlet weak var remoteVideoView: RTCEAGLVideoView!


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


ChatViewController.swift

import WebRTC




RTCCameraPreviewViewを追加

次に自分の映像を表示するViewを追加します。

単なるViewをChatViewControllerに追加してCustom Classに"RTCCameraPreviewView"と記載します。

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


ChatViewController.swift

@IBOutlet weak var cameraPreview: RTCCameraPreviewView!




UI完成図

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

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



本編はこちら