之前的ESP32CAM的网页修改都是比较简单的按钮形式，也就是点击开或者关这种互动形式的数据，碰到一个粉丝有另外一种需求，那就是页面可以实时回显ESP32作为主控处理接收到的传感器数据，比如显示温湿度传感器、超声波传感器、红外传感器的数据或者检测结果。这个在ESP32代码里面的改动其实不是很多，主要的修改还是前端的页面设计，也就是需要修改html文件，实现前端页面的显示，以及获取数据的操作。

一、初始的html文件

之前一直没找到原始的index_ov2640.html文件，后来终于被我找到了，这里直接放链接了--初始index_ov2640.html文件。

二、页面html文件修改

1.删除多余的演示按钮

这边为了演示，只保留了少数的开关，比如图像精度的设置、之前添加的闪光灯按钮，还有就是人脸识别的相关按钮。


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>ESP32</title>
        <style>
            body {
                font-family: Arial,Helvetica,sans-serif;
                background: #181818;
                color: #EFEFEF;
                font-size: 16px
            }
 
            h2 {
                font-size: 18px
            }
 
            section.main {
                display: flex
            }
 
            #menu,section.main {
                flex-direction: column
            }
 
            #menu {
                display: none;
                flex-wrap: nowrap;
                min-width: 340px;
                background: #363636;
                padding: 8px;
                border-radius: 4px;
                margin-top: -10px;
                margin-right: 10px;
            }
 
            #content {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch
            }
 
            figure {
                padding: 0px;
                margin: 0;
                -webkit-margin-before: 0;
                margin-block-start: 0;
                -webkit-margin-after: 0;
                margin-block-end: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: 0;
                margin-inline-end: 0
            }
 
            figure img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 4px;
                margin-top: 8px;
            }
 
            @media (min-width: 800px) and (orientation:landscape) {
                #content {
                    display:flex;
                    flex-wrap: nowrap;
                    align-items: stretch
                }
 
                figure img {
                    display: block;
                    max-width: 100%;
                    max-height: calc(100vh - 40px);
                    width: auto;
                    height: auto
                }
 
                figure {
                    padding: 0 0 0 0px;
                    margin: 0;
                    -webkit-margin-before: 0;
                    margin-block-start: 0;
                    -webkit-margin-after: 0;
                    margin-block-end: 0;
                    -webkit-margin-start: 0;
                    margin-inline-start: 0;
                    -webkit-margin-end: 0;
                    margin-inline-end: 0
                }
            }
 
            section#buttons {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between
            }
 
            #nav-toggle {
                cursor: pointer;
                display: block
            }
 
            #nav-toggle-cb {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }
 
            #nav-toggle-cb:checked+#menu {
                display: flex
            }
 
            .input-group {
                display: flex;
                flex-wrap: nowrap;
                line-height: 22px;
                margin: 5px 0
            }
 
            .input-group>label {
                display: inline-block;
                padding-right: 10px;
                min-width: 47%
            }
 
            .input-group input,.input-group select {
                flex-grow: 1
            }
 
            .range-max,.range-min {
                display: inline-block;
                padding: 0 5px
            }
 
            button {
                display: block;
                margin: 5px;
                padding: 0 12px;
                border: 0;
                line-height: 28px;
                cursor: pointer;
                color: #fff;
                background: #ff3034;
                border-radius: 5px;
                font-size: 16px;
                outline: 0
            }
 
            button:hover {
                background: #ff494d
            }
 
            button:active {
                background: #f21c21
            }
 
            button.disabled {
                cursor: default;
                background: #a0a0a0
            }
 
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                height: 22px;
                background: #363636;
                cursor: pointer;
                margin: 0
            }
 
            input[type=range]:focus {
                outline: 0
            }
 
            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }
 
            input[type=range]::-webkit-slider-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                -webkit-appearance: none;
                margin-top: -11.5px
            }
 
            input[type=range]:focus::-webkit-slider-runnable-track {
                background: #EFEFEF
            }
 
            input[type=range]::-moz-range-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }
 
            input[type=range]::-moz-range-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer
            }
 
            input[type=range]::-ms-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: 0 0;
                border-color: transparent;
                color: transparent
            }
 
            input[type=range]::-ms-fill-lower {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }
 
            input[type=range]::-ms-fill-upper {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }
 
            input[type=range]::-ms-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                height: 2px
            }
 
            input[type=range]:focus::-ms-fill-lower {
                background: #EFEFEF
            }
 
            input[type=range]:focus::-ms-fill-upper {
                background: #363636
            }
 
            .switch {
                display: block;
                position: relative;
                line-height: 22px;
                font-size: 16px;
                height: 22px
            }
 
            .switch input {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }
 
            .slider {
                width: 50px;
                height: 22px;
                border-radius: 22px;
                cursor: pointer;
                background-color: grey
            }
 
            .slider,.slider:before {
                display: inline-block;
                transition: .4s
            }
 
            .slider:before {
                position: relative;
                content: "";
                border-radius: 50%;
                height: 16px;
                width: 16px;
                left: 4px;
                top: 3px;
                background-color: #fff
            }
 
            input:checked+.slider {
                background-color: #ff3034
            }
 
            input:checked+.slider:before {
                -webkit-transform: translateX(26px);
                transform: translateX(26px)
            }
 
            select {
                border: 1px solid #363636;
                font-size: 14px;
                height: 22px;
                outline: 0;
                border-radius: 5px
            }
 
            .image-container {
                position: relative;
                min-width: 160px
            }
 
            .close {
                position: absolute;
                right: 5px;
                top: 5px;
                background: #ff3034;
                width: 16px;
                height: 16px;
                border-radius: 100px;
                color: #fff;
                text-align: center;
                line-height: 18px;
                cursor: pointer
            }
 
            .hidden {
                display: none
            }
        </style>
    </head>
    <body>
        <section class="main">
            <div id="logo">
                <label for="nav-toggle-cb" id="nav-toggle">&#9776;&nbsp;&nbsp;相机设置</label>
            </div>
            <div id="content">
                <div id="sidebar">
                    <input type="checkbox" id="nav-toggle-cb" checked="checked">
                    <nav id="menu">
                        <div class="input-group" id="framesize-group">
                            <label for="framesize">Resolution</label>
                            <select id="framesize" class="default-action">
                                <option value="10">UXGA(1600x1200)</option>
                                <option value="9">SXGA(1280x1024)</option>
                                <option value="8">XGA(1024x768)</option>
                                <option value="7">SVGA(800x600)</option>
                                <option value="6">VGA(640x480)</option>
                                <option value="5" selected="selected">CIF(400x296)</option>
                                <option value="4">QVGA(320x240)</option>
                                <option value="3">HQVGA(240x176)</option>
                                <option value="0">QQVGA(160x120)</option>
                            </select>
                        </div>
                        <div class="input-group" id="light-group">
                            <label for="lightbtn">Light Button</label>
                            <div class="switch">
                                <input id="lightbtn" type="checkbox" class="default-action">
                                <label class="slider" for="lightbtn"></label>
                            </div>
                        </div>
                        
                        <section id="buttons">
                            <button id="get-still">Get Still</button>
                            <button id="toggle-stream">Start Stream</button>
                            <button id="face_enroll" class="disabled" disabled="disabled">Enroll Face</button>
                        </section>
                    </nav>
                </div>
                <figure>
                    <div id="stream-container" class="image-container hidden">
                        <div class="close" id="close-stream">×</div>
                        <img id="stream" src="">
                    </div>
                </figure>
                <div id="dht"></div>
            </div>
        </section>
    <script>
document.addEventListener('DOMContentLoaded', function (event) {
  var baseHost = document.location.origin
  var streamUrl = baseHost + ':81'
 
  const hide = el => {
    el.classList.add('hidden')
  }
  const show = el => {
    el.classList.remove('hidden')
  }
 
  const disable = el => {
    el.classList.add('disabled')
    el.disabled = true
  }
 
  const enable = el => {
    el.classList.remove('disabled')
    el.disabled = false
  }
 
  const updateValue = (el, value, updateRemote) => {
    updateRemote = updateRemote == null ? true : updateRemote
    let initialValue
    if (el.type === 'checkbox') {
      initialValue = el.checked
      value = !!value
      el.checked = value
    } else {
      initialValue = el.value
      el.value = value
    }
 
    if (updateRemote && initialValue !== value) {
      updateConfig(el);
    } else if(!updateRemote){
      if(el.id === "aec"){
        value ? hide(exposure) : show(exposure)
      } else if(el.id === "agc"){
        if (value) {
          show(gainCeiling)
          hide(agcGain)
        } else {
          hide(gainCeiling)
          show(agcGain)
        }
      } else if(el.id === "awb_gain"){
        value ? show(wb) : hide(wb)
      } else if(el.id === "face_recognize"){
        value ? enable(enrollButton) : disable(enrollButton)
      }
    }
  }
 
  function updateConfig (el) {
    let value
    switch (el.type) {
      case 'checkbox':
        value = el.checked ? 1 : 0
        break
      case 'range':
      case 'select-one':
        value = el.value
        break
      case 'button':
      case 'submit':
        value = '1'
        break
      default:
        return
    }
 
    const query = `${baseHost}/control?var=${el.id}&val=${value}`
 
    fetch(query)
      .then(response => {
        console.log(`request to ${query} finished, status: ${response.status}`)
      })
  }
 
  document
    .querySelectorAll('.close')
    .forEach(el => {
      el.onclick = () => {
        hide(el.parentNode)
      }
    })
 
  // read initial values
  fetch(`${baseHost}/status`)
    .then(function (response) {
      return response.json()
    })
    .then(function (state) {
      document
        .querySelectorAll('.default-action')
        .forEach(el => {
          updateValue(el, state[el.id], false)
        })
    })
 
  const view = document.getElementById('stream')
  const viewContainer = document.getElementById('stream-container')
  const stillButton = document.getElementById('get-still')
  const streamButton = document.getElementById('toggle-stream')
  const enrollButton = document.getElementById('face_enroll')
  const closeButton = document.getElementById('close-stream')
 
  const stopStream = () => {
    window.stop();
    streamButton.innerHTML = 'Start Stream'
  }
 
  const startStream = () => {
    view.src = `${streamUrl}/stream`
    show(viewContainer)
    streamButton.innerHTML = 'Stop Stream'
  }
 
  // Attach actions to buttons
  stillButton.onclick = () => {
    stopStream()
    view.src = `${baseHost}/capture?_cb=${Date.now()}`
    show(viewContainer)
  }
 
  closeButton.onclick = () => {
    stopStream()
    hide(viewContainer)
  }
 
  streamButton.onclick = () => {
    const streamEnabled = streamButton.innerHTML === 'Stop Stream'
    if (streamEnabled) {
      stopStream()
    } else {
      startStream()
    }
  }
 
  enrollButton.onclick = () => {
    updateConfig(enrollButton)
  }
 
  // Attach default on change action
  document
    .querySelectorAll('.default-action')
    .forEach(el => {
      el.onchange = () => updateConfig(el)
    })
 
  // Custom actions
  // Gain
  const agc = document.getElementById('agc')
  const agcGain = document.getElementById('agc_gain-group')
  const gainCeiling = document.getElementById('gainceiling-group')
  agc.onchange = () => {
    updateConfig(agc)
    if (agc.checked) {
      show(gainCeiling)
      hide(agcGain)
    } else {
      hide(gainCeiling)
      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
  const detect = 0
  const recognize = 0
  const framesize = document.getElementById('framesize')
 
  framesize.onchange = () => {
    updateConfig(framesize)
    if (framesize.value > 5) {
      updateValue(detect, false)
      updateValue(recognize, false)
    }
  }
 
  detect.onchange = () => {
    if (framesize.value > 5) {
      alert("Please select CIF or lower resolution before enabling this feature!");
      updateValue(detect, false)
      return;
    }
    updateConfig(detect)
    if (!detect.checked) {
      disable(enrollButton)
      updateValue(recognize, false)
    }
  }
 
  recognize.onchange = () => {
    if (framesize.value > 5) {
      alert("Please select CIF or lower resolution before enabling this feature!");
      updateValue(recognize, false)
      return;
    }
    updateConfig(recognize)
    if (recognize.checked) {
      enable(enrollButton)
      updateValue(detect, true)
    } else {
      disable(enrollButton)
    }
  }
})
 
 
        </script>
    </body>
</html>

2.增加页面配置

页面增加一个手动触发的按钮，方便测试，以及文本显示区域。在<nav id="menu"> </nav>标签内部增加下面内容。


                        <div class="input-group" id="datavar-consle-b">
                            <button type="button" onclick="loadXMLDoc()">请求数据</button>
                        </div>
                        <div class="input-group" id="datavar-consle-t">
                            <label for="contrast">变量:</label>
                            <input  class="textbox" id="datavar-text" name="datavar" type="text" value="" />
                        </div>

真正的实现，也就是从ESP32服务端获取传感器显示数据到页面的就是loadXMLDoc()函数

3.增加Javascript脚本程序

在原先的<script> </script>上方或者下方添加下面代码，请注意一定不要添加到内部。


        <script type=text/javascript>
            var xmlhttp;
            function loadXMLDoc()
            {
                if(window.XMLHttpRequest)
                {
                   xmlhttp = new XMLHttpRequest();
                }
                else
                {
                   xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
                }
                
                xmlhttp.onreadystatechange=handle;
                xmlhttp.open("get","/query",true);
                xmlhttp.send(null);
            }
            
            function handle()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var res = xmlhttp.responseText;
                    var data = document.getElementById('datavar-text');
                    console.log(res);
                    document.getElementById('datavar-text').value = res;
                    data.innerHTML = res;
                }
            } 
        </script>

这个代码的意思是生成一个http://[IP地址]/query的请求发送到ESP32服务器，然后通过handle处理结果，再通过标签datavar-text设置显示的文本值。

4.怎么实现自动刷新？

哈哈，其实很简单，在上面的loadXMLDoc()函数上方增加下面一行代码就行了。

setInterval("loadXMLDoc()",1000);

5.常见错误

(1) 找不到loadXMLDoc()函数

之前碰到的坑就是，控制台直接报错，找不到loadXMLDoc()函数，有可能是你把上面的程序加入到了document.addEventListener('DOMContentLoaded', function (event) { ... } 方括号内了。

(2) 找不到标签datavar-text

可能是你单双引号敲错了，或者没有敲。

三、ino程序修改

（1）app_httpd.cpp文件

1) startCameraServer函数增加下面的内容


    httpd_uri_t queryvar_uri = {
        .uri       = "/query",
        .method    = HTTP_GET,
        .handler   = query_handler,
        .user_ctx  = NULL
    };

httpd_register_uri_handler(camera_httpd, &queryvar_uri);

2) 增加query_handler处理函数


static esp_err_t query_handler(httpd_req_t *req){
    static char response[1024];
    char * p = response;
    int var = 10086;
 
    Serial.printf("var:%d", var);
    
    p+=sprintf(p, "%d", var);
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
    return httpd_resp_send(req, response, strlen(response));
}

四、整个文件程序

（1）index_ov2640.html文件


<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>ESP32</title>
        <style>
            body {
                font-family: Arial,Helvetica,sans-serif;
                background: #181818;
                color: #EFEFEF;
                font-size: 16px
            }
 
            h2 {
                font-size: 18px
            }
 
            section.main {
                display: flex
            }
 
            #menu,section.main {
                flex-direction: column
            }
 
            #menu {
                display: none;
                flex-wrap: nowrap;
                min-width: 340px;
                background: #363636;
                padding: 8px;
                border-radius: 4px;
                margin-top: -10px;
                margin-right: 10px;
            }
 
            #content {
                display: flex;
                flex-wrap: wrap;
                align-items: stretch
            }
 
            figure {
                padding: 0px;
                margin: 0;
                -webkit-margin-before: 0;
                margin-block-start: 0;
                -webkit-margin-after: 0;
                margin-block-end: 0;
                -webkit-margin-start: 0;
                margin-inline-start: 0;
                -webkit-margin-end: 0;
                margin-inline-end: 0
            }
 
            figure img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 4px;
                margin-top: 8px;
            }
 
            @media (min-width: 800px) and (orientation:landscape) {
                #content {
                    display:flex;
                    flex-wrap: nowrap;
                    align-items: stretch
                }
 
                figure img {
                    display: block;
                    max-width: 100%;
                    max-height: calc(100vh - 40px);
                    width: auto;
                    height: auto
                }
 
                figure {
                    padding: 0 0 0 0px;
                    margin: 0;
                    -webkit-margin-before: 0;
                    margin-block-start: 0;
                    -webkit-margin-after: 0;
                    margin-block-end: 0;
                    -webkit-margin-start: 0;
                    margin-inline-start: 0;
                    -webkit-margin-end: 0;
                    margin-inline-end: 0
                }
            }
 
            section#buttons {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between
            }
 
            #nav-toggle {
                cursor: pointer;
                display: block
            }
 
            #nav-toggle-cb {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }
 
            #nav-toggle-cb:checked+#menu {
                display: flex
            }
 
            .input-group {
                display: flex;
                flex-wrap: nowrap;
                line-height: 22px;
                margin: 5px 0
            }
 
            .input-group>label {
                display: inline-block;
                padding-right: 10px;
                min-width: 47%
            }
 
            .input-group input,.input-group select {
                flex-grow: 1
            }
 
            .range-max,.range-min {
                display: inline-block;
                padding: 0 5px
            }
 
            button {
                display: block;
                margin: 5px;
                padding: 0 12px;
                border: 0;
                line-height: 28px;
                cursor: pointer;
                color: #fff;
                background: #ff3034;
                border-radius: 5px;
                font-size: 16px;
                outline: 0
            }
 
            button:hover {
                background: #ff494d
            }
 
            button:active {
                background: #f21c21
            }
 
            button.disabled {
                cursor: default;
                background: #a0a0a0
            }
 
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                height: 22px;
                background: #363636;
                cursor: pointer;
                margin: 0
            }
 
            input[type=range]:focus {
                outline: 0
            }
 
            input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }
 
            input[type=range]::-webkit-slider-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                -webkit-appearance: none;
                margin-top: -11.5px
            }
 
            input[type=range]:focus::-webkit-slider-runnable-track {
                background: #EFEFEF
            }
 
            input[type=range]::-moz-range-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: #EFEFEF;
                border-radius: 0;
                border: 0 solid #EFEFEF
            }
 
            input[type=range]::-moz-range-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer
            }
 
            input[type=range]::-ms-track {
                width: 100%;
                height: 2px;
                cursor: pointer;
                background: 0 0;
                border-color: transparent;
                color: transparent
            }
 
            input[type=range]::-ms-fill-lower {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }
 
            input[type=range]::-ms-fill-upper {
                background: #EFEFEF;
                border: 0 solid #EFEFEF;
                border-radius: 0
            }
 
            input[type=range]::-ms-thumb {
                border: 1px solid rgba(0,0,30,0);
                height: 22px;
                width: 22px;
                border-radius: 50px;
                background: #ff3034;
                cursor: pointer;
                height: 2px
            }
 
            input[type=range]:focus::-ms-fill-lower {
                background: #EFEFEF
            }
 
            input[type=range]:focus::-ms-fill-upper {
                background: #363636
            }
 
            .switch {
                display: block;
                position: relative;
                line-height: 22px;
                font-size: 16px;
                height: 22px
            }
 
            .switch input {
                outline: 0;
                opacity: 0;
                width: 0;
                height: 0
            }
 
            .slider {
                width: 50px;
                height: 22px;
                border-radius: 22px;
                cursor: pointer;
                background-color: grey
            }
 
            .slider,.slider:before {
                display: inline-block;
                transition: .4s
            }
 
            .slider:before {
                position: relative;
                content: "";
                border-radius: 50%;
                height: 16px;
                width: 16px;
                left: 4px;
                top: 3px;
                background-color: #fff
            }
 
            input:checked+.slider {
                background-color: #ff3034
            }
 
            input:checked+.slider:before {
                -webkit-transform: translateX(26px);
                transform: translateX(26px)
            }
 
            select {
                border: 1px solid #363636;
                font-size: 14px;
                height: 22px;
                outline: 0;
                border-radius: 5px
            }
 
            .image-container {
                position: relative;
                min-width: 160px
            }
 
            .close {
                position: absolute;
                right: 5px;
                top: 5px;
                background: #ff3034;
                width: 16px;
                height: 16px;
                border-radius: 100px;
                color: #fff;
                text-align: center;
                line-height: 18px;
                cursor: pointer
            }
 
            .hidden {
                display: none
            }
        </style>
    </head>
    <body>
        <section class="main">
            <div id="logo">
                <label for="nav-toggle-cb" id="nav-toggle">&#9776;&nbsp;&nbsp;相机设置</label>
            </div>
            <div id="content">
                <div id="sidebar">
                    <input type="checkbox" id="nav-toggle-cb" checked="checked">
                    <nav id="menu">
                        <div class="input-group" id="framesize-group">
                            <label for="framesize">Resolution</label>
                            <select id="framesize" class="default-action">
                                <option value="10">UXGA(1600x1200)</option>
                                <option value="9">SXGA(1280x1024)</option>
                                <option value="8">XGA(1024x768)</option>
                                <option value="7">SVGA(800x600)</option>
                                <option value="6">VGA(640x480)</option>
                                <option value="5" selected="selected">CIF(400x296)</option>
                                <option value="4">QVGA(320x240)</option>
                                <option value="3">HQVGA(240x176)</option>
                                <option value="0">QQVGA(160x120)</option>
                            </select>
                        </div>
                        <div class="input-group" id="light-group">
                            <label for="lightbtn">Light Button</label>
                            <div class="switch">
                                <input id="lightbtn" type="checkbox" class="default-action">
                                <label class="slider" for="lightbtn"></label>
                            </div>
                        </div>
                        <div class="input-group" id="datavar-consle-b">
                            <button type="button" onclick="loadXMLDoc()">请求数据</button>
                        </div>
                        <div class="input-group" id="datavar-consle-t">
                            <label for="contrast">变量:</label>
                            <input  class="textbox" id="datavar-text" name="datavar" type="text" value="" />
                        </div>
                        <section id="buttons">
                            <button id="get-still">Get Still</button>
                            <button id="toggle-stream">Start Stream</button>
                            <button id="face_enroll" class="disabled" disabled="disabled">Enroll Face</button>
                        </section>
                    </nav>
                </div>
                <figure>
                    <div id="stream-container" class="image-container hidden">
                        <div class="close" id="close-stream">×</div>
                        <img id="stream" src="">
                    </div>
                </figure>
                <div id="dht"></div>
            </div>
        </section>
        <script type=text/javascript>
            var xmlhttp;
            setInterval("loadXMLDoc()",1000);
            function loadXMLDoc()
            {
                if(window.XMLHttpRequest)
                {
                   xmlhttp = new XMLHttpRequest();
                }
                else
                {
                   xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
                }
                
                xmlhttp.onreadystatechange=handle;
                xmlhttp.open("get","/query",true);
                xmlhttp.send(null);
            }
            
            function handle()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var res = xmlhttp.responseText;
                    var data = document.getElementById('datavar-text');
                    console.log(res);
                    document.getElementById('datavar-text').value = res;
                    data.innerHTML = res;
                }
            } 
        </script> 
    <script>
document.addEventListener('DOMContentLoaded', function (event) {
  var baseHost = document.location.origin
  var streamUrl = baseHost + ':81'
 
  const hide = el => {
    el.classList.add('hidden')
  }
  const show = el => {
    el.classList.remove('hidden')
  }
 
  const disable = el => {
    el.classList.add('disabled')
    el.disabled = true
  }
 
  const enable = el => {
    el.classList.remove('disabled')
    el.disabled = false
  }
 
  const updateValue = (el, value, updateRemote) => {
    updateRemote = updateRemote == null ? true : updateRemote
    let initialValue
    if (el.type === 'checkbox') {
      initialValue = el.checked
      value = !!value
      el.checked = value
    } else {
      initialValue = el.value
      el.value = value
    }
 
    if (updateRemote && initialValue !== value) {
      updateConfig(el);
    } else if(!updateRemote){
      if(el.id === "aec"){
        value ? hide(exposure) : show(exposure)
      } else if(el.id === "agc"){
        if (value) {
          show(gainCeiling)
          hide(agcGain)
        } else {
          hide(gainCeiling)
          show(agcGain)
        }
      } else if(el.id === "awb_gain"){
        value ? show(wb) : hide(wb)
      } else if(el.id === "face_recognize"){
        value ? enable(enrollButton) : disable(enrollButton)
      }
    }
  }
 
  function updateConfig (el) {
    let value
    switch (el.type) {
      case 'checkbox':
        value = el.checked ? 1 : 0
        break
      case 'range':
      case 'select-one':
        value = el.value
        break
      case 'button':
      case 'submit':
        value = '1'
        break
      default:
        return
    }
 
    const query = `${baseHost}/control?var=${el.id}&val=${value}`
 
    fetch(query)
      .then(response => {
        console.log(`request to ${query} finished, status: ${response.status}`)
      })
  }
 
  document
    .querySelectorAll('.close')
    .forEach(el => {
      el.onclick = () => {
        hide(el.parentNode)
      }
    })
 
  // read initial values
  fetch(`${baseHost}/status`)
    .then(function (response) {
      return response.json()
    })
    .then(function (state) {
      document
        .querySelectorAll('.default-action')
        .forEach(el => {
          updateValue(el, state[el.id], false)
        })
    })
 
  const view = document.getElementById('stream')
  const viewContainer = document.getElementById('stream-container')
  const stillButton = document.getElementById('get-still')
  const streamButton = document.getElementById('toggle-stream')
  const enrollButton = document.getElementById('face_enroll')
  const closeButton = document.getElementById('close-stream')
 
  const stopStream = () => {
    window.stop();
    streamButton.innerHTML = 'Start Stream'
  }
 
  const startStream = () => {
    view.src = `${streamUrl}/stream`
    show(viewContainer)
    streamButton.innerHTML = 'Stop Stream'
  }
 
  // Attach actions to buttons
  stillButton.onclick = () => {
    stopStream()
    view.src = `${baseHost}/capture?_cb=${Date.now()}`
    show(viewContainer)
  }
 
  closeButton.onclick = () => {
    stopStream()
    hide(viewContainer)
  }
 
  streamButton.onclick = () => {
    const streamEnabled = streamButton.innerHTML === 'Stop Stream'
    if (streamEnabled) {
      stopStream()
    } else {
      startStream()
    }
  }
 
  enrollButton.onclick = () => {
    updateConfig(enrollButton)
  }
 
  // Attach default on change action
  document
    .querySelectorAll('.default-action')
    .forEach(el => {
      el.onchange = () => updateConfig(el)
    })
 
  // Custom actions
  // Gain
  const agc = document.getElementById('agc')
  const agcGain = document.getElementById('agc_gain-group')
  const gainCeiling = document.getElementById('gainceiling-group')
  agc.onchange = () => {
    updateConfig(agc)
    if (agc.checked) {
      show(gainCeiling)
      hide(agcGain)
    } else {
      hide(gainCeiling)
      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
  const detect = 0
  const recognize = 0
  const framesize = document.getElementById('framesize')
 
  framesize.onchange = () => {
    updateConfig(framesize)
    if (framesize.value > 5) {
      updateValue(detect, false)
      updateValue(recognize, false)
    }
  }
 
  detect.onchange = () => {
    if (framesize.value > 5) {
      alert("Please select CIF or lower resolution before enabling this feature!");
      updateValue(detect, false)
      return;
    }
    updateConfig(detect)
    if (!detect.checked) {
      disable(enrollButton)
      updateValue(recognize, false)
    }
  }
 
  recognize.onchange = () => {
    if (framesize.value > 5) {
      alert("Please select CIF or lower resolution before enabling this feature!");
      updateValue(recognize, false)
      return;
    }
    updateConfig(recognize)
    if (recognize.checked) {
      enable(enrollButton)
      updateValue(detect, true)
    } else {
      disable(enrollButton)
    }
  }
})
 
 
        </script>
    </body>
</html>

（2）app_httpd.cpp文件


// Copyright 2015-2016 Espressif Systems (Shanghai) PTE LTD
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
#include "esp_http_server.h"
#include "esp_timer.h"
#include "esp_camera.h"
#include "img_converters.h"
#include "camera_index.h"
#include "Arduino.h"
 
#include "fb_gfx.h"
#include "fd_forward.h"
#include "fr_forward.h"
 
#define ENROLL_CONFIRM_TIMES 5
#define FACE_ID_SAVE_NUMBER 7
#define LINE_RECOGINE_MEDIAN_THD   80
 
#define FACE_COLOR_WHITE  0x00FFFFFF
#define FACE_COLOR_BLACK  0x00000000
#define FACE_COLOR_RED    0x000000FF
#define FACE_COLOR_GREEN  0x0000FF00
#define FACE_COLOR_BLUE   0x00FF0000
#define FACE_COLOR_YELLOW (FACE_COLOR_RED | FACE_COLOR_GREEN)
#define FACE_COLOR_CYAN   (FACE_COLOR_BLUE | FACE_COLOR_GREEN)
#define FACE_COLOR_PURPLE (FACE_COLOR_BLUE | FACE_COLOR_RED)
 
typedef struct {
        size_t size; //number of values used for filtering
        size_t index; //current value index
        size_t count; //value count
        int sum;
        int * values; //array to be filled with values
} ra_filter_t;
 
typedef struct {
        httpd_req_t *req;
        size_t len;
} jpg_chunking_t;
 
typedef struct
{
    float star_point[2];
    float end_point[2];
} line_t;
 
typedef struct tag_line_list
{
    float score;
    line_t *line;
    int len;
} line_array_t;
 
#define PART_BOUNDARY "123456789000000000000987654321"
static const char* _STREAM_CONTENT_TYPE = "multipart/x-mixed-replace;boundary=" PART_BOUNDARY;
static const char* _STREAM_BOUNDARY = "\r\n--" PART_BOUNDARY "\r\n";
static const char* _STREAM_PART = "Content-Type: image/jpeg\r\nContent-Length: %u\r\n\r\n";
 
static bool light_flag = 0;
static bool linedetect = 0;
static ra_filter_t ra_filter;
httpd_handle_t stream_httpd = NULL;
httpd_handle_t camera_httpd = NULL;
 
static mtmn_config_t mtmn_config = {0};
static int8_t detection_enabled = 0;
static int8_t recognition_enabled = 0;
static int8_t is_enrolling = 0;
static face_id_list id_list = {0};
static ra_filter_t * ra_filter_init(ra_filter_t * filter, size_t sample_size){
    memset(filter, 0, sizeof(ra_filter_t));
 
    filter->values = (int *)malloc(sample_size * sizeof(int));
    if(!filter->values){
        return NULL;
    }
    memset(filter->values, 0, sample_size * sizeof(int));
 
    filter->size = sample_size;
    return filter;
}
 
static int ra_filter_run(ra_filter_t * filter, int value){
    if(!filter->values){
        return value;
    }
    filter->sum -= filter->values[filter->index];
    filter->values[filter->index] = value;
    filter->sum += filter->values[filter->index];
    filter->index++;
    filter->index = filter->index % filter->size;
    if (filter->count < filter->size) {
        filter->count++;
    }
    return filter->sum / filter->count;
}
 
static void rgb_print(dl_matrix3du_t *image_matrix, uint32_t color, const char * str){
    fb_data_t fb;
    fb.width = image_matrix->w;
    fb.height = image_matrix->h;
    fb.data = image_matrix->item;
    fb.bytes_per_pixel = 3;
    fb.format = FB_BGR888;
    fb_gfx_print(&fb, (fb.width - (strlen(str) * 14)) / 2, 10, color, str);
}
 
static int rgb_printf(dl_matrix3du_t *image_matrix, uint32_t color, const char *format, ...){
    char loc_buf[64];
    char * temp = loc_buf;
    int len;
    va_list arg;
    va_list copy;
    va_start(arg, format);
    va_copy(copy, arg);
    len = vsnprintf(loc_buf, sizeof(loc_buf), format, arg);
    va_end(copy);
    if(len >= sizeof(loc_buf)){
        temp = (char*)malloc(len+1);
        if(temp == NULL) {
            return 0;
        }
    }
    vsnprintf(temp, len+1, format, arg);
    va_end(arg);
    rgb_print(image_matrix, color, temp);
    if(len > 64){
        free(temp);
    }
    return len;
}
 
static void draw_face_boxes(dl_matrix3du_t *image_matrix, box_array_t *boxes, int face_id){
    int x, y, w, h, i;
    uint32_t color = FACE_COLOR_YELLOW;
    if(face_id < 0){
        color = FACE_COLOR_RED;
    } else if(face_id > 0){
        color = FACE_COLOR_GREEN;
    }
    fb_data_t fb;
    fb.width = image_matrix->w;
    fb.height = image_matrix->h;
    fb.data = image_matrix->item;
    fb.bytes_per_pixel = 3;
    fb.format = FB_BGR888;
    for (i = 0; i < boxes->len; i++){
        // rectangle box
        x = (int)boxes->box[i].box_p[0];
        y = (int)boxes->box[i].box_p[1];
        w = (int)boxes->box[i].box_p[2] - x + 1;
        h = (int)boxes->box[i].box_p[3] - y + 1;
        fb_gfx_drawFastHLine(&fb, x, y, w, color);
        fb_gfx_drawFastHLine(&fb, x, y+h-1, w, color);
        fb_gfx_drawFastVLine(&fb, x, y, h, color);
        fb_gfx_drawFastVLine(&fb, x+w-1, y, h, color);
#if 0
        // landmark
        int x0, y0, j;
        for (j = 0; j < 10; j+=2) {
            x0 = (int)boxes->landmark[i].landmark_p[j];
            y0 = (int)boxes->landmark[i].landmark_p[j+1];
            fb_gfx_fillRect(&fb, x0, y0, 3, 3, color);
        }
#endif
    }
}
 
static int run_face_recognition(dl_matrix3du_t *image_matrix, box_array_t *net_boxes){
    dl_matrix3du_t *aligned_face = NULL;
    int matched_id = 0;
 
    aligned_face = dl_matrix3du_alloc(1, FACE_WIDTH, FACE_HEIGHT, 3);
    if(!aligned_face){
        Serial.println("Could not allocate face recognition buffer");
        return matched_id;
    }
    if (align_face(net_boxes, image_matrix, aligned_face) == ESP_OK){
        if (is_enrolling == 1){
            int8_t left_sample_face = enroll_face(&id_list, aligned_face);
 
            if(left_sample_face == (ENROLL_CONFIRM_TIMES - 1)){
                Serial.printf("Enrolling Face ID: %d\n", id_list.tail);
            }
            Serial.printf("Enrolling Face ID: %d sample %d\n", id_list.tail, ENROLL_CONFIRM_TIMES - left_sample_face);
            rgb_printf(image_matrix, FACE_COLOR_CYAN, "ID[%u] Sample[%u]", id_list.tail, ENROLL_CONFIRM_TIMES - left_sample_face);
            if (left_sample_face == 0){
                is_enrolling = 0;
                Serial.printf("Enrolled Face ID: %d\n", id_list.tail);
            }
        } else {
            matched_id = recognize_face(&id_list, aligned_face);
            if (matched_id >= 0) {
                Serial.printf("Match Face ID: %u\n", matched_id);
                rgb_printf(image_matrix, FACE_COLOR_GREEN, "Hello Subject %u", matched_id);
            } else {
                Serial.println("No Match Found");
                rgb_print(image_matrix, FACE_COLOR_RED, "Intruder Alert!");
                matched_id = -1;
            }
        }
    } else {
        Serial.println("Face Not Aligned");
        //rgb_print(image_matrix, FACE_COLOR_YELLOW, "Human Detected");
    }
 
    dl_matrix3du_free(aligned_face);
    return matched_id;
}
 
static size_t jpg_encode_stream(void * arg, size_t index, const void* data, size_t len){
    jpg_chunking_t *j = (jpg_chunking_t *)arg;
    if(!index){
        j->len = 0;
    }
    if(httpd_resp_send_chunk(j->req, (const char *)data, len) != ESP_OK){
        return 0;
    }
    j->len += len;
    return len;
}
 
static esp_err_t capture_handler(httpd_req_t *req){
    camera_fb_t * fb = NULL;
    esp_err_t res = ESP_OK;
    int64_t fr_start = esp_timer_get_time();
 
    fb = esp_camera_fb_get();
    if (!fb) {
        Serial.println("Camera capture failed");
        httpd_resp_send_500(req);
        return ESP_FAIL;
    }
 
    httpd_resp_set_type(req, "image/jpeg");
    httpd_resp_set_hdr(req, "Content-Disposition", "inline; filename=capture.jpg");
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
 
    size_t out_len, out_width, out_height;
    uint8_t * out_buf;
    bool s;
    bool detected = false;
    int face_id = 0;
    if(!detection_enabled || fb->width > 400){
        size_t fb_len = 0;
        if(fb->format == PIXFORMAT_JPEG){
            fb_len = fb->len;
            res = httpd_resp_send(req, (const char *)fb->buf, fb->len);
        } else {
            jpg_chunking_t jchunk = {req, 0};
            res = frame2jpg_cb(fb, 80, jpg_encode_stream, &jchunk)?ESP_OK:ESP_FAIL;
            httpd_resp_send_chunk(req, NULL, 0);
            fb_len = jchunk.len;
        }
        esp_camera_fb_return(fb);
        int64_t fr_end = esp_timer_get_time();
        Serial.printf("JPG: %uB %ums\n", (uint32_t)(fb_len), (uint32_t)((fr_end - fr_start)/1000));
        return res;
    }
 
    dl_matrix3du_t *image_matrix = dl_matrix3du_alloc(1, fb->width, fb->height, 3);
    if (!image_matrix) {
        esp_camera_fb_return(fb);
        Serial.println("dl_matrix3du_alloc failed");
        httpd_resp_send_500(req);
        return ESP_FAIL;
    }
 
    out_buf = image_matrix->item;
    out_len = fb->width * fb->height * 3;
    out_width = fb->width;
    out_height = fb->height;
 
    s = fmt2rgb888(fb->buf, fb->len, fb->format, out_buf);
    esp_camera_fb_return(fb);
    if(!s){
        dl_matrix3du_free(image_matrix);
        Serial.println("to rgb888 failed");
        httpd_resp_send_500(req);
        return ESP_FAIL;
    }
 
    box_array_t *net_boxes = face_detect(image_matrix, &mtmn_config);
 
    if (net_boxes){
        detected = true;
        if(recognition_enabled){
            face_id = run_face_recognition(image_matrix, net_boxes);
        }
        draw_face_boxes(image_matrix, net_boxes, face_id);
        free(net_boxes->score);
        free(net_boxes->box);
        free(net_boxes->landmark);
        free(net_boxes);
    }
 
    jpg_chunking_t jchunk = {req, 0};
    s = fmt2jpg_cb(out_buf, out_len, out_width, out_height, PIXFORMAT_RGB888, 90, jpg_encode_stream, &jchunk);
    dl_matrix3du_free(image_matrix);
    if(!s){
        Serial.println("JPEG compression failed");
        return ESP_FAIL;
    }
 
    int64_t fr_end = esp_timer_get_time();
    Serial.printf("FACE: %uB %ums %s%d\n", (uint32_t)(jchunk.len), (uint32_t)((fr_end - fr_start)/1000), detected?"DETECTED ":"", face_id);
    return res;
}
 
uint8_t median(uint8_t sortArray[], uint8_t len) {
  uint8_t i,j,temp,flag;
 
  for(j=0; j<len-1; j++) {
    flag = 0;
    for (i=0; i<len-j; i++) {
      if (sortArray[j] > sortArray[j+1]) {
        flag = 1;
        temp = sortArray[j];
        sortArray[j] = sortArray[j+1];
        sortArray[j+1] = temp;
      }
    }
    if (!flag) {
      break;
    }
  }
 
//  Serial.printf(" m:%d ", sortArray[(len-1)/2]);
  return sortArray[(len-1)/2];
}
 
//image_matrix数据格式为一维数组，实际格式为[B G R]三个一组数据，第一行的列(共image_matrix->w列)排完，再写第N行(共image_matrix->h行)
static line_array_t* recoginLines(dl_matrix3du_t *image_matrix) {
  uint16_t i,j,x,y;
  uint8_t **gray_img = NULL;
  uint8_t **gray_filter_img = NULL;
  float sx,sy;
  line_array_t *line_result = NULL;
  uint8_t medianArray[9];
  bool realse_flag = 1;
  uint16_t line_len[5] = {0};
  uint8_t k=0;
  uint8_t line_num = 0;
 
  gray_img = (uint8_t**)malloc(sizeof(uint8_t*)*image_matrix->h);
  if (gray_img){
    for(j=0;j<image_matrix->h;j++) {
      gray_img[j] = (uint8_t*)malloc(sizeof(uint8_t)*image_matrix->w);
      if (!gray_img[j]) {
        Serial.printf("malloc gray_img[%d] failed",j);
        goto __FREE_POINTER;
      }
    }
  } else {
    Serial.println("malloc gray_img failed");
    goto __FREE_POINTER;
  }
 
  //灰度化图像
//  Serial.println("matrix_gs:");
  for (j=0;j<image_matrix->h;j++) {
    for (i=0; i<image_matrix->w; i++) {
      gray_img[j][i] = uint8_t(0.114 * image_matrix->item[3*(j*image_matrix->w+i)] + 0.587 * image_matrix->item[3*(j*image_matrix->w+i)+1] + 0.2989 * image_matrix->item[3*(j*image_matrix->w+i)+2]);
//      Serial.printf(" %d",gray_img[j][i]);
    }
  }
//  Serial.println("matrix_ge:");
 
  //均值滤波
  gray_filter_img = (uint8_t**)malloc(sizeof(uint8_t*)*(image_matrix->h-1));
  if (!gray_filter_img) {
    Serial.println("malloc gray_filter_img failed");
    goto __FREE_POINTER;
  }
  gray_filter_img[0] = (uint8_t*)malloc(sizeof(uint8_t)*(image_matrix->w-1));
  memset(gray_filter_img[0], 0, sizeof(uint8_t)*(image_matrix->w-1));
  if (!gray_filter_img[0]) {
    Serial.println("malloc gray_filter_img[0] failed");
    goto __FREE_POINTER;
  }
//  Serial.println("matrix_s:");
  for (y=1; y<image_matrix->h-1; y++) {
    gray_filter_img[y] = (uint8_t*)malloc(sizeof(uint8_t)*(image_matrix->w-1));
    memset(gray_filter_img[y], 0, sizeof(uint8_t)*(image_matrix->w-1));
    if (!gray_filter_img[y]) {
      Serial.printf("malloc gray_filter_img[%d] failed",y);
      goto __FREE_POINTER;
    }
    for (x=1; x<image_matrix->w-1; x++) {
      medianArray[0] = gray_img[y-1][x-1];
      medianArray[1] = gray_img[y-1][x];
      medianArray[2] = gray_img[y-1][x+1];
      medianArray[3] = gray_img[y][x-1];
      medianArray[4] = gray_img[y][x];
      medianArray[5] = gray_img[y][x+1];
      medianArray[6] = gray_img[y+1][x-1];
      medianArray[7] = gray_img[y+1][x];
      medianArray[8] = gray_img[y+1][x+1];
//      gray_filter_img[y][x] = median(medianArray,9);
//      Serial.printf(" %d",gray_filter_img[y][x]);
      gray_filter_img[y][x] = median(medianArray,9)> LINE_RECOGINE_MEDIAN_THD ? 255: 0;
    }
  }
  Serial.println("matrix_e:");
  line_result = (line_array_t*)malloc(sizeof(line_array_t));
  if (line_result) {
    line_result->len=0;
    line_result->line = (line_t*)malloc(sizeof(line_t)* image_matrix->h);
    memset(line_result->line, 0, sizeof(line_t)* image_matrix->h);
//    Serial.println("line:");
    if (line_result->line) {
      for(y=1; y<image_matrix->h-1; y++) {
        for(x=1; x<image_matrix->w-1; x++) {
//          Serial.printf(" y:%d x:%d",y,x);
          if ((gray_filter_img[y][x-1] == 0) && (gray_filter_img[y][x] == 255)) {
            if (y==1) {
              line_result->line[y-1].star_point[0] = x;
              line_result->line[y-1].star_point[1] = y;
              line_result->line[y-1].end_point[0] = x;
              line_result->line[y-1].end_point[1] = y;
            } else {
              line_result->line[y-1].star_point[0] = line_result->line[y-2].end_point[0];
              line_result->line[y-1].star_point[1] = line_result->line[y-2].end_point[1];
              line_result->line[y-1].end_point[0] = x;
              line_result->line[y-1].end_point[1] = y;
            }
 
            //5个像素点阈值
            if ((abs(line_result->line[y-1].end_point[0] -  line_result->line[y-1].star_point[0]) < 5) && (abs(line_result->line[y-1].end_point[1] -  line_result->line[y-1].star_point[1]) < 5)) {
              line_len[k]++;
            } else {
              k++;
              if (k>4) {
                k=0;
              }
            }
            line_result->len++;
            break;
          }
        }
      }
      realse_flag = 0;
    } else {
      Serial.println("malloc line_result->line fail");
      goto __FREE_POINTER;
    }
  } else {
    Serial.println("malloc line_result fail");
    goto __FREE_POINTER;
  }
 
  line_num = 0;
  for(i=0; i<5; i++) {
    if (line_len[i] > 50) {
      line_num++;
    }
  }
 
  if (line_num == 1) {
    line_result->score = 1.0;
  } else {
    Serial.printf("line_num:%d ",line_num);
    line_result->score = 0.0;
  }
 
__FREE_POINTER:
  //释放内存
  if (realse_flag) {
    if (line_result) {
      if (line_result->line) {
        free(line_result->line);
      }
      free(line_result);
      line_result = NULL;
    }
  }
  
  if (gray_filter_img) {
    for (j=0;j<image_matrix->h-1;j++) {
      if (gray_filter_img[j]) {
        free(gray_filter_img[j]);
      }
    }
    free(gray_filter_img);
  }
 
  if (gray_img) {
    for(j=0;j<image_matrix->h;j++) {
      if (gray_img[j]) {
        free(gray_img[j]);
      }
    }
    free(gray_img);
  }
 
  return line_result;
}
 
static void draw_lines(dl_matrix3du_t *image_matrix,line_array_t *lines) {
  int x0, y0, x1, y1, w, h, i, j;
  float temp = 0.0;
  uint32_t color = FACE_COLOR_RED;
  fb_data_t fb;
  fb.width = image_matrix->w;
  fb.height = image_matrix->h;
  fb.data = image_matrix->item;
  fb.bytes_per_pixel = 3;
  fb.format = FB_BGR888;
  for (i = 0; i < lines->len; i++){
      // rectangle box
      x0 = (int)lines->line[i].star_point[0];
      y0 = (int)lines->line[i].star_point[1];
      x1 = (int)lines->line[i].end_point[0];
      y1 = (int)lines->line[i].end_point[1];
      w = (int)x1 - x0 + 1;
      h = (int)y1 - y0 + 1;
 
//      Serial.printf("x0:%d y0:%d w:%d h:%d temp:%f", x0, y0, w, h, temp);
      if ((x0>0 && abs(x0) < image_matrix->w) && (y0>0 && abs(y0) < image_matrix->h) && (x1>0 && abs(x1) < image_matrix->w) && (y1>0 && abs(y1) < image_matrix->h)) {
        if (w > h) {
          temp = 1.0*h/w;
          for (j=0; j < w; j++) {
            fb_gfx_drawFastHLine(&fb, x0+j, y0+int(temp*j), 1, color);
            fb_gfx_drawFastVLine(&fb, x0+(j+1), y0+int(temp*j), 1, color);
         }
        } else {
          temp = 1.0*w/h;
          for (j=0; j < h; j++) {
            fb_gfx_drawFastVLine(&fb, x0+int(temp*j), y0+j, 1, color);
            fb_gfx_drawFastHLine(&fb, x0+int(temp*j), y0+(j+1), 1, color);
          }
        }
      }
  }
}
 
static esp_err_t stream_handler(httpd_req_t *req){
    camera_fb_t * fb = NULL;
    esp_err_t res = ESP_OK;
    size_t _jpg_buf_len = 0;
    uint8_t * _jpg_buf = NULL;
    char * part_buf[64];
    dl_matrix3du_t *image_matrix = NULL;
    bool detected = false;
    int face_id = 0;
    int64_t fr_start = 0;
    int64_t fr_ready = 0;
    int64_t fr_face = 0;
    int64_t fr_recognize = 0;
    int64_t fr_encode = 0;
 
    static int64_t last_frame = 0;
    if(!last_frame) {
        last_frame = esp_timer_get_time();
    }
 
    res = httpd_resp_set_type(req, _STREAM_CONTENT_TYPE);
    if(res != ESP_OK){
        return res;
    }
 
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
 
    while(true){
        detected = false;
        face_id = 0;
        fb = esp_camera_fb_get();
        if (!fb) {
            Serial.println("Camera capture failed");
            res = ESP_FAIL;
        } else {
            fr_start = esp_timer_get_time();
            fr_ready = fr_start;
            fr_face = fr_start;
            fr_encode = fr_start;
            fr_recognize = fr_start;
            if(!linedetect || fb->width > 240){
                if(fb->format != PIXFORMAT_JPEG){
                    bool jpeg_converted = frame2jpg(fb, 80, &_jpg_buf, &_jpg_buf_len);
                    esp_camera_fb_return(fb);
                    fb = NULL;
                    if(!jpeg_converted){
                        Serial.println("JPEG compression failed");
                        res = ESP_FAIL;
                    }
                } else {
                    _jpg_buf_len = fb->len;
                    _jpg_buf = fb->buf;
                }
            } else {
              image_matrix = dl_matrix3du_alloc(1, fb->width, fb->height, 3);
              Serial.printf("image: w:%d h:%d size:%d %d", fb->width, fb->height, fb->len, sizeof(fb->buf));
              if (!image_matrix) {
                  Serial.println("dl_matrix3du_alloc failed");
                  res = ESP_FAIL;
              } else {
                  if(!fmt2rgb888(fb->buf, fb->len, fb->format, image_matrix->item)){
                      Serial.println("fmt2rgb888 failed");
                      res = ESP_FAIL;
                  } else {
                    fr_ready = esp_timer_get_time();
                    line_array_t *lines = NULL;
                    if (linedetect) {
//                        //测试画图时使用
//                      line_array_t *tempLines = (line_array_t*) malloc(sizeof(line_array_t));
//                      tempLines->score = 0.66;
//                      tempLines->len=4;
//                      line_t *lineArray = (line_t*) malloc(tempLines->len * sizeof(line_t));
//                      if (lineArray) {
//                        lineArray[0].star_point[0] = 100;
//                        lineArray[0].star_point[1] = 100;
//                        lineArray[0].end_point[0] = 120;
//                        lineArray[0].end_point[1] = 100;
//
//                        lineArray[1].star_point[0] = 50;
//                        lineArray[1].star_point[1] = 50;
//                        lineArray[1].end_point[0] = 50;
//                        lineArray[1].end_point[1] = 120;
//
//                        lineArray[2].star_point[0] = 130;
//                        lineArray[2].star_point[1] = 130;
//                        lineArray[2].end_point[0] = 140;
//                        lineArray[2].end_point[1] = 140;
//
//                        lineArray[3].star_point[0] = 200;
//                        lineArray[3].star_point[1] = 200;
//                        lineArray[3].end_point[0] = 250;
//                        lineArray[3].end_point[1] = 150;
//                      }
//                      tempLines->line = lineArray;
//                      lines = tempLines;
                        lines = recoginLines(image_matrix);
                    }
                    fr_face = esp_timer_get_time();
                    fr_recognize = fr_face;
                    if (lines || fb->format != PIXFORMAT_JPEG) {
                      if (lines) {
                        detected = true;
                        fr_recognize = esp_timer_get_time();
                        draw_lines(image_matrix, lines);
                        free(lines->line);
                        free(lines);
                      }
                      if(!fmt2jpg(image_matrix->item, fb->width*fb->height*3, fb->width, fb->height, PIXFORMAT_RGB888, 90, &_jpg_buf, &_jpg_buf_len)){
                        Serial.println("fmt2jpg failed");
                        res = ESP_FAIL;
                      }
                      esp_camera_fb_return(fb);
                      fb = NULL;
                    } else {
                        _jpg_buf = fb->buf;
                        _jpg_buf_len = fb->len;
                    }
                    fr_encode = esp_timer_get_time();
                  }
                  dl_matrix3du_free(image_matrix);
              }
            }
        }
        if(res == ESP_OK){
            res = httpd_resp_send_chunk(req, _STREAM_BOUNDARY, strlen(_STREAM_BOUNDARY));
        }
        if(res == ESP_OK){
            size_t hlen = snprintf((char *)part_buf, 64, _STREAM_PART, _jpg_buf_len);
            res = httpd_resp_send_chunk(req, (const char *)part_buf, hlen);
        }
        if(res == ESP_OK){
            res = httpd_resp_send_chunk(req, (const char *)_jpg_buf, _jpg_buf_len);
        }
        if(fb){
            esp_camera_fb_return(fb);
            fb = NULL;
            _jpg_buf = NULL;
        } else if(_jpg_buf){
            free(_jpg_buf);
            _jpg_buf = NULL;
        }
        if(res != ESP_OK){
            break;
        }
        int64_t fr_end = esp_timer_get_time();
 
        int64_t ready_time = (fr_ready - fr_start)/1000;
        int64_t face_time = (fr_face - fr_ready)/1000;
        int64_t recognize_time = (fr_recognize - fr_face)/1000;
        int64_t encode_time = (fr_encode - fr_recognize)/1000;
        int64_t process_time = (fr_encode - fr_start)/1000;
        
        int64_t frame_time = fr_end - last_frame;
        last_frame = fr_end;
        frame_time /= 1000;
        uint32_t avg_frame_time = ra_filter_run(&ra_filter, frame_time);
        Serial.printf("MJPG: %uB %ums (%.1ffps), AVG: %ums (%.1ffps), %u+%u+%u+%u=%u %s%d\n",
            (uint32_t)(_jpg_buf_len),
            (uint32_t)frame_time, 1000.0 / (uint32_t)frame_time,
            avg_frame_time, 1000.0 / avg_frame_time,
            (uint32_t)ready_time, (uint32_t)face_time, (uint32_t)recognize_time, (uint32_t)encode_time, (uint32_t)process_time,
            (detected)?"DETECTED ":"", face_id
        );
    }
 
    last_frame = 0;
    return res;
}
 
static esp_err_t cmd_handler(httpd_req_t *req){
    char*  buf;
    size_t buf_len;
    char variable[32] = {0,};
    char value[32] = {0,};
 
    buf_len = httpd_req_get_url_query_len(req) + 1;
    if (buf_len > 1) {
        buf = (char*)malloc(buf_len);
        if(!buf){
            httpd_resp_send_500(req);
            return ESP_FAIL;
        }
        if (httpd_req_get_url_query_str(req, buf, buf_len) == ESP_OK) {
            if (httpd_query_key_value(buf, "var", variable, sizeof(variable)) == ESP_OK &&
                httpd_query_key_value(buf, "val", value, sizeof(value)) == ESP_OK) {
            } else {
                free(buf);
                httpd_resp_send_404(req);
                return ESP_FAIL;
            }
        } else {
            free(buf);
            httpd_resp_send_404(req);
            return ESP_FAIL;
        }
        free(buf);
    } else {
        httpd_resp_send_404(req);
        return ESP_FAIL;
    }
 
    int val = atoi(value);
    sensor_t * s = esp_camera_sensor_get();
    int res = 0;
 
    
    if(!strcmp(variable, "framesize")) {
        if(s->pixformat == PIXFORMAT_JPEG) res = s->set_framesize(s, (framesize_t)val);
    }
    else if(!strcmp(variable, "quality")) res = s->set_quality(s, val);
    else if(!strcmp(variable, "contrast")) res = s->set_contrast(s, val);
    else if(!strcmp(variable, "brightness")) res = s->set_brightness(s, val);
    else if(!strcmp(variable, "saturation")) res = s->set_saturation(s, val);
    else if(!strcmp(variable, "gainceiling")) res = s->set_gainceiling(s, (gainceiling_t)val);
    else if(!strcmp(variable, "colorbar")) res = s->set_colorbar(s, val);
    else if(!strcmp(variable, "awb")) res = s->set_whitebal(s, val);
    else if(!strcmp(variable, "agc")) res = s->set_gain_ctrl(s, val);
    else if(!strcmp(variable, "aec")) res = s->set_exposure_ctrl(s, val);
    else if(!strcmp(variable, "hmirror")) res = s->set_hmirror(s, val);
    else if(!strcmp(variable, "vflip")) res = s->set_vflip(s, val);
    else if(!strcmp(variable, "awb_gain")) res = s->set_awb_gain(s, val);
    else if(!strcmp(variable, "agc_gain")) res = s->set_agc_gain(s, val);
    else if(!strcmp(variable, "aec_value")) res = s->set_aec_value(s, val);
    else if(!strcmp(variable, "aec2")) res = s->set_aec2(s, val);
    else if(!strcmp(variable, "dcw")) res = s->set_dcw(s, val);
    else if(!strcmp(variable, "bpc")) res = s->set_bpc(s, val);
    else if(!strcmp(variable, "wpc")) res = s->set_wpc(s, val);
    else if(!strcmp(variable, "raw_gma")) res = s->set_raw_gma(s, val);
    else if(!strcmp(variable, "lenc")) res = s->set_lenc(s, val);
    else if(!strcmp(variable, "special_effect")) res = s->set_special_effect(s, val);
    else if(!strcmp(variable, "wb_mode")) res = s->set_wb_mode(s, val);
    else if(!strcmp(variable, "ae_level")) res = s->set_ae_level(s, val);
    else if(!strcmp(variable, "lightbtn")) {
        light_flag = val;
        digitalWrite(4, light_flag);
        Serial.printf("lightbtn:%d", digitalRead(4));
    }
    else if(!strcmp(variable, "linedetect")) {
        linedetect = val;
        Serial.printf("linedetect:%d", linedetect);
    }
    else if(!strcmp(variable, "face_detect")) {
        detection_enabled = val;
        if(!detection_enabled) {
            recognition_enabled = 0;
        }
    }
    else if(!strcmp(variable, "face_enroll")) is_enrolling = val;
    else if(!strcmp(variable, "face_recognize")) {
        recognition_enabled = val;
        if(recognition_enabled){
            detection_enabled = val;
        }
    }
    else {
        res = -1;
    }
 
    if(res){
        return httpd_resp_send_500(req);
    }
 
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
    return httpd_resp_send(req, NULL, 0);
}
 
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;
    *p++ = '{';
 
    p+=sprintf(p, "\"framesize\":%u,", s->status.framesize);
    p+=sprintf(p, "\"quality\":%u,", s->status.quality);
    p+=sprintf(p, "\"brightness\":%d,", s->status.brightness);
    p+=sprintf(p, "\"contrast\":%d,", s->status.contrast);
    p+=sprintf(p, "\"saturation\":%d,", s->status.saturation);
    p+=sprintf(p, "\"sharpness\":%d,", s->status.sharpness);
    p+=sprintf(p, "\"special_effect\":%u,", s->status.special_effect);
    p+=sprintf(p, "\"wb_mode\":%u,", s->status.wb_mode);
    p+=sprintf(p, "\"awb\":%u,", s->status.awb);
    p+=sprintf(p, "\"awb_gain\":%u,", s->status.awb_gain);
    p+=sprintf(p, "\"aec\":%u,", s->status.aec);
    p+=sprintf(p, "\"aec2\":%u,", s->status.aec2);
    p+=sprintf(p, "\"ae_level\":%d,", s->status.ae_level);
    p+=sprintf(p, "\"aec_value\":%u,", s->status.aec_value);
    p+=sprintf(p, "\"agc\":%u,", s->status.agc);
    p+=sprintf(p, "\"agc_gain\":%u,", s->status.agc_gain);
    p+=sprintf(p, "\"gainceiling\":%u,", s->status.gainceiling);
    p+=sprintf(p, "\"bpc\":%u,", s->status.bpc);
    p+=sprintf(p, "\"wpc\":%u,", s->status.wpc);
    p+=sprintf(p, "\"raw_gma\":%u,", s->status.raw_gma);
    p+=sprintf(p, "\"lenc\":%u,", s->status.lenc);
    p+=sprintf(p, "\"vflip\":%u,", s->status.vflip);
    p+=sprintf(p, "\"hmirror\":%u,", s->status.hmirror);
    p+=sprintf(p, "\"dcw\":%u,", s->status.dcw);
    p+=sprintf(p, "\"colorbar\":%u,", s->status.colorbar);
    p+=sprintf(p, "\"face_detect\":%u,", detection_enabled);
    p+=sprintf(p, "\"face_enroll\":%u,", is_enrolling);
    p+=sprintf(p, "\"face_recognize\":%u", recognition_enabled);
    p+=sprintf(p, "\"lightbtn\":%u", light_flag);
    p+=sprintf(p, "\"linedetect\":%u", linedetect);
    *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 index_handler(httpd_req_t *req){
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Content-Encoding", "gzip");
    sensor_t * s = esp_camera_sensor_get();
    if (s->id.PID == OV3660_PID) {
        return httpd_resp_send(req, (const char *)index_ov3660_html_gz, index_ov3660_html_gz_len);
    }
    return httpd_resp_send(req, (const char *)index_ov2640_html_gz, index_ov2640_html_gz_len);
}
 
static esp_err_t query_handler(httpd_req_t *req){
    static char response[1024];
    char * p = response;
    int var = 10086;
 
    Serial.printf("var:%d", var);
    
    p+=sprintf(p, "%d", var);
    httpd_resp_set_type(req, "text/html");
    httpd_resp_set_hdr(req, "Access-Control-Allow-Origin", "*");
    return httpd_resp_send(req, response, strlen(response));
}
 
void startCameraServer(){
    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
 
    httpd_uri_t index_uri = {
        .uri       = "/",
        .method    = HTTP_GET,
        .handler   = index_handler,
        .user_ctx  = NULL
    };
    httpd_uri_t queryvar_uri = {
        .uri       = "/query",
        .method    = HTTP_GET,
        .handler   = query_handler,
        .user_ctx  = NULL
    };
    httpd_uri_t status_uri = {
        .uri       = "/status",
        .method    = HTTP_GET,
        .handler   = status_handler,
        .user_ctx  = NULL
    };
 
    httpd_uri_t cmd_uri = {
        .uri       = "/control",
        .method    = HTTP_GET,
        .handler   = cmd_handler,
        .user_ctx  = NULL
    };
 
    httpd_uri_t capture_uri = {
        .uri       = "/capture",
        .method    = HTTP_GET,
        .handler   = capture_handler,
        .user_ctx  = NULL
    };
 
   httpd_uri_t stream_uri = {
        .uri       = "/stream",
        .method    = HTTP_GET,
        .handler   = stream_handler,
        .user_ctx  = NULL
    };
    
 
 
    ra_filter_init(&ra_filter, 20);
    
    mtmn_config.type = FAST;
    mtmn_config.min_face = 80;
    mtmn_config.pyramid = 0.707;
    mtmn_config.pyramid_times = 4;
    mtmn_config.p_threshold.score = 0.6;
    mtmn_config.p_threshold.nms = 0.7;
    mtmn_config.p_threshold.candidate_number = 20;
    mtmn_config.r_threshold.score = 0.7;
    mtmn_config.r_threshold.nms = 0.7;
    mtmn_config.r_threshold.candidate_number = 10;
    mtmn_config.o_threshold.score = 0.7;
    mtmn_config.o_threshold.nms = 0.7;
    mtmn_config.o_threshold.candidate_number = 1;
    
    face_id_init(&id_list, FACE_ID_SAVE_NUMBER, ENROLL_CONFIRM_TIMES);
    
    Serial.printf("Starting web server on port: '%d'\n", config.server_port);
    if (httpd_start(&camera_httpd, &config) == ESP_OK) {
        httpd_register_uri_handler(camera_httpd, &index_uri);
        httpd_register_uri_handler(camera_httpd, &cmd_uri);
        httpd_register_uri_handler(camera_httpd, &status_uri);
        httpd_register_uri_handler(camera_httpd, &capture_uri);
        httpd_register_uri_handler(camera_httpd, &queryvar_uri);
    }
 
    config.server_port += 1;
    config.ctrl_port += 1;
    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);
    }
}

总结

基本上自动刷新并回显传感器就这么多内容了，主要是要让xmlhttp这个脚本自动生成一个querry请求去获取数据。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/216284