はじめに

ソースコード

概要

WebRTCのSFUを一度使ってみたくて、iOSアプリのリハビリも兼ねてSwiftで書いてみました。
SkyWayのiOSのサンプルはObjective-cで書かれているのと、ダウンロードしただけでは動かないこともあって
すぐ動くものを意識して作ってみました。

SkyWayとは

webrtc.ecl.ntt.com

NTTコミュニケーションズさんが運営する、WebRTCに必要なサーバーを提供してくれるサービスです。
一定の通信量までは無料で使えるのでまず登録して使ってみるのが良いと思います。
WebRTCやる上でサーバーに手を出すとその先は沼らしいのでもしサーバーを自分で立てるなら覚悟を決める必要があります。

SFUとは

WebRTCはP2Pで端末同士を繋ぎますが、それだと接続する端末ごとにコネクション数がどんどん増えていき、端末のCPUの負担が倍々になります。
そのため、最初から多人数を接続するために中継サーバーのようなものを置き、各端末はその中継サーバーにP2Pで接続、中継サーバーは各端末に受診している映像を送信します。
そうすることで受診は端末数分のコネクションが必要ですが、送信は中継サーバー一本で対応できることになります。
その仕組みがSFUです。

実装方法

ライブラリのインストール

Cocoapodsを使用して、SkyWayライブラリをインストールします。

pod 'SkyWay'

peerの接続、ルームの入室

peerを接続し、自身のpeerIDを取得します。

// peer connection
let options: SKWPeerOption = SKWPeerOption.init()
options.key = apiKey
options.domain = domain
options.debug = .DEBUG_LEVEL_ALL_LOGS
peer = SKWPeer.init(options: options)

SFUモードでルームを作成し、ルームに入室します。

// join SFU room
let option = SKWRoomOption.init()
option.mode = .ROOM_MODE_SFU
option.stream = self.localStream
sfuRoom = peer?.joinRoom(withName: roomNamePrefix + roomName, options: option) as? SKWSFURoom

受信した映像を表示します。

sfuRoom?.on(.ROOM_EVENT_STREAM, callback: {obj in
    let mediaStream: SKWMediaStream = obj as! SKWMediaStream

    self.lock.lock()

    // add videos
    self.arrayMediaStreams.add(mediaStream)
    self.collectionView.reloadData()

    self.lock.unlock()
})

今回は、映像の表示のためにCollectionViewを使用しました。

つまづいた点

plistの設定

いつも忘れるのですが、自分の映像を取得するためにはカメラとマイクを使用する必要があります。
SkyWayを使う場合でも例に漏れず、カメラとマイクを使うためにplistに設定が必要です。

<key>NSCameraUsageDescription</key>
<string>Use Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Use Microphone</string>

離脱した映像の処理

誰かが退室した場合、その映像の受信が止まるだけで映像の削除は自分で対応する必要があります。
そうしないと、動かない映像がどんどん溜まることになります。

まとめ

実装期間約2日、時間にして5〜6時間で作成することができました。
どちらかと言うとCollectionViewに時間を取られたこともあるので、ビデオチャット自体はすぐできると思います。非常に簡単でWebRTCを深く知らなくても実装できますので、興味ある方はぜひ登録してやってみてください。

TAMINIF’s blog

大阪在住のWebエンジニア。iOSアプリもやってます。勉強会にも参加してます。最近はマネージャー色強め

SkyWayのSFUを使用したサンプルを作成しました。