27
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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

by tnoho
1 / 21

自己紹介

@tnoho

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

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


宣伝

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

  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

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


本編はこちら

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
27
Help us understand the problem. What are the problem?