[webRTC for ios vol2] 繋げてみる

※ 2017/4/6 編集 Answer部分

webRTC.framework を作ってプロジェクトに入れるまでは前回
http://qiita.com/nakadoribooks/items/3af18222760c9b036ec6

Trickle ICE は次回
http://qiita.com/nakadoribooks/items/a0f19dd96b0763c35ed2

実際につなげてみる。
iOS - iOS

シグナリングはwampでやる。
websocket上でアレするプロトコル。

環境

• xcode 8.2.1
• iOS 10.2.1

成果物

github
https://github.com/nakadoribooks/webrtc-ios/releases/tag/v0.0.2

流れ

• wampサーバーを作って、Heroku に置く
• ios側を実装を作る

wampサーバーを作って、herokuに置く

wamp.rt を使う。
https://github.com/Orange-OpenSource/wamp.rt

コードはこちら。index.js と package.json の二つだけ
https://github.com/nakadoribooks/webrtc-server

設定

package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "webrtc-web",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "wamp.rt": "^0.2.0"
  },
  "dependencies": {
    "wamp.rt": "^0.2.0"
  }
}

実装

index.js

WAMPRT_TRACE = true;

var Router = require('wamp.rt');
var program = require('commander');

program
    .option('-p, --port <port>', 'Server IP port', parseInt,process.env.PORT || 8000);


var app = new Router(
    { port: program.port}
);

デプロイ

git push heroku master

以上。

ios側を実装を作る

設定

ライブラリ取り込み

wampライブラリ は swamp
名前がかっこいい。

Podfile

platform :ios,'9.0'
use_frameworks!
target 'webrtcExample' do
    pod 'Swamp', '0.2.0'
end

info.plist

パーミッション追加

info.plist

<key>NSCameraUsageDescription</key>
<string>カメラ使います</string>
<key>NSMicrophoneUsageDescription</key>
<string>マイク使います</string>

まずは大枠。

• ViewController.swift (アプリケーション)
• WebRTC.swift
• Wamp.swift

アプリケーションから WebRTC と Wamp を使って作っていきます。

WebRTC のインタフェース

WebRTC.swift

func setup(){}
func localView()->UIView
func remoteView()->UIView
func connect(iceServerUrlList:[String], onCreatedLocalSdp:@escaping ((_ localSdp:NSDictionary)->()), didReceiveRemoteStream:@escaping (()->()))
// Answer の受け取り
func receiveAnswer(remoteSdp:NSDictionary)
// Offerの受け取り
func receiveOffer(remoteSdp:NSDictionary)
// Offerを作る
func createOffer()

Wamp のインタフェース

Wamp.swift

// wampサーバーへ接続してイベント監視
func connect(onConnected:@escaping (()->()), onReceiveAnswer:@escaping ((_ sdp:NSDictionary)->()), onReceiveOffer:@escaping ((_ sdp:NSDictionary)->()))

// Offerの送信
func publishOffer(sdp:NSDictionary)

// Answerの送信
func publishAnswer(sdp:NSDictionary)

アプリケーションから使う

ViewController.swift

import UIKit

class ViewController: UIViewController {

    private dynamic func tapOffer(){
        typeOffer = true
        webRTC.createOffer()
    }

    private func connect(){

        webRTC.connect(iceServerUrlList: ["stun:stun.l.google.com:19302"], onCreatedLocalSdp: { (localSdp) in

            if self.typeOffer{
                self.wamp.publishOffer(sdp: localSdp)
            }else{
                self.wamp.publishAnswer(sdp: localSdp)
            }

        }, didReceiveRemoteStream: { () in
            self.stateWebrtcConnected()
        })

        wamp.connect(onConnected: {

            self.stateConnected()

        }, onReceiveAnswer: { (answerSdp) in

            self.webRTC.receiveAnswer(remoteSdp: answerSdp)

        }, onReceiveOffer: { (offerSdp) in

            if self.typeOffer{
                return;
            }

            self.stateReceivedOffer()
            self.webRTC.receiveOffer(remoteSdp: offerSdp)

        })

    }

}

実装詳細

WebRTC

WebRTC.swift

import UIKit

class WebRTC: NSObject, RTCPeerConnectionDelegate, RTCEAGLVideoViewDelegate {

    private var didReceiveRemoteStream:(()->())?
    private var onCreatedLocalSdp:((_ localSdp:NSDictionary)->())?

    private let factory = RTCPeerConnectionFactory()

    private var localStream:RTCMediaStream?
    private var localRenderView = RTCEAGLVideoView()
    private let _localView = UIView(frame:CGRect(x:0, y:0, width:windowWidth()/3, height:windowWidth()/3))

    private var remoteStream:RTCMediaStream?
    private var remoteRenderView = RTCEAGLVideoView()
    private let _remoteView = UIView(frame: CGRect(x: 0, y: 0, width: windowWidth(), height: windowWidth()))

    private var peerConnection:RTCPeerConnection?

    static let sharedInstance = WebRTC()

    private override init() {
        super.init()
    }

    // MARK: inerface

    func localView()->UIView{
        return _localView
    }

    func remoteView()->UIView{
        return _remoteView
    }

    func setup(){
        setupLocalStream()
    }

    func connect(iceServerUrlList:[String], onCreatedLocalSdp:@escaping ((_ localSdp:NSDictionary)->()), didReceiveRemoteStream:@escaping (()->())){
        self.onCreatedLocalSdp = onCreatedLocalSdp
        self.didReceiveRemoteStream = didReceiveRemoteStream

        let configuration = RTCConfiguration()
        configuration.iceServers = [RTCIceServer(urlStrings: iceServerUrlList)]
        peerConnection = factory.peerConnection(with: configuration, constraints: WebRTCUtil.peerConnectionConstraints(), delegate: self)
        peerConnection?.add(localStream!)
    }

    // Answer の受け取り
    func receiveAnswer(remoteSdp:NSDictionary){
        _receiveAnswer(remoteSdp: remoteSdp)
    }

    // Offerの受け取り
    func receiveOffer(remoteSdp:NSDictionary){
        _receiveOffer(remoteSdp: remoteSdp)
    }

    // Offerを作る
    func createOffer(){
        _createOffer()
    }

    // MARK: implements

    private func _receiveAnswer(remoteSdp:NSDictionary){

        guard let sdpContents = remoteSdp.object(forKey: "sdp") as? String else{
            print("noSDp")
            return;
        }

        let sdp = RTCSessionDescription(type: .answer, sdp: sdpContents)

        // 1. remote SDP を登録
        peerConnection?.setRemoteDescription(sdp, completionHandler: { (error) in

        })
    }

    private func _receiveOffer(remoteSdp:NSDictionary){

        guard let sdpContents = remoteSdp.object(forKey: "sdp") as? String else{
            print("noSDp")
            return;
        }

        // 1. remote SDP を登録
        let remoteSdp = RTCSessionDescription(type: .offer, sdp: sdpContents)
        peerConnection?.setRemoteDescription(remoteSdp, completionHandler: { (error) in

            // 2. answerを作る
            self.peerConnection?.answer(for: WebRTCUtil.answerConstraints(), completionHandler: { (sdp, error) in

                guard let sdp = sdp else{
                    print("can not create sdp")
                    return;
                }

                // 3.ローカルにSDPを登録
                self.peerConnection?.setLocalDescription(sdp, completionHandler: { (error) in

                })

                // 4. peerConnection(_ peerConnection: RTCPeerConnection, didChange newState: RTCIceGatheringState)
                //    で complete になったら Answerを送る
            })
        })
    }

    private func _createOffer(){

        // 1. offerを作る
        peerConnection?.offer(for: WebRTCUtil.mediaStreamConstraints(), completionHandler: { (description, error) in

            guard let description = description else{
                print("----- no description ----")
                return;
            }

            // 2.ローカルにSDPを登録
            self.peerConnection?.setLocalDescription(description, completionHandler: { (error) in

            })

            // 3. peerConnection(_ peerConnection: RTCPeerConnection, didChange newState: RTCIceGatheringState) 
            //    で complete になったら offerを送る
        })
    }

    private func setupLocalStream(){

        let streamId = WebRTCUtil.idWithPrefix(prefix: "stream")
        localStream = factory.mediaStream(withStreamId: streamId)

        setupView()

        setupLocalVideoTrack()
        setupLocalAudioTrack()
    }

    private func setupView(){

        localRenderView.delegate = self
        _localView.backgroundColor = UIColor.white
        _localView.frame.origin = CGPoint(x: 20, y: _remoteView.frame.size.height - (_localView.frame.size.height / 2))
        _localView.addSubview(localRenderView)

        remoteRenderView.delegate = self
        _remoteView.backgroundColor = UIColor.lightGray
        _remoteView.addSubview(remoteRenderView)
    }

    private func setupLocalVideoTrack(){
        let localVideoSource = factory.avFoundationVideoSource(with: WebRTCUtil.mediaStreamConstraints())
        let localVideoTrack = factory.videoTrack(with: localVideoSource, trackId: WebRTCUtil.idWithPrefix(prefix: "video"))

        if let avSource = localVideoTrack.source as? RTCAVFoundationVideoSource{
            avSource.useBackCamera = true
        }

        localVideoTrack.add(localRenderView)
        localStream?.addVideoTrack(localVideoTrack)
    }

    private func setupLocalAudioTrack(){
        let localAudioTrack = factory.audioTrack(withTrackId: WebRTCUtil.idWithPrefix(prefix: "audio"))
        localStream?.addAudioTrack(localAudioTrack)
    }

    // MARK: RTCPeerConnectionDelegate

    // いったんスルー
    public func peerConnectionShouldNegotiate(_ peerConnection: RTCPeerConnection){}
    public func peerConnection(_ peerConnection: RTCPeerConnection, didRemove stream: RTCMediaStream){}
    public func peerConnection(_ peerConnection: RTCPeerConnection, didChange newState: RTCIceConnectionState){}
    public func peerConnection(_ peerConnection: RTCPeerConnection, didGenerate candidate: RTCIceCandidate){ }
    public func peerConnection(_ peerConnection: RTCPeerConnection, didRemove candidates: [RTCIceCandidate]){}
    public func peerConnection(_ peerConnection: RTCPeerConnection, didOpen dataChannel: RTCDataChannel){}
    public func peerConnection(_ peerConnection: RTCPeerConnection, didChange stateChanged: RTCSignalingState){}

    public func peerConnection(_ peerConnection: RTCPeerConnection, didAdd stream: RTCMediaStream){
        print("peerConnection didAdd stream:")

        if stream == localStream{
            return;
        }

        self.remoteStream = stream

        if let remoteVideoTrack =  stream.videoTracks.first {
            remoteVideoTrack.add(remoteRenderView)
        }

        if let callback = self.didReceiveRemoteStream{
            DispatchQueue.main.async {
                callback()
            }
            self.didReceiveRemoteStream = nil
        }
    }

    public func peerConnection(_ peerConnection: RTCPeerConnection, didChange newState: RTCIceGatheringState){
        print("peerConnection didChange newState: RTCIceGatheringState, \(newState)")

        if newState != .complete{
            return;
        }

        guard let callback = self.onCreatedLocalSdp, let localDescription = WebRTCUtil.jsonFromDescription(description: self.peerConnection?.localDescription) else{
            print("no localDescription")
            return ;
        }

        callback(localDescription)
        self.onCreatedLocalSdp = nil
    }

    // MARK: RTCEAGLVideoViewDelegate

    func videoView(_ videoView: RTCEAGLVideoView, didChangeVideoSize size: CGSize) {
        print("---- didChangeVideoSize -----")

        let ratio:CGFloat = size.width / size.height

        if videoView == localRenderView{
            let parentWidth = _localView.frame.size.width
            let width = parentWidth * ratio
            localRenderView.frame = CGRect(x: (parentWidth - width) / 2, y: 2, width: width, height: _localView.frame.size.height-4)
        }else if videoView == remoteRenderView{
            let parentWidth = _remoteView.frame.size.width
            let width = parentWidth * ratio
            remoteRenderView.frame = CGRect(x: (parentWidth - width) / 2, y: 0, width: width, height: _remoteView.frame.size.height)
        }
    }

}

Util

WebRTCUtil.swift

class WebRTCUtil: NSObject {

    static func idWithPrefix(prefix:String)->String{
        return "\(prefix)_\(randomStringWithLength(len: 20))"
    }

    static func randomStringWithLength (len : Int) -> NSString {
        let letters : NSString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
        let randomString : NSMutableString = NSMutableString(capacity: len)

        for _ in 0..<len {
            let length = UInt32 (letters.length)
            let rand = arc4random_uniform(length)
            randomString.appendFormat("%C", letters.character(at: Int(rand)))
        }

        return randomString
    }

    static func jsonFromDescription(description:RTCSessionDescription?)->NSDictionary?{
        guard let description = description else{
            print("description is nil")
            return nil
        }

        return jsonFromData(data: description.jsonData())
    }

    static func jsonFromCandidate(candidate:RTCIceCandidate)->NSDictionary?{
        return jsonFromData(data: candidate.jsonData())
    }

    static func jsonFromData(data:Data)->NSDictionary?{
        let json = try! JSONSerialization.jsonObject(with: data, options: [])

        guard let result = json as? NSDictionary else{
            return nil
        }

        return result
    }

    static func answerConstraints()->RTCMediaConstraints{
        let constraints = RTCMediaConstraints(
            mandatoryConstraints: ["OfferToReceiveVideo": kRTCMediaConstraintsValueTrue,
                                   "OfferToReceiveAudio": kRTCMediaConstraintsValueTrue],
            optionalConstraints: nil)

        return constraints
    }

    static func offerConstraints()->RTCMediaConstraints{
        let constraints = RTCMediaConstraints(
            mandatoryConstraints: ["OfferToReceiveVideo": kRTCMediaConstraintsValueTrue,
                                   "OfferToReceiveAudio": kRTCMediaConstraintsValueTrue],
            optionalConstraints: nil)

        return constraints
    }

    static func mediaStreamConstraints()->RTCMediaConstraints{

        let constraints = RTCMediaConstraints(
            mandatoryConstraints: nil,
            optionalConstraints: nil)

        return constraints
    }

    static func peerConnectionConstraints()->RTCMediaConstraints {

        let constraints = RTCMediaConstraints(
            mandatoryConstraints: ["OfferToReceiveVideo": kRTCMediaConstraintsValueTrue,
                                   "OfferToReceiveAudio": kRTCMediaConstraintsValueTrue],
            optionalConstraints: nil)

        return constraints
    }

}

Wamp

Wamp.swift

import Swamp

class Wamp: NSObject, SwampSessionDelegate {

    static let sharedInstance = Wamp()

    private static let AnswerTopic = "com.nakadoribook.webrtc.answer"
    private static let OfferTopic = "com.nakadoribook.webrtc.offer"

    private var swampSession:SwampSession?
    private var onConnected:(()->())?
    private var onReceiveAnswer:((_ sdp:NSDictionary)->())?
    private var onReceiveOffer:((_ sdp:NSDictionary)->())?

    private override init() {
        super.init()        
    }

    func connect(onConnected:@escaping (()->()), onReceiveAnswer:@escaping ((_ sdp:NSDictionary)->()), onReceiveOffer:@escaping ((_ sdp:NSDictionary)->())){
        self.onConnected = onConnected
        self.onReceiveAnswer = onReceiveAnswer
        self.onReceiveOffer = onReceiveOffer

//        let swampTransport = WebSocketSwampTransport(wsEndpoint:  URL(string: "wss://nakadoribooks-webrtc.herokuapp.com")!)
        let swampTransport = WebSocketSwampTransport(wsEndpoint:  URL(string: "ws://192.168.1.2:8000")!)
        let swampSession = SwampSession(realm: "realm1", transport: swampTransport)
        swampSession.delegate = self
        swampSession.connect()

        self.swampSession = swampSession
    }

    func publishOffer(sdp:NSDictionary){
        swampSession?.publish(Wamp.OfferTopic, options: [:], args: [sdp], kwargs: [:])
    }

    func publishAnswer(sdp:NSDictionary){
        swampSession?.publish(Wamp.AnswerTopic, options: [:], args: [sdp], kwargs: [:])
    }

    // MARK: private

    private func subscribe(){
        _subscribeOffer()
        _subscribeAnswer()
    }

    private func _subscribeOffer(){
        swampSession!.subscribe(Wamp.OfferTopic, onSuccess: { subscription in
        }, onError: { details, error in
            print("onError: \(error)")
        }, onEvent: { details, results, kwResults in

            guard let sdp = results?.first as? NSDictionary else{
                print("no args")
                return;
            }

            if let callback = self.onReceiveOffer{
                callback(sdp)
            }
        })
    }

    private func _subscribeAnswer(){
        swampSession!.subscribe(Wamp.AnswerTopic, onSuccess: { subscription in

        }, onError: { details, error in
            print("onError: \(error)")
        }, onEvent: { details, results, kwResults in

            guard let sdp = results?.first as? NSDictionary else{
                print("no args")
                return;
            }

            if let callback = self.onReceiveAnswer{
                callback(sdp)
            }
        })
    }

    // MARK: SwampSessionDelegate

    func swampSessionHandleChallenge(_ authMethod: String, extra: [String: Any]) -> String{
        return SwampCraAuthHelper.sign("secret123", challenge: extra["challenge"] as! String)
    }

    func swampSessionConnected(_ session: SwampSession, sessionId: Int){
        print("swampSessionConnected: \(sessionId)")

        if let callback = self.onConnected{
            callback()
        }

        subscribe()
    }

    func swampSessionEnded(_ reason: String){
        print("swampSessionEnded: \(reason)")
    }

}

Application

ViewController.swift

class ViewController: UIViewController {

    private let webRTC = WebRTC.sharedInstance
    private let wamp = Wamp.sharedInstance

    private let videoLayer = UIView(frame: CGRect(x: 0, y: 0, width: 375, height: 375))
    private let controlButton = UIButton()
    private let infomationLabel = UILabel()
    private var typeOffer:Bool = false

    override func viewDidLoad() {
        super.viewDidLoad()

        webRTC.setup()

        view.addSubview(videoLayer)
        videoLayer.addSubview(webRTC.remoteView())
        videoLayer.addSubview(webRTC.localView())

        view.addSubview(controlButton)
        view.addSubview(infomationLabel)

        stateInitial()
    }

    private func connect(){

        webRTC.connect(iceServerUrlList: ["stun:stun.l.google.com:19302"], onCreatedLocalSdp: { (localSdp) in

            if self.typeOffer{
                self.wamp.publishOffer(sdp: localSdp)
            }else{
                self.wamp.publishAnswer(sdp: localSdp)
            }

        }, didReceiveRemoteStream: { () in
            self.stateWebrtcConnected()
        })

        wamp.connect(onConnected: {

            self.stateConnected()

        }, onReceiveAnswer: { (answerSdp) in

            print("onReceiveAnswer")

            self.webRTC.receiveAnswer(remoteSdp: answerSdp)

        }, onReceiveOffer: { (offerSdp) in

            if self.typeOffer{
                return;
            }

            print("onReceiveOffer")

            self.stateReceivedOffer()
            self.webRTC.receiveOffer(remoteSdp: offerSdp)

        })

    }

    private func changeButton(title:String, color:UIColor, enabled:Bool){
        controlButton.layer.borderColor = color.cgColor
        controlButton.setTitleColor(color, for: .normal)
        controlButton.setTitle(title, for: .normal)
        controlButton.isEnabled = enabled

        controlButton.removeTarget(self, action: nil, for: .allEvents)
    }

    private func changeInfomation(text:String, color:UIColor=UIColor.gray){
        infomationLabel.text = text
        infomationLabel.textColor = color
    }

    private func buttonAnimation(){
        controlButton.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)

        UIView.animate(withDuration: 0.2) { 
            self.controlButton.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        }
    }

    // MARK: UIEvents

    private dynamic func tapOffer(){
        typeOffer = true

        buttonAnimation()

        stateOffering()


        webRTC.createOffer()
    }

    private dynamic func tapConnect(){
        buttonAnimation()

        stateConnecting()

        connect()
    }

    // MARK: states

    private func stateInitial(){
        controlButton.frame = CGRect(x: 20, y: windowHeight()-64-20, width: windowWidth()-40, height: 64)

        controlButton.layer.cornerRadius = 5;
        controlButton.layer.borderWidth = 2
        controlButton.titleLabel?.font = UIFont.systemFont(ofSize: 22)
        changeButton(title: "Connect", color: UIColor.orange, enabled: true)
        controlButton.addTarget(self, action: #selector(ViewController.tapConnect), for: .touchUpInside)

        infomationLabel.frame = CGRect(x: 20, y: controlButton.frame.origin.y - 30 - 20, width: windowWidth()-40, height: 30)
        infomationLabel.font = UIFont.systemFont(ofSize: 20)
        infomationLabel.textAlignment = .center
    }

    private func stateConnected(){
        changeInfomation(text: "Connected!", color: UIColor.green)

        changeButton(title: "Send Offer", color: UIColor.blue, enabled: true)
        controlButton.addTarget(self, action: #selector(ViewController.tapOffer), for: .touchUpInside)
    }

    private func stateConnecting(){
        changeButton(title: "Connecting...", color: UIColor.orange, enabled: false)
        changeInfomation(text: "Connecting...")
    }

    private func stateOffering(){
        changeButton(title: "Offered", color: UIColor.gray, enabled: false)
        changeInfomation(text: "Offering", color: UIColor.blue)
    }

    private func stateReceivedOffer(){
        changeButton(title: "ReceivedOffer", color: UIColor.gray, enabled: false)
        changeInfomation(text: "CreatingAnswer...", color: UIColor.blue)
    }

    private func stateWebrtcConnected(){
        changeButton(title: "OK!", color: UIColor.gray, enabled: false)
        changeInfomation(text: "OK!", color: UIColor.green)
    }

}

その他

Extention 系を libjingle からコピペ。

参考

• http://wamp-proto.org/
• https://mike-neko.github.io/blog/webrtc-ios/