안드로이드 영상통화 peerjs - 2 - firebase

2021. 1. 16. 22:28

https://blog.naver.com/nagne2011/222209682873

안드로이드 영상통화 peerjs - 2 - firebase

 

#안드로이드 #영상통화 #peerjs

 

이제 안드로이드 프로젝트를 만들어준다

 

가장 먼저 할일은 firebase 연결

 

https://firebase.google.com/

이미지 썸네일 삭제

Firebase

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.

firebase.google.com

대표사진 삭제

사진 설명을 입력하세요.

Firebase 사이트에 접속 후 로그인

그리고 새로운 프로젝트를 추가해준다

이름은 아무거나 넣어준다

 

그다음 Realtime Database에 들어가서 '규칙' 항목으로 들어가보면

데이터베이스 접근권한을 수정할 수 있다

기본값은 false라서 true로 변경해준다

 

대표사진 삭제

사진 설명을 입력하세요.

 

이제 안드로이드 스튜디오로 넘어가서

 

상단 tool > Firbase를 열어주자

 

 

 

그다음 항목 중 Reatime Database를 열어서 써있는대로 진행하자

 

 

 

1번 2번 항목까지만 진행하면 완료

 

저렇게 V표시가 나올때까지 진행해주면 된다

(대충 gradle 연결에 관련된 내용이다)

 

dependencies {
implementation 'com.google.firebase:firebase-database-ktx:19.4.0'
}

apply plugin: 'com.google.gms.google-services'

 

build.gradle에 위 코드가 제대로 추가되었는지 확인해주자

 

다음엔 androidmenifest 수정

 

 

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

 

기본적으로 필요한 권한을 추가해주고

application항목에 아래 코드도 추가해준다

android:usesCleartextTraffic="true"

 

https 접속 권한 관련 허용코드다

자세한건 아래 링크를 참고

https://codechacha.com/ko/android-cleartext-http-traffic-issue/

 

 

이제 두개의 액티비티를 제작해야하는데,

하나는 '유저 등록' 액티비티, 나머지는 '통화 신청 및 대기' 액티비티다

 

먼저 MainActivity 와 연결되는 xml을

아래와 같이 구성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter a username"
        android:id="@+id/usernameEdit"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/loginBtn"
        android:text="Login"/>
</LinearLayout>

 

그리고 메인액티비티를 작성하자

 

 public final class MainActivity extends AppCompatActivity {
        protected void onCreate(@Nullable Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                this.setContentView(R.layout.activity_main);
        }
}

 

액티비티 활성화..는 잠깐 저렇게 놔두고

사진 삭제

사진 설명을 입력하세요.

app폴더를 우클릭해서 Asset Folder를 추가해준다음

해당 폴더에 이전 포스트에서 작성한 4개의 파일을 모두 넣어준다

 

추가로 drawable에 사용할 벡터이미지도 추가하자

방법은 아래와 같다

 

사진 삭제

 

사진 설명을 입력하세요.

 

총 6가지 아이콘을 넣어준다

따로 설명할 필요는 없을꺼같다

 

 

 

메인 액티비티를 마저 잡아줄건데

아무래도 시작부분에서 퍼미션 확인을 해주는게 좋으니까

해당 부분에 퍼미션 요청 기능을 넣어준다

 

링크에선 코틀린으로 진행되지만

프로젝트 진행중이라 자바스크립트로 작성했다

 

  @NotNull
    private final String[] permissions = new String[]{"android.permission.CAMERA", "android.permission.RECORD_AUDIO"};
    private final int requestcode = 1;

    @NotNull
    public final String[] getPermissions() {
        return this.permissions;
    }

    public final int getRequestcode() {
        return this.requestcode;
    }

 

위 코드를 입력해서 요청할 퍼미션 종류를 정리한다

필요한 퍼미션은 카메라와 음성 두가지다

 

"android.permission.CAMERA"

"android.permission.RECORD_AUDIO"

 

 private final void askPermissions() {
    ActivityCompat.requestPermissions((Activity)this, this.permissions, this.requestcode);
 }

 private final boolean isPermissionGranted() {
    String[] permissionArray = this.permissions;
    boolean isForeach = false;
    int lengh = permissionArray.length;

    for(int i = 0; i < lengh; ++i) {
        String temp = permissionArray[i];
        if (ActivityCompat.checkSelfPermission((Context)this, temp) != 0) {
            return false;
        }
    }
    return true;
}

 

권한 요청기능도 넣어준다

이제 onCreate()에서 퍼미션 확인을 진행해준다

 protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.activity_main);
    if (!this.isPermissionGranted()) {
        this.askPermissions();
    }
}

 

그리고 아래에 firebase 초기화 기능까지 같이 넣어준다

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.activity_main);
    if (!this.isPermissionGranted()) {
        this.askPermissions();
    }
    FirebaseKt.initialize(Firebase.INSTANCE, (Context)this);
}

 

그리고 아까 만들었던 xml과 연결해준다

아이디를 등록하는 부분이니 '확인'을 누르면 입력한 아이디와 기기정보를 함께 firebase에 등록하는 방식이다

    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.activity_main);
        if (!this.isPermissionGranted()) {
            this.askPermissions();
        }

        FirebaseKt.initialize(Firebase.INSTANCE, (Context)this);

        Button loginBtn = (Button)this.findViewById(R.id.loginBtn);
        final EditText usernameEdit = (EditText)this.findViewById(R.id.usernameEdit);
        loginBtn.setOnClickListener((OnClickListener)(new OnClickListener() {
            public final void onClick(View it) {
                EditText var10000 = usernameEdit;
                Intrinsics.checkNotNullExpressionValue(var10000, "usernameEdit");
                String username = var10000.getText().toString();
                Intent intent = new Intent((Context)MainActivity.this, CallActivity.class);
                intent.putExtra("username", username);
                MainActivity.this.startActivity(intent);
            }
        }));
    }

 

(변수명이 이상한 이유는 코틀린 코드를 자바스크립트로 바꾸다보니 자동생성된 변수명이 들어가버렸다)

 

 

여기까지만 해도 빌드로 진행이 가능하다

빌드 시 위 스샷처럼 나올텐데, 여기에 유저 구분을 위한 아이디를 입력하면

 

이렇게 firebase에 유저 정보가 갱신된다

 

다음편에서는 본격적인 통화 액티비티를 구성해보자