Skip to content

Commit

Permalink
Streamviewer (#39)
Browse files Browse the repository at this point in the history 
* dedicated stream viewer
* minimal functionality, but does rotate correctly
* stream autostarts and scales to window size preserving aspect ratio
  • Loading branch information
@easytarget
easytarget authored Sep 14, 2020
1 parent 91810ea commit 48a3dc5
Show file tree
Hide file tree
Showing 5 changed files with 262 additions and 46 deletions.
45 changes: 41 additions & 4 deletions app_httpd.cpp
View file
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
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
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
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

0 comments on commit 48a3dc5

Please sign in to comment.