라즈베리파이 카메라 모듈 안드로이드에서 실시간 확인

WebView

를 이용해 라즈베리파이 카메라 모듈을 안드로이드에서 실시간으로 확인하도록 할 것이다.

 

 

라즈베리파이 카메라 모듈 사용 참고: http://www.3demp.com/community/boardDetails.php?cbID=233

라즈베리파이 카메라 모듈 사용하기

 

위와 같이 카메라 모듈을 세팅해준다. 

까만색 부분을 위로 들면 위로 들린다.

나는 처음에 그 사실을 모르고 욱여 넣다가 망가트릴뻔했다.

 

 

Putty 접속 & 카메라 모듈 연결 후

 

raspistill -o test.jpg

 

명령어를 작성하면 5초 후, test.jpg 이름으로 사진이 저장된다.

 

이후, 웹뷰를 이용해서 안드로이드에서 실시간 캠을 확인할 것이다.

 

참고: https://jwonylee.tistory.com/entry/Raspberry-Pi-3-B-CCTV-만들기-with-Android

CCTV 만들기 with Android

 

sudo apt-get install git
git clone <https://github.com/jacksonliam/mjpg-streamer.git>
sudo apt-get install cmake python-pil libjpeg-dev build-essential
cd mjpg-streamer/mjpg-streamer-experimental
make
sudo make install
mjpg_streamer -i "input_raspicam.so -vf" -o "output_http.so -p 8090 -w /usr/local/share/mjpg-streamer/www/"

파이 IP:8090

으로 접속하면 현재 촬영중인 사진이 나온다.

메뉴 중에 Stream으로 들어가면 영상이 계속 나타나게 된다.

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" >
    </WebView>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
    private WebView mWebView; // 웹뷰 선언
    private WebSettings mWebSettings; //웹뷰세팅
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        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://192.168.25.40:8090/stream.html>"); // 웹뷰에 표시할 라즈베리파이 주소, 웹뷰 시작
    }
}

Manifest.xml에

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

와 <application> 태그 안에

android:usesCleartextTraffic="true"

추가한다.

 

android:usesCleartextTraffic="true"는 텍스트로 되어있는 모든 url의 접근을 허용한다는 뜻이다.

 

위와 같은 에러가 발생해서 추가 했다.

 

결과물>

실시간으로 CCTV 처럼 영상이 송출되는 것을 확인할 수 있다.