CCTV 만들기 with Android

💡 초기 설정(OS 설치, 설정 등)은 되어 있다는 가정 하에 작성하였습니다.

 

준비물

1. 라즈베리파이3 B+
2. 라즈베리파이 호환 카메라 모듈 (5MP 사용)
3. Android Studio
4. (선택) 테스트 기기

 

라즈베리파이 카메라 설정

---

pi@raspberrypi:~ $ sudo raspi-config

5 Interfacing Options 선택

P1 Camera > enable 로 설정했다면 라즈베리파이를 재부팅한다.

pi@raspberrypi:~ $ sudo reboot

아래 명령어를 통해 카메라 연결이 제대로 되어있는 지 확인할 수 있다.

pi@raspberrypi:~ $ vcgencmd get_camera

# 카메라 연결 불량
supported=1 detected=0 

# 카메라 연결 성공
supported=1 detected=1

카메라를 통해 사진을 찍으려면 다음과 같은 명령어를 사용한다. 현재 터미널이 위치한 경로에 screen.jpg 라는 이름으로 캡쳐를 한다.

pi@raspberrypi:~ $ raspistill -o screen.jpg

카메라가 정상 작동하는 것을 확인했다. 이제 mjpg-streamer 를 이용해 라즈베리파이에 연결된 카메라 영상을 웹에서 스트리밍할 것이다.

 

mjpg-streamer 설정

---

먼저 mjpg-streamer 를 설치하기 위해 git 을 설치해야한다.

pi@raspberrypi:~ $ sudo apt-get install git

pi@raspberrypi:~ $ git clone https://github.com/jacksonliam/mjpg-streamer.git

pi@raspberrypi:~ $ sudo apt-get install cmake python-pil libjpeg-dev build-essential

❓ 대부분의 블로그에서는 python-imaging 을 설치한다. 그래서 똑같이 따라서 해봤는데 python-pil 로 대체되어서 설치가 안된다는 문구가 떴다. 당황하지 말고 python-pil로 설치하면 된다.

 

필요한 패키지를 전부 다운 받았다면 mjpg-streamer를 설치한다.

pi@raspberrypi:~ $ cd mjpg-streamer/mjpg-streamer-experimental

pi@raspberrypi:~/mjpg-streamer/mjpg-streamer-experimental $ make

pi@raspberrypi:~ $ sudo make install

홈 디렉토리로 돌아가 다음의 명령어를 실행한다. 정상적으로 동작한다면

http://localhost:8090 에서 확인할 수 있다. (혹은 localhost 대신 라즈베리파이 아이피로 접속)

pi@raspberrypi:~ $ mjpg_streamer -i "input_raspicam.so -vf" -o "output_http.so -p 8090 -w /usr/local/share/mjpg-streamer/www/"

참고: https://webnautes.tistory.com/1261

여기까지 되었다면 이제 안드로이드에서 WebView를 통해 라즈베리파이를 CCTV로 사용할 수 있다.

 

안드로이드 어플리케이션 만들기

---

in Android Studio

1. 새로운 액티비티 생성
2. Empty Activity를 선택 (CameraActivity)
3. activity_camera.xml에 WebView를 추가
4. CameraActivity.java에 아래의 코드를 추가
5. 라즈베리파이 아이피 작성

    import androidx.appcompat.app.AppCompatActivity;
   
    import android.os.Bundle;
    import android.webkit.WebSettings;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;
   
    public class CameraActivity extends AppCompatActivity {
   
        private WebView mWebView; // 웹뷰 선언
        private WebSettings mWebSettings; //웹뷰세팅
   
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_camera);
   
            mWebView = (WebView) findViewById(R.id.webView);
   
            mWebView.setWebViewClient(new WebViewClient()); // 클릭시 새창 안뜨게
            mWebSettings = mWebView.getSettings(); //세부 세팅 등록
            mWebSettings.setJavaScriptEnabled(true); // 웹페이지 자바스클비트 허용 여부
            mWebSettings.setSupportMultipleWindows(false); // 새창 띄우기 허용 여부
            mWebSettings.setJavaScriptCanOpenWindowsAutomatically(false); // 자바스크립트 새창 띄우기(멀티뷰) 허용 여부
            mWebSettings.setLoadWithOverviewMode(true); // 메타태그 허용 여부
            mWebSettings.setUseWideViewPort(true); // 화면 사이즈 맞추기 허용 여부
            mWebSettings.setSupportZoom(false); // 화면 줌 허용 여부
            mWebSettings.setBuiltInZoomControls(false); // 화면 확대 축소 허용 여부
            mWebSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); // 컨텐츠 사이즈 맞추기
            mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 브라우저 캐시 허용 여부
            mWebSettings.setDomStorageEnabled(true); // 로컬저장소 허용 여부
   
            mWebView.loadUrl("http://localhost:8090/?action=stream"); // 웹뷰에 표시할 라즈베리파이 주소, 웹뷰 시작
        }
    }

   출처: https://web-inf.tistory.com/34
6. 외부에서(동일한 인터넷이 아닌 경우) 보려면 라즈베리파이에 고정IP를 할당해주고 아래 코드 가장 하단에 localhost 대신 외부IP를 기입하면 된다.

크게 건들일 게 없는 세팅이라 그냥 그대로 사용했다.

마지막으로 안드로이드 어플리케이션을 통해 인터넷을 접속하려면 Manifest 파일에서 권한을 요청해야한다. Manifest 파일을 열어 다음의 코드를 추가하자.

 

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.INTERNET" />

 

-

작년에 노션으로 작성했던 문서를 블로그로 옮김.