입문

안녕하세요.@nsd244.
이 글에서, 나는 m5camera라는 m5stac 시리즈 카메라의 이미지 URL을 얻으려고 한다.
이 기사는 12/7,8에 열린 KDDI 주최 학생을 위한 하카슨 KDG HACKS 2019 에서 제가 만든 제품의 일부분을 이 기사에 썼습니다.
2019/12/8 현재 m5camera에도 문서가 완전하지 않은 부분이 있어서 보도를 해 봤습니다.

m5camera의 특징

우선, m5camera에 대해 사용하지 않은 사람도 많기 때문에 간단하게 특징을 소개합니다.
자세한 사양은 공식 문서 을 참조하십시오.

m5camera 단일 Wi-Fi 핫스팟 AP 생성

두 가지 버전

업그레이드 가능

비건 의장 시간 사용

두 개의 프로그래밍 단원이 있다

이러한 특징에 대해 하나하나 설명하다.

m5camera 단일 Wi-Fi 핫스팟 AP 생성 가능

가장 큰 특징은 바로 이것이다.
m5camera는 카메라뿐만 아니라 esp32도 내장되어 있어 와이파이 핫이슈를 생성할 수 있다.

두 가지 버전이 있어요.

m5camera는 발송 시간에 따라 핀 구성이 다른'모델 A'와'모델 B'두 가지 버전이 있습니다.
이 글에서 우리는 모델 B를 바탕으로 설명할 것이다.
(아마도 발매 초기 출하는 모델 A, 그 다음은 모델 B)

업그레이드 가능

m5camera는 세 축의 가속도, 팽이 센서(MPU6050) 모듈, 온도와 습도, 기압 센서(BME280) 모듈, 아날로그 마이크 모듈, 배터리 등을 연결하여 업그레이드할 수 있다.

장시간 사양은 권장하지 않음

switch-science의 판매 페이지
※ 카메라 모듈은 장시간 사용하면 과열되기 쉬우므로 권장하지 않습니다.짧은 시간 안에 촬영하는 것을 추천합니다.
쓰여 있다.
나는 실제 처리가 어느 정도까지 걸리는지, 검증된 블로그 기사 등을 찾아보았지만 없었다.
만약 네가 시간이 있다면, 나는 검증하고 싶다.

두 가지 프로그래밍 방법이 있어요.

이 m5camera의 프로그래밍 방법은 "Arduino IDE"와 "ESP-IDF"두 가지가 있습니다.
이 문서에서는 Arduino IDE를 사용하는 방법을 설명합니다.

빠른 시작

m5camera는 기본적으로 실행되는 프로그램을 포함합니다.
우선 이 프로그램을 시작하는 것부터 시작합시다.
시작 방법에 대해서는 사이트 제목 을 참조하십시오.

환경 구축

Arduino IDE에서 m5camera를 사용하려면 esp32의 보드 관리자를 설치해야 합니다.
설치 방법은 이 블로그 을 참조하십시오.
프로그램을 m5camera에 쓸 때 Arduino IDE의 다음 설정을 잊지 마십시오.
* 도구 -> 마더보드 -> ESP32 Wrover Module
*툴 -> 파티셔닝 시나리오 -> Huge APP(3MB NoOTA)

m5camera의 이미지 URL 가져오기

그러면 본론인 "m5camera의 이미지 URL을 가져오는 절차"를 설명해 드리겠습니다.
m5camera 이미지 URL을 가져오는 작업 절차는 다음과 같습니다.

웹 서버에 이미지 보이기

로컬 이미지 저장

html에 이미지를 삽입하고 웹 서버를 시작하여ngrok 외부에서 공개

1,2에 관해서는 m5camera로 직접 이미지를 촬영할 수 있다면 괜찮지만 이번에는 샘플 코드가 하나 있어서 이 절차에 따라 이미지 URL을 얻었습니다.

웹 서버에 이미지 보이기

웹 서버에 이미지를 표시하는 데 사용되는 저장소는 여기 입니다.
이 프로그램은 아래 초도 예시의 프로그램을 참고했다.
파일 -> 스케치 예제 -> ESP32] -> 카메라 -> 카메라 네트워크 서버
이 초도 예시 프로그램은 m5camera의 모델 A와 대응하는 코드입니다.
따라서 코드가 모델 B에 맞게 변경되었습니다.
여기 프로그램의 wifi_config.h에 wifi의ssid와password를 입력하고 Arduino IDE에 m5camera를 기록합니다.
(여기 와이파이는 pc의 와이파이와 같다)
작성한 후 Serial 모니터를 확인하십시오.
만약 정상적으로 시작할 수 있다면, 직렬 모니터에 웹 서버의 URL이 나타날 것입니다.
나오지 않으면 와이파이의ssid or password를 재검토하거나 m5camera의reset 단추를 누르십시오.
접근할 수 있다면 다음과 같은 화면이 나타날 것이다.
이 화면에서 startstream을 누르면 애니메이션을 표시할 수 있습니다.

이미지 URL만 가져오려면 현재 URL에/capture를 추가합니다.
이것을 설치하면 이미지 URL을 얻을 수 있습니다.

로컬 저장 이미지

다음 코드를 사용하여 URL의 이미지를 다운로드합니다.
python의 requests를 사용하여 URL 대상의 이미지 데이터를 다운로드합니다.
또한 타임 모듈을 사용하면 이미지의 획득 간격을 변경할 수 있습니다.
save.py

import requests
import os
import sys
import time
import numpy as np

def download_image(url, timeout = 10):
    response = requests.get(url, allow_redirects=False, timeout=timeout)
    print(response.status_code)
    if response.status_code != 200:
        e = Exception("HTTP status: " + response.status_code)
        raise e

    content_type = response.headers["content-type"]
    if 'image' not in content_type: # 画像データ以外であればエラー
        e = Exception("Content-Type: " + content_type)
        raise e

    return response.content

def save_image(image):
    with open("img.jpg", "wb") as f:
        f.write(image)


# メイン
if __name__ == "__main__":
    url = 'm5cameraのURL'
    cnt = 0

    while(1):
        print("cnt:" + str(cnt))
        img = download_image(url)
        save_image(img)
        time.sleep(1)   # 画像の取得間隔
        cnt+=1

html에 이미지 삽입, 웹 서버 시작,ngrok 외부 공개

마지막으로 방금 저장한 그림을 외부에 공개할 수 있습니다.
우선, 이미지를 html에 삽입하면 다음과 같다.
index.html

<img src="./img.jpg" alt="m5camera" />

이어서 로컬 서버 index를 시작합니다.html 보이기.
이번은python의 http입니다.서버 클래스를 사용하여 8000번 위치에서 로컬 서버를 시작합니다.

$ python3 -m http.server 8000

마지막으로 이 로컬 서버를 외부에 발표합니다.
이번에는 ngrok를 사용합니다.
※ install ngrok이 없는 사람은 사이트 제목부터 설치하세요.
http로 방금 시작한 로컬 서버의 8000번 포트를 공개합니다.

$ ngrok http 8000

이렇게 하면 URL을 아는 사람은 누구나 초상화를 볼 수 있다!

총결산

본고는 m5camera를 소개하고 m5camera의 이미지 URL을 어떻게 얻는지 소개한다.
솔직히 말해서, 내 생각에도 누군가는 먼 길을 돌아갔다고 느낀다.
이번에 우리는 공짜이고 순조로운 기초 방법을 기술하였다.
다른 방법에 관해서 나는 이후에 다시 쓰고 싶다.

참고 문헌

[1] M5Stack Docs
[2] M5카메라로 웹캠 만들기.