[Android] Web RTC 샘플 따라하며 공부하기

 

블로그를 이전하였습니다. 

 

https://velog.io/@pachuho

감사합니다!

---

 

며칠간 놀기만하니 너무 나태해지는것 같아

 

새로운 기술을 배워보려한다.

 

Web RTC, 생소한 단어인데 

 

Web Real-Time Communications 즉, 웹을 통한 실시간 통신API를 뜻한다.

 

추가 프로그램 없이 음성 및 영상 그리고 파일까지 공유할 수 있다고 한다. 

 

자세한 정보는 medium.com/@hyun.sang/webrtc-webrtc%EB%9E%80-43df68cbe511

[WebRTC] WebRTC란?

webrtc.org/

WebRTC

몇몇 예제를 찾아보며 이런거구나~ 하고 감을 잡았다.

 

이제 본격적으로 알아보자.

 

webrtc.github.io/webrtc-org/native-code/android/#

Android | WebRTC

해당 사이트에서 안드로이드 사용법이 나와있다.

 

순서를 간략하게 정리하자면

 

1. 예제 소스 다운로드 

2. 의존성 추가

3. 다운한 예제 소스 압축해제 후 붙여넣기 및 수정

 

이런 순서이다.

(깃에 있는걸 가져오면 바로 할수도있을것 같은데 설명이 잘안나와있어서 참고 블로그를 따라해보려한다)

 

깃으로 바로 가져올 경우엔 예제가 많으니 구글링 해보는걸 추천한다.

 

+++ 노가다 없이 바로 클론하려면 필자 깃을 참고! (바로 실행해서 테스트단계로 넘어가면 된다)

github.com/pachuho/Web-RTC-Example

pachuho/Web-RTC-Example

 

1. 예제 소스 다운로드 

webrtc.googlesource.com/src/+/master/examples/androidapp/webrtc.googlesource.com/src/+/master/examples/androidapp/

examples/androidapp - src - Git at Google

 

tgz를 눌러 다운로드한다

 

2. 의존성 추가

implementation 'org.webrtc:google-webrtc:1.0.+'

앱 수준의 build.gradle에 의존성을 추가한다.

 

1.0.+에는 최신 버전을 넣어주자

 

최신버전은 아래 링크에서 확인이 가능하다(21.02.26 기준 1.0.32006 버전이 최신이다.)

 

bintray.com/google/webrtc/google-webrtc

Package google-webrtc - google

 

 

요렇게

 

이후, 1번에서 다운로드한 예제 소스 압축을 해제하자 그러면

 

3개의 폴더가 나온다.

 

third_party > autobanh > lib 폴더에 있는 autobanh.jar 파일을 프로젝트 안에 넣어주어야 한다.

(autobanh.jar 파일은 웹소켓 지원을 위한 라이브러리이다.

자세한 정보는 github.com/crossbario/autobahn-java)

 

Android -> Project 로 변경

 

 

 

Project 에서 app - libs 폴더에 autobanh.jar 파일을 넣어주자.

 

그리고 앱 수준의 build.gradle에

 

implementation files('libs/autobanh.jar')

을 추가해준다.

 

요렇게

 

우측상단 Sync now를 해준다면 2번까지 끝!

3. 다운한 예제 리소스 코드 붙여넣기 및 수정

좀 길다. 파이팅

 

2번에서 압축해제한 파일들 중 res폴더에 있는걸 프로젝트로 가져오자

 

깃허브의 임포트 기능이 고마워지네

 

①. drawable-xhdpi 폴더 안의 png 파일 모두를 drawable 폴더로 옮김

 

②. layout 폴더안의 xml 파일 모두를 layout 폴더로 옮김

 

③. menu 폴더를 통째로 옮김

 

④. values안의 폴더를 통째로 옮김(Overwrite for all)

 

⑤. 프로젝트의 style.xml에 다음을 붙여넣음

<style name="CallActivityTheme" parent="android:Theme.Black">
    <item name="android:windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowNoTitle">true</item>
</style>

⑥. xml 폴더째로 옮김

 

+ 메인액티비티 및 XML은 삭제해준다.

복사 후 구성

복사가 끝났다면 매니패스트에 다음코드들을 추가해주자

<uses-feature android:name="android.hardware.camera"/>
<uses-feature android:name="android.hardware.camera.autofocus"/>
<uses-feature android:glEsVersion="0x00020000" android:required="true"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CAPTURE_VIDEO_OUTPUT"
    tools:ignore="ProtectedPermissions" />

요렇게

<application
    android:allowBackup="false"
    android:debuggable="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="false"
    tools:ignore="HardcodedDebugMode">
    <activity
        android:name="ConnectActivity"
        android:label="@string/app_name"
        android:windowSoftInputMode="adjustPan">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />

            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />

            <data
                android:host="appr.tc"
                android:scheme="https" />
            <data
                android:host="appr.tc"
                android:scheme="http" />
        </intent-filter>
    </activity>
    <activity
        android:name="SettingsActivity"
        android:label="@string/settings_name"></activity>
    <activity
        android:name="CallActivity"
        android:configChanges="orientation|smallestScreenSize|screenSize|screenLayout"
        android:label="@string/app_name"
        android:screenOrientation="fullUser"
        android:theme="@style/CallActivityTheme"></activity>
</application>

application도 위 코드를 복붙해주자

 

매니패스트를 수정하면 액티비티에 빨간불이 들어온걸 볼 수 있는데(난 다 수정하고 캡처함)

이것도 가져와야한다.

(참고 블로그에서도 좀더 간편하게 가져올 수 있는 방법이 있는지 궁금해하던데 혹시 알고 있다면

댓글 부탁드립니다)

 

src > org > appspot > apprtc 폴더안에 있는걸 통째로 가져온다 

 

 

Class별 코드 수정 순서

 

1. AppRTCAudioManager -> 2. AppRTCBluetoothManager 

-> 3. AppRTCProximitySensor -> 4. RoomParametersFetcher 

-> 5. PeerConnectionClient -> 6. WebSocketChannelClient 

-> 7. WebSocketRTCClient -> 8. CallActivity -> 그외 클래스들

 

수정 시 빨간불이 들어온 임포트 코드를 옵티마이즈(지워주기) 해주고 코드상에서 새로 임포트해준다.

 

그리고 Run 해보면

퍼미션을 모두 허용해줬는데도 제대로 작동 안할 수 있다고 협박한다. no를 눌러주자

 

테스트 시작

appr.tc/

AppRTC

사이트를 들어가서 방 이름을 방번호를 통해 web과 android 통신을 해보자

 

테스트 결과

 

노트북 카메라 화질이 떨어져서 아쉽지만 잘 작동했다

 

 

처음 WebRTC를 써봤는데 재밌는 기술같다 미디어쪽은 안다뤄봐서 겁이좀 났지만 좀더 다듬고

내껄로 만들어보고싶다

 

다음엔 roqkfwk.tistory.com/42?category=785055 를 보면서 코드 분석! 클래스별 기능을 파악해보려한다.

 

 

참고사이트 : roqkfwk.tistory.com/40