M5Camera의 index.html을 간단하게 다시 작성해 보았습니다.
소개
M5Camera를 브라우저에 연결하면 여러분 친숙한 설정 화면이 나오지요.
프레임 사이즈를 바꾸거나 스트리밍의 ON/OFF를 할 수 있는 것입니다.
이 index.html에 해당하는 부분을 다시 쓰는 기사가 몇 가지 있습니다만, 압축/해동해야 하거나 원래의 HTML 자체도 길고 어려웠거나 해서, 개조의 허들이 높을 것 같았습니다.
그래서 자신에게 알 정도로 깎아 깎은 index.html을 만들어 보았습니다.
참고문헌
이 기사에서는 다음 사이트의 정보를 이용하겠습니다.
유익한 정보를 공유해 주신 여러분께 감사드립니다.
M5CAMERA 샘플 코드
camera_index.h는 압축 파일로 읽을 수 없습니다! ......"
htps : // 라고 해서 r. 이 m/쭈쭈 V32384623/s타츠 s/1323272566866239488
ESP32 (M5Camera 등)에서 HTTP 서버를 시작할 때 HTML 내용을 변경하는 방법
htps : // 코 m / 사카구치 / ms / 아 2에 07에 4 아 9c85374 아 4973
M5camera로 웹캠 만들기
htps : // 아비다. 이오/사 mp㎇s/m5s ck/m5 카메라/
동작 화면
동영상이 표시되는 상태입니다.
설정 변경 메뉴 등은 확실히 컷입니다.
설정은, 한 번 결정하면 그렇게 바꾸는 것도 아닌가요?
원본 파일의 변경 사항
CameraWebServer 스케치의 camera_index.h 내용을 다음으로 바꿉니다.
원래는 html을 압축하고 있었지만, 평문 쪽이 편집하기 쉽기 때문에 압축하지 않게 했습니다.
짧기 때문에 스케치의 사이즈적으로도 문제 없다고 생각합니다.
const char index_html[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>M5Camera Monitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>M5Camera Monitor</h1>
<figure>
<img id="stream" src="" width=100% height:auto>
</figure>
<p><button id="button1">Start Stream</button>
<button id="button2">Stop Stream</button></p>
<p><button id="button3" >LED On </button>
<button id="button4" >LED Off</button></p>
</body>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
var baseHost = document.location.origin
var streamUrl = baseHost + ':81'
const view = document.getElementById('stream')
const startButton = document.getElementById('button1')
const stopButton = document.getElementById('button2')
const ledonButton = document.getElementById('button3')
const ledoffButton = document.getElementById('button4')
startButton.onclick = () => {
view.src = `${streamUrl}/stream`
}
stopButton.onclick = () => {
view.src = ``
window.location.reload(true);
}
const query0 = `${baseHost}/control?var=led&val=0`
const query1 = `${baseHost}/control?var=led&val=1`
ledonButton.onclick = () => {
fetch(query0)
}
ledoffButton.onclick = () => {
fetch(query1)
}
})
</script>
</html>
)rawliteral";
그리고 이 내용을 브라우저에 보내는 처리를 하고 있는, app_httpd.cpp내의 index_handler를 이하와 같이 재기록합니다.
원래는 2 종류의 이미지 센서에 맞추어 분기하게 되어 있었습니다만, M5camera의 이미지 센서는 1 종류 밖에 없기 때문에 간결하게 합니다.
static esp_err_t index_handler(httpd_req_t *req){
sensor_t * s = esp_camera_sensor_get();
return httpd_resp_send(req, (const char *)index_html,sizeof(index_html));
}
여기까지 동영상을 전달할 준비가 되었습니다.
필요에 따라 정지화면의 캡쳐 기능을 추가하면 좋을 것 같네요.
또한 M5Camera의 LED를 ON/OFF시키고 싶은 경우에는 app_httpd.cpp내의 커맨드 핸들러의 해당 부분에 추가가 필요합니다.
...（略）
else if(!strcmp(variable, "led")) {
if(val == 0) {
digitalWrite(GPIO_NUM_14, LOW);
Serial.println("control: led: 0");
}
if(val == 1) {
digitalWrite(GPIO_NUM_14, HIGH);
Serial.println("control: led: 1");
}
}
...（略）
물론 메인 스케치의 setup()내에서 핀 모드를 OUTPUT으로 해 두는 것을 잊지 않고.
pinMode(GPIO_NUM_14, OUTPUT); // LEDを点滅させるために必要
끝에
이것만큼 간단하다면, 커스터마이즈도 쉽고 좋은 것이 아닐까요.
또한 설정은/control에서 나중에 변경할 수 있습니다.
다만 재기동하면 초기 설정으로 돌아가 버리므로, 매회 설정 다시 하는 것이 귀찮다면 코드내에 써 두는 편이 편할지도 모릅니다.
설정 변경 예:
브라우저에서 http://(M5camera IP 주소)/control?var=framesize&val=10에 액세스
(화면 크기가 최대로 설정됩니다)
그럼 재미있는 프로그래밍을.
Reference
이 문제에 관하여(M5Camera의 index.html을 간단하게 다시 작성해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sullblue/items/7b51f0d5dcf6f341fda6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
CameraWebServer 스케치의 camera_index.h 내용을 다음으로 바꿉니다.
원래는 html을 압축하고 있었지만, 평문 쪽이 편집하기 쉽기 때문에 압축하지 않게 했습니다.
짧기 때문에 스케치의 사이즈적으로도 문제 없다고 생각합니다.
const char index_html[] = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
<title>M5Camera Monitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>M5Camera Monitor</h1>
<figure>
<img id="stream" src="" width=100% height:auto>
</figure>
<p><button id="button1">Start Stream</button>
<button id="button2">Stop Stream</button></p>
<p><button id="button3" >LED On </button>
<button id="button4" >LED Off</button></p>
</body>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
var baseHost = document.location.origin
var streamUrl = baseHost + ':81'
const view = document.getElementById('stream')
const startButton = document.getElementById('button1')
const stopButton = document.getElementById('button2')
const ledonButton = document.getElementById('button3')
const ledoffButton = document.getElementById('button4')
startButton.onclick = () => {
view.src = `${streamUrl}/stream`
}
stopButton.onclick = () => {
view.src = ``
window.location.reload(true);
}
const query0 = `${baseHost}/control?var=led&val=0`
const query1 = `${baseHost}/control?var=led&val=1`
ledonButton.onclick = () => {
fetch(query0)
}
ledoffButton.onclick = () => {
fetch(query1)
}
})
</script>
</html>
)rawliteral";
그리고 이 내용을 브라우저에 보내는 처리를 하고 있는, app_httpd.cpp내의 index_handler를 이하와 같이 재기록합니다.
원래는 2 종류의 이미지 센서에 맞추어 분기하게 되어 있었습니다만, M5camera의 이미지 센서는 1 종류 밖에 없기 때문에 간결하게 합니다.
static esp_err_t index_handler(httpd_req_t *req){
sensor_t * s = esp_camera_sensor_get();
return httpd_resp_send(req, (const char *)index_html,sizeof(index_html));
}
여기까지 동영상을 전달할 준비가 되었습니다.
필요에 따라 정지화면의 캡쳐 기능을 추가하면 좋을 것 같네요.
또한 M5Camera의 LED를 ON/OFF시키고 싶은 경우에는 app_httpd.cpp내의 커맨드 핸들러의 해당 부분에 추가가 필요합니다.
...（略）
else if(!strcmp(variable, "led")) {
if(val == 0) {
digitalWrite(GPIO_NUM_14, LOW);
Serial.println("control: led: 0");
}
if(val == 1) {
digitalWrite(GPIO_NUM_14, HIGH);
Serial.println("control: led: 1");
}
}
...（略）
물론 메인 스케치의 setup()내에서 핀 모드를 OUTPUT으로 해 두는 것을 잊지 않고.
pinMode(GPIO_NUM_14, OUTPUT); // LEDを点滅させるために必要끝에
이것만큼 간단하다면, 커스터마이즈도 쉽고 좋은 것이 아닐까요.
또한 설정은/control에서 나중에 변경할 수 있습니다.
다만 재기동하면 초기 설정으로 돌아가 버리므로, 매회 설정 다시 하는 것이 귀찮다면 코드내에 써 두는 편이 편할지도 모릅니다.
설정 변경 예:
브라우저에서 http://(M5camera IP 주소)/control?var=framesize&val=10에 액세스
(화면 크기가 최대로 설정됩니다)
그럼 재미있는 프로그래밍을.
Reference
이 문제에 관하여(M5Camera의 index.html을 간단하게 다시 작성해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sullblue/items/7b51f0d5dcf6f341fda6
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(M5Camera의 index.html을 간단하게 다시 작성해 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sullblue/items/7b51f0d5dcf6f341fda6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
