Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Streamviewer #39

Merged
merged 3 commits into from
Sep 14, 2020
Merged

Streamviewer #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8085a80
App-part of streamviewer
easytarget Sep 13, 2020
befaa72
dedicated stream viewer
easytarget Sep 13, 2020
3151a9e
streamviewer scale and fullscreen
easytarget Sep 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 41 additions & 4 deletions app_httpd.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

#include "index_ov2640.h"
#include "index_ov3660.h"
#include "miniviewer.h"
#include "viewers.h"
#include "css.h"
#include "favicon/favicons.h"

Expand Down Expand Up @@ -592,7 +592,6 @@ static esp_err_t cmd_handler(httpd_req_t *req){

static esp_err_t status_handler(httpd_req_t *req){


static char json_response[1024];
sensor_t * s = esp_camera_sensor_get();
char * p = json_response;
Expand Down Expand Up @@ -629,8 +628,22 @@ static esp_err_t status_handler(httpd_req_t *req){
p+=sprintf(p, "\"cam_name\":\"%s\",", myName);
p+=sprintf(p, "\"code_ver\":\"%s\",", myVer);
p+=sprintf(p, "\"rotate\":\"%s\",", myRotation);
p+=sprintf(p, "\"stream_url\":\"%s\",", streamURL);
p+=sprintf(p, "\"http\":%i", 80);
p+=sprintf(p, "\"stream_url\":\"%s\"", streamURL);
*p++ = '}';
*p++ = 0;
httpd_resp_set_type(req, "application/json");
httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
return httpd_resp_send(req, json_response, strlen(json_response));
}

static esp_err_t info_handler(httpd_req_t *req){
static char json_response[256];
char * p = json_response;
*p++ = '{';
p+=sprintf(p, "\"cam_name\":\"%s\",", myName);
p+=sprintf(p, "\"code_ver\":\"%s\",", myVer);
p+=sprintf(p, "\"rotate\":\"%s\",", myRotation);
p+=sprintf(p, "\"stream_url\":\"%s\"", streamURL);
*p++ = '}';
*p++ = 0;
httpd_resp_set_type(req, "application/json");
Expand Down Expand Up @@ -683,6 +696,15 @@ static esp_err_t miniviewer_handler(httpd_req_t *req){
return httpd_resp_send(req, (const char *)miniviewer_html, miniviewer_html_len);
}

static esp_err_t streamviewer_handler(httpd_req_t *req){
flashLED(75); // a little feedback to user
delay(75);
flashLED(75);
httpd_resp_set_type(req, "text/html");
httpd_resp_set_hdr(req, "Content-Encoding", "identity");
return httpd_resp_send(req, (const char *)streamviewer_html, streamviewer_html_len);
}

static esp_err_t index_handler(httpd_req_t *req){
flashLED(75); // a little feedback to user
delay(75);
Expand Down Expand Up @@ -769,6 +791,19 @@ void startCameraServer(int hPort, int sPort){
.user_ctx = NULL
};

httpd_uri_t streamviewer_uri = {
.uri = "/view",
.method = HTTP_GET,
.handler = streamviewer_handler,
.user_ctx = NULL
};

httpd_uri_t info_uri = {
.uri = "/info",
.method = HTTP_GET,
.handler = info_handler,
.user_ctx = NULL
};

ra_filter_init(&ra_filter, 20);

Expand Down Expand Up @@ -809,6 +844,8 @@ void startCameraServer(int hPort, int sPort){
Serial.printf("Starting stream server on port: '%d'\n", config.server_port);
if (httpd_start(&stream_httpd, &config) == ESP_OK) {
httpd_register_uri_handler(stream_httpd, &stream_uri);
httpd_register_uri_handler(stream_httpd, &info_uri);
httpd_register_uri_handler(stream_httpd, &streamviewer_uri);
httpd_register_uri_handler(stream_httpd, &favicon_16x16_uri);
httpd_register_uri_handler(stream_httpd, &favicon_32x32_uri);
httpd_register_uri_handler(stream_httpd, &favicon_ico_uri);
Expand Down
6 changes: 1 addition & 5 deletions css.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ section.main {
#menu {
display: none;
flex-wrap: nowrap;
width: 340px;
width: 380px;
background: #363636;
padding: 8px;
border-radius: 4px;
Expand Down Expand Up @@ -63,10 +63,6 @@ figure {

figure img {
display: block;
/*
no max-width:
width: 100%;
*/
max-width: 100%;
width: auto;
height: auto;
Expand Down
33 changes: 16 additions & 17 deletions index_ov2640.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const uint8_t index_ov2640_html[] = R"=====(
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP32 OV3660</title>
<title>ESP32 OV2640</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="/style.css">
Expand All @@ -19,15 +19,14 @@ const uint8_t index_ov2640_html[] = R"=====(
flex-wrap: nowrap;
align-items: stretch
}



figure img {
display: block;
max-width: 100%;
width: auto;
height: auto
}

figure {
padding: 0 0 0 0px;
margin: 0;
Expand Down Expand Up @@ -270,11 +269,11 @@ const uint8_t index_ov2640_html[] = R"=====(
<div class="input-group" id="code_ver-group">
<label for="code_ver">
<a href="https://github.com/easytarget/esp32-cam-webserver"
title="ESP32 Cam Webserver on GitHub" target="_blank">Firmware</a>:</label>
title="ESP32 Cam Webserver on GitHub" target="_blank">Firmware</a></label>
<div id="code_ver" class="default-action"></div>
</div>
<div class="input-group hidden" id="stream-group">
<label for="stream_url">Stream URL:</label>
<label for="stream_url" id="stream_link">Stream URL</label>
<div id="stream_url" class="default-action">Unknown</div>
</div>
</nav>
Expand Down Expand Up @@ -307,7 +306,7 @@ const uint8_t index_ov2640_html[] = R"=====(
const streamButton = document.getElementById('toggle-stream')
const enrollButton = document.getElementById('face_enroll')
const closeButton = document.getElementById('close-stream')
const streamLink = document.getElementById('stream_url')
const streamLink = document.getElementById('stream_link')
const detect = document.getElementById('face_detect')
const recognize = document.getElementById('face_recognize')
const framesize = document.getElementById('framesize')
Expand Down Expand Up @@ -341,7 +340,7 @@ const uint8_t index_ov2640_html[] = R"=====(
initialValue = el.value
el.value = value
}

if (updateRemote && initialValue !== value) {
updateConfig(el);
} else if(!updateRemote){
Expand Down Expand Up @@ -377,9 +376,9 @@ const uint8_t index_ov2640_html[] = R"=====(
applyRotation();
} else if(el.id === "stream_url"){
stream_url.innerHTML = value;
stream_url.setAttribute("title", "Open raw stream URL in new window");
stream_url.style.textDecoration = "underline";
stream_url.style.cursor = "pointer";
stream_link.setAttribute("title", "Open stream viewer ( " + value + "view )");
stream_link.style.textDecoration = "underline";
stream_link.style.cursor = "pointer";
streamURL = value;
streamButton.setAttribute("title", `You can also browse to '${streamURL}' for a raw stream`);
show(streamGroup)
Expand Down Expand Up @@ -479,7 +478,7 @@ const uint8_t index_ov2640_html[] = R"=====(
// Attach actions to controls

streamLink.onclick = () => {
window.open(streamURL, "_blank");
window.open(streamURL + "view", "_blank");
}

stillButton.onclick = () => {
Expand Down Expand Up @@ -529,23 +528,23 @@ const uint8_t index_ov2640_html[] = R"=====(
show(agcGain)
}
}

// Exposure
const aec = document.getElementById('aec')
const exposure = document.getElementById('aec_value-group')
aec.onchange = () => {
updateConfig(aec)
aec.checked ? hide(exposure) : show(exposure)
}

// AWB
const awb = document.getElementById('awb_gain')
const wb = document.getElementById('wb_mode-group')
awb.onchange = () => {
updateConfig(awb)
awb.checked ? show(wb) : hide(wb)
}

// Detection and framesize
rotate.onchange = () => {
applyRotation();
Expand All @@ -559,7 +558,7 @@ const uint8_t index_ov2640_html[] = R"=====(
updateValue(recognize, false)
}
}

detect.onchange = () => {
if (framesize.value > 5) {
alert("Please select CIF or lower resolution before enabling this feature!");
Expand All @@ -572,7 +571,7 @@ const uint8_t index_ov2640_html[] = R"=====(
updateValue(recognize, false)
}
}

recognize.onchange = () => {
if (framesize.value > 5) {
alert("Please select CIF or lower resolution before enabling this feature!");
Expand Down
33 changes: 16 additions & 17 deletions index_ov3660.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,14 @@ const uint8_t index_ov3660_html[] = R"=====(
flex-wrap: nowrap;
align-items: stretch
}



figure img {
display: block;
max-width: 100%;
width: auto;
height: auto
}

figure {
padding: 0 0 0 0px;
margin: 0;
Expand Down Expand Up @@ -283,11 +282,11 @@ const uint8_t index_ov3660_html[] = R"=====(
<div class="input-group" id="code_ver-group">
<label for="code_ver">
<a href="https://github.com/easytarget/esp32-cam-webserver"
title="ESP32 Cam Webserver on GitHub" target="_blank">Firmware</a>:</label>
title="ESP32 Cam Webserver on GitHub" target="_blank">Firmware</a></label>
<div id="code_ver" class="default-action"></div>
</div>
<div class="input-group hidden" id="stream-group">
<label for="stream_url">Stream URL:</label>
<label for="stream_url" id="stream_link">Stream URL</label>
<div id="stream_url" class="default-action">Unknown</div>
</div>
</nav>
Expand Down Expand Up @@ -320,7 +319,7 @@ const uint8_t index_ov3660_html[] = R"=====(
const streamButton = document.getElementById('toggle-stream')
const enrollButton = document.getElementById('face_enroll')
const closeButton = document.getElementById('close-stream')
const streamLink = document.getElementById('stream_url')
const streamLink = document.getElementById('stream_link')
const detect = document.getElementById('face_detect')
const recognize = document.getElementById('face_recognize')
const framesize = document.getElementById('framesize')
Expand Down Expand Up @@ -354,7 +353,7 @@ const uint8_t index_ov3660_html[] = R"=====(
initialValue = el.value
el.value = value
}

if (updateRemote && initialValue !== value) {
updateConfig(el);
} else if(!updateRemote){
Expand Down Expand Up @@ -388,9 +387,9 @@ const uint8_t index_ov3660_html[] = R"=====(
applyRotation();
} else if(el.id === "stream_url"){
stream_url.innerHTML = value;
stream_url.setAttribute("title", "Open raw stream URL in new window");
stream_url.style.textDecoration = "underline";
stream_url.style.cursor = "pointer";
stream_link.setAttribute("title", "Open stream viewer ( " + value + "view )");
stream_link.style.textDecoration = "underline";
stream_link.style.cursor = "pointer";
streamURL = value;
streamButton.setAttribute("title", `You can also browse to '${streamURL}' for a raw stream`);
show(streamGroup)
Expand Down Expand Up @@ -490,7 +489,7 @@ const uint8_t index_ov3660_html[] = R"=====(
// Attach actions to controls

streamLink.onclick = () => {
window.open(streamURL, "_blank");
window.open(streamURL + "view", "_blank");
}

stillButton.onclick = () => {
Expand Down Expand Up @@ -537,23 +536,23 @@ const uint8_t index_ov3660_html[] = R"=====(
show(agcGain)
}
}

// Exposure
const aec = document.getElementById('aec')
const exposure = document.getElementById('aec_value-group')
aec.onchange = () => {
updateConfig(aec)
aec.checked ? hide(exposure) : show(exposure)
}

// AWB
const awb = document.getElementById('awb_gain')
const wb = document.getElementById('wb_mode-group')
awb.onchange = () => {
updateConfig(awb)
awb.checked ? show(wb) : hide(wb)
}

// Detection and framesize
rotate.onchange = () => {
applyRotation();
Expand All @@ -567,7 +566,7 @@ const uint8_t index_ov3660_html[] = R"=====(
updateValue(recognize, false)
}
}

detect.onchange = () => {
if (framesize.value > 5) {
alert("Please select CIF or lower resolution before enabling this feature!");
Expand All @@ -580,7 +579,7 @@ const uint8_t index_ov3660_html[] = R"=====(
updateValue(recognize, false)
}
}

recognize.onchange = () => {
if (framesize.value > 5) {
alert("Please select CIF or lower resolution before enabling this feature!");
Expand All @@ -597,7 +596,7 @@ const uint8_t index_ov3660_html[] = R"=====(
}

swapButton.onclick = () => {
window.open('/','_self');
window.open('/view','_self');
}

})
Expand Down
Loading