TAMINIF’s blog

京都在住のWebエンジニア。iOSアプリもやってます。勉強会にも参加してます。

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

はじめに

ソースコード

github.com

概要

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を深く知らなくても実装できますので、興味ある方はぜひ登録してやってみてください。

Osaka Mix Leap Study #1 - Android / iOSで登壇して来ました

概要

ヤフー株式会社さんの大阪グランフロントオフィスでOsaka Mix Leapが開催されました。今回のテーマは Android / iOS です。 そこで「Mac1台でアプリを作る時代再び」というタイトルで登壇してきました。

経緯

Osaka Mix Leap - Grand Opening!!で登壇のお話をいただき、イベントが公開されたタイミングですぐ申し込みさせていただきました。 正直話すネタは決まってなかったし、最近は仕事でiOSをやってなかったのでどうしようというところはありましたが 勢い任せに資料作って話して来ました。

続きを読む

WebRTC Meetup Osaka#2で発表してきました。

概要

WebRTC Meetup Osaka#2が開催されました。今回は大阪単独開催です。 そこで「iOS11は本当にWebRTCに対応したのか」というタイトルで発表してきました。

謝罪

発表の中で「React NativeはWebRTCに対応していない」と言いましたが、正式にはreact-native-webrtcを入れれば対応可能です。 失礼いたしました。

github.com

TL;DR

iOS11がWebRTCに対応したのではなく、Safari11がWebRTCに対応しました。 Safari以外のブラウザではビデオ通話はできませんが、 DataChannelを使ってデータ送信が可能です。

続きを読む

iOS11でWebRTCに対応されたので詳細な調査を行った。

概要

iOS11でSafariがWebRTCに対応し、iOSでもP2P通信ができるようになりました。ところで、iOSにはSafari以外にもアプリ内で実装できるブラウザが存在します。
そのブラウザではどうなのか、調査しました。

TL;DR

Safari以外のブラウザでは対応していませんでした。

WebRTCに必要なもの

WebRTCを行うためには、最低でも以下二つのAPIが必要です。

  • RTCPeerConnection
    • P2P通信を行うためのAPIです。
  • getUserMedia
    • ブラウザが映像や音声を取得するためのAPIです。

そもそもWebRTCとは、これらを含むAPI(やプロトコル)の総称です。

iOS11のブラウザ

iOSには、Safari以外に三つのアプリ内実装用ブラウザが存在します。

  • WKWebView
  • SafariViewController
  • UIWebView
    • iOS11ではdeprecated

調査結果

全てのアプリ内実装用ブラウザで、RTCPeerConnectionは存在しましたがgetUserMediaは存在しませんでした。 よって、iOS11ではSafari以外ではWebRTCを使用することはできません。 アプリ内で実装する場合は、今まで通りネイティブで実装する必要があります。 時間があれば、DataChannelによる通信はできるのか調査してみたいと思います。

iOSDC 2017に参加と登壇してきました

表題にある通り、iOSDC 2017に参加してきました。ブログを書きたいけど今まで使っていたBloggerはエンジニア向けのブログではないのでずっと変えたいと思っていて、別のブログサービスを考えていたところ、昔に作ったはてなブログが残っていたのでこの機会に移転してきました。京都住まいだし。
なお、今後継続するかはわかりません。
iosdc.jp

続きを読む

SpellCheckを無効にしないまま、Atomエディタの赤点線を表示しないようにする

AtomエディタでMarkdown形式の資料や文章を書いていると、英単語で赤点線が表示されることがあります。
これはAtomに標準で入っているspell-checkというプラグインによるものなのですが、赤点線を表示させない方法としてこのプラグインを無効にする方法があります。
ただ、スペルチェック自体は有効にしておきたいが、赤点線が表示される文字がある場合に赤点線を表示させない方法をご紹介いたします。

続きを読む

PhantomJSのクローリングでwindow.openに対応する

WEBサイトのクローリングを行う一つに、PhantomJSがあります。
通常のブラウザとは違ってタブやウィンドウというものはなく、一つの画面を遷移して使用するのですが、リンク押下時にJSのwindow.openで遷移するタイプのものですと、そのまま次に進むことが出来ません。
調べてみるとstackoverflowで回答してくれている方がおられましたので、使用した方法を紹介します。

続きを読む