iOS에 스위프트로 만들어진 WebRTC 클라이언트 앱을 실행해보고, 가지고 놀아보자.

안드로이드 포트폴리오로 구현하였던 WebRTC를 iOS에도 구현하기 위해 여러 자료들을 찾고 있었다.

미디어서버는 안드로이드 구현때와 마찬가지로 구글의 미디어서버를 쓰기로 하고.. 클라이언트 부분을 찾아봤다.

처음으로 찾은 곳은 구글의 AppRTC 예제인데, 오브젝 C로 작성이 되어있다. 아직은 스위프트로 제공할 계획은 없다고 한다.

(사실, 이 예제에서, WebRTC를 구현하는 코어 부분은 그냥 오브젝티브 C 그대로 나두고, 뷰 컨트롤러 부분만 스위프트로 변환시켜 연동해도 충분히 실행 될 것이다.)

물론 이를 가져다가 붙여 써도, 오브젝씨랑 스위프트는 호환이 되기 때문에, 실행은 되지만.. 나는 아직 스위프트를 공부하고 있는 터라 의미가 없었다.

다른 클라이언트 예제를 찾아보았다. ISBX에서 만든 예제, 그 외들... 모두 다 오브젝 씨로 작성이 되어있다.

오브젝 씨를 배울까, 아니면 오브젝 씨를 스위프트로 바꿔주는 사이트에서 돈을 주고 구글 공식 예제를 다 스위프트로 바꿔버릴까... 하다가

아주 좋은 예제 하나를 찾게 되었다.

ISBX에서 만든 AppRTC 예제를 스위프트 4 버전으로 바꾼 예제이다.

(사실, 위의 예제는 구글에서 만든 AppRTC의 옛 버전 코어 라이브러리인 libjingle_peerconnection을 바탕으로 만든 것이며, 현재 AppRTC 코어는(1.1.24168)은 더이상 libjingle_peerconnection 라이브러리를 필요로 하지 않는다.)

---

뭐 어쨌든, 해당 깃헙에서 예제를 다운받고 AppRTCSwift.xcworkspace 를 Xcode로 실행시키고

Bundle Identifier 부분을 형식에 맞게 수정한다. ( Ex. Pro.gildong )

이후, 단말기에서 Build&Run 해보면 바로 실행 될 것이다. 

그리고, https://appr.tc 에서 단말기에서 입력한 방 번호를 입력하면 영상통화가 잘 될 것이다.

WebRTC를 스위프트로 구현할 사람은 이 예제를 가지고 분석하고 자기가 개발하는 앱에 적용하면 될 것이다.

그럼.. 이제부터 이 포스팅에 맞게 해당 예제 앱을 가지고 놀아보도록 하겠다.

새로운 프로젝트를 만든 뒤에, 간단하게 컨트롤러 부분만 재구성하여 실행 해 보는 것이다.

---

1. Xcode 실행 및 프로젝트 추가

대충 싱글 앱 하나를 만들어 준다. 어플 이름은 MyWebRTC로 하겠다.

---

2. CocoaPods 추가 및 AppRTC에 필요한 코어 라이브러리 추가

CocoaPods이란?

- 코코아 프로젝트(iOS프로젝트)에 대한 의존성 패키지를 관리하는 도구 중 하나인데, 안드로이드의 Gradle(조금 다르긴 하지만) 또는 CentOS의 yum을 생각하면 되겠다.

안드로이드 스튜디오를 설치하면 의존성 패키지를 관리하는 Gradle이 자동으로 설치되는데, Xcode는 그렇지가 않다. 따라서 수동 설치를 진행해야 한다.

(또한, 코코아 프로젝트에서 의존성 패키지 관리 도구는 CocoaPods외에도 Carthage와, 스위프트 패키지 관리자(줄여서 SPM) 가 있다. 그 중 가장 널리 쓰이는 CocoaPods를 쓰도록 하겠다.)

1. CocoaPods 설치

Command + Space를 눌러 Spotlight를 띄우고

terminal을 입력하여 터미널 창을 띄운다.

터미널 창에다 sudo gem install cocoapods를 입력하고, mac 사용자의 비밀번호를 입력하고 설치한다.

(코코아 팟은 루비언어로 만들어진 프로그램이기 때문에, 루비용 패키지 관리 도구인 gem을 이용하여 설치한다.)

설치가 다 끝났으면 다시 터미널 창을 띄운 뒤, 좀 전에 만든 프로젝트의 폴더로 이동한다.

2. Podfile 생성 및 라이브러리 추가

폴더에서 vi Podfile을 입력하여, Podfile을 vi 편집기를 통해 생성한다.

(vi편집기의 사용법은 다음 사이트를 참조하자)

Insert모드로 전환하고, 다음을 입력하자.

source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '10.0'

use_frameworks!

target 'MyWebRTC' do

  pod 'SocketRocket'

  pod 'libjingle_peerconnection'

end

-> target 'MyWebRTC' do 에서, MyWebRTC 부분을 내가 만든 앱의 이름으로 바꿔주면 된다.

그 밑에 pod 다음이 실질적으로 라이브러리를 추가하는 부분이다.

SocketRocket 라이브러리와 libjingle_peerconnection 라이브러리를 추가해주자.

(두 개의 라이브러리에 궁금하다면 CocoaPods 공식 사이트에서 검색해보도록 하자.)

두 개의 라이브러리를 추가 했으면, wq를 입력하여 vi편집창을 닫고,

다시 터미널창에 pod install을 입력하여 추가한 라이브러리를 설치하도록 하자.

Analyzing dependencies

Downloading dependencies

Using SocketRocket (0.5.1)

Using libjingle_peerconnection (11177.2.0)

Generating Pods project

Integrating client project

Sending stats

Pod installation complete! There are 2 dependencies from the Podfile and 2 total pods installed.

다음과 같이 라이브러리가 설치가 완료되었다는 안내 메시지가 떴다면 완료.

이후, 기존에 띄워놓은 Xcode는 종료를 하고, Xcode를 재시작 한다. 라이브러리가 적용된 프로젝트를 실행하기 위해서는 다른 타입의 프로젝트를 실행시켜야 하기 때문이다.

Xcode가 실행이 되었으면, 하단에 Open Another projects... 를 클릭한다.

그리고, 내가 만든 프로젝트 폴더로 들어간 뒤, 확장자가 xcodeproj인 기존의 프로젝트 실행 파일 말고, 확장자가 xcworkspace인 파일을 실행하도록 하자.

---

3. 예제 앱에서 WebRTC를 실행하는 데 필요한 코어 코드들 복사

1) 먼저, 구별을 위해 새로만든 프로젝트 안에 WebRTCUtils라는 그룹(폴더)를 만든다.

                             

2) 그 안에다가 아까 다운받은 AppRTCSwift 프로젝트 안의 Lib그룹 안에 있는 모든 파일들을 내 프로젝트로 드래그 하여 옮긴다.

이 파일들을 내 WebRTCUtils 폴더 안으로 드래그 한다.

다음과 같은 창이 뜨면 다음과 같이 체크한다.

---

4. 구현을 위한 뷰 컨트롤러 코드들 복사

3번과 마찬가지로 내 프로젝트 안에 ViewControllers 폴더를 만든다.

그리고, AppRTCSwift 프로젝트의 다음 3개의 파일들을 내 프로젝트에 드래그 하여 넣는다.

다음 파일들을 내 프로젝트에 드래그 해서 넣어놓자.

---

5. info 설정 추가 및 기본설정 변경

프로젝트 내의 프로퍼티 리스트 파일인 info.plist는 안드로이드 스튜디오의 manifest.xml 파일이라고 생각하면 쉽다.

안드로이드 스튜디오와 마찬가지로, 내장된 단말기의 카메라와 마이크를 쓰기 위해서는 허용을 해야 한다. 또한, TURN및 STUN서버에 접속하기 위해 인터넷 설정도 해야 한다.

따라서, 인터넷 사이트 접속 허용을 위한 App Transport Security Settings 설정,

카메라 접근을 허용하기 위한 Privacy - Camera Usage Description 설정,

마이크 접근을 허용하기 위한 Privacy - Microphone Usage Description 설정이 각각 필요하다.

info.plist 파일을 직접 클릭하여 수정을 하거나, 내 프로젝트를 클릭하고 설정 탭에서 Info 탭에서 수정을 하면 되겠다.

AppRTCSwift 프로젝트의 info.plist를 참조하여 수정하거나, 구글링을 통해 설정들을 추가해 보자.

---

6. Objective-C 파일로 생성된 라이브러리를 사용하기 위한 헤더-브릿지 파일 생성 및 등록

info.plist 에 설정들을 추가하였으면, Command + B를 눌러 빌드를 해보자.

오류가 102개 이상 떴을 것이다.

그 이유는, 추가한 라이브러리(libjingle, socketrocket)들은 오브젝-C로 빌드되어 있는데, 이 클래스들을 스위프트에서 바로 쓸 수 없기 때문에 내 프로젝트 내에 헤더 파일을 만들어서 브릿징을 해줘야 한다.

1. 브릿징에 대해서 알아보고 싶으면 이 사이트 참조하세요.

2. 이 사이트도 참조하세요

먼저 내 프로젝트 내에서 Command + N을 눌러 새로운 헤더 파일을 생성하자.

헤더파일 이름은 보통 '내프로젝트명-Bridging-Header' 이렇게 해 주는 것이 원칙이다.(물론 마음대로 해도 상관없다.)

이제, 브릿지 헤더 파일을 만들었으니, 설정에서 내 헤더파일을 추가해준다.

맨 상단의 내 프로젝트 파일 클릭 -> Build Settings 탭 클릭 -> 밑의 All 탭 클릭. -> 스크롤 내려 Swift Compiler - General 탭 안에 Objective-C Bridging Header 안에 '프로젝트 이름/프로젝트이름-Bridging-Header.h' 라고 입력하고, 빌드를 하면 오류가 1개로 줄어들 것이다.

ex) MyWebRTC/MyWebRTC-Bridging-Header.h

나머지 1개의 오류를 살펴보면 Bitcode에 대한 오류이다.

Xcode는 기본적으로 Bitcode를 사용하도록 설정되어 있는데, 이를 강제로 해제해야 한다.

설정 검색창에 Bitcode를 입력하고 Bitcode Enabled를 NO로 바꿔주고 빌드를 다시 해 주자. 그럼 오류는 없어질 것이다.

(Bitcode Enabled에 대해 알고 싶으면 이 사이트를 참조하자)

(경고 20개 정도는 모두 SocketRocket에서 난 경고이다. 이는 문법에 대한 경고이므로 무시해도 된다.)

만약, 경고 20개도 거슬린다면 

SRWebSocket.m

이 파일을 ScoketRocket 라이브러리가 있는 곳에다가 붙여넣기 하자.

참고로 구글에서 제공하는 AppRTC도 비트코드 에러가 뜬다. 아무리도 아키텍처 하위 지원까지 하려다 보니 그런거 같다(?)

---

7. 스토리보드에서 레이아웃 추가 및 오토레이아웃 설정

이제 기본적인 설정이 끝났으니 스토리보드에서 레이아웃을 직접 만들어보자.

다운받은 예제 안의 스토리보드 안에는 2가지 씬으로 되어있는데,

1) 방 제목 입력 화면(내비게이션 뷰 컨트롤러 + 테이블 뷰 컨트롤러)과

2) 비디오 채팅을 하는 화면(내비게이션 뷰 컨트롤러 + 뷰 컨트롤러) 로 되어있다.

첫 번째 씬은 쓸데없이 테이블뷰 컨트롤러 형식으로 만들어져 있어, 심플하게 뷰 컨트롤러로 바꿔보도록 하겠다.

또한, 오토레이아웃을 설정하도록 하겠다.

---

8. 뷰 컨트롤러 코드 부분 수정

스토리보드를 새로 만들었으니, 스토리보드의 객체들(버튼 및 뷰 컨테이너)을 코드와 결합시키도록 하자.

그리고 부분 부분 애니매이션 코드와 델리게이트 메소드 부분들을 입맛에 맞게 수정해주자.

---