<![CDATA[
<p>윈도우에서 WEB server (IIS ) 구동해 놓고 아래와 같은 HTML 구문으로<br>웹서버 root에 저장하여 웹주소로 연결하여 보면 사물인식을 잘 동작한다.</p><p> </p><p>//---------------------------<index.html 시작>----------------------------------</p><p> </p><p> </p><p><!DOCTYPE html> <br><html lang="en"> <br><head> <br>  <meta charset="UTF-8" /> <br>  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <br>  <title>ESP32-CAM TensorflowJS</title> <br>  <style> <br>    body { <br>      font-family: 'PT Sans', sans-serif; <br>      background-color: #dde2e1; <br>      margin: 0; <br>      color: #636060; <br>      line-height: 1.6; <br>    } <br>    .container { <br>      max-width: 1180px; <br>      text-align: center; <br>      margin: 0 auto; <br>      padding: 0 3rem; <br>    } <br>    .btn { <br>      padding: 1rem; <br>      color: #fff; <br>      display: inline-block; <br>      background: red; <br>      margin-bottom: 1rem; <br>    } <br>  </style> <br>  <script src="<a href="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@tensorflow/tfjs</a>"></script> <br>  <script src="<a href="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet</a>"></script> <br>  <script> <br>    function classifyImg() { <br>      const img = document.getElementById('img1'); <br>      const r = document.getElementById('results'); <br>      r.innerHTML = ''; <br><br>      const captureUrl = 'http://172.30.1.49/capture?t=' + Math.random();       // 자신의 카메라 IP를 입력한다.<br>      img.crossOrigin = 'anonymous'; <br>      img.xxonload = () => { <br>        mobilenet.load().then(model => { <br>          model.classify(img).then(predictions => { <br>            predictions.forEach(pred => { <br>              r.innerHTML += `<b>${pred.className}</b> - ${pred.probability.toFixed(3)}<br/>`; <br>            }); <br>          }); <br>        }); <br>      }; <br><br>      img.src = captureUrl; <br>    } <br>  </script> <br></head> <br><body> <br>  <div class="container"> <br>    <h2>TensorflowJS with ESP32-CAM</h2> <br>    <section> <br>      <img id="img1" width="320" height="200" src="http://172.30.1.49:81/stream" crossorigin="anonymous" style="border:1px solid red"/>      // 자신의 카메라 IP를 입력한다.   포트번호는 카메라 프로그램의 시리얼모니터링을 해보면 나타난다. (프로그램되어있음)<br>      <div id="results"></div> <br>    </section> <br>    <section> <br>      <a href="#" class="btn" xxonclick="classifyImg()">Classify the image</a> <br>    </section> <br>    <section id="i"></section> <br>  </div> <br></body> <br></html></html></p><p> </p><p>//---------------------------------< 소스끝 >----------------------------------------</p><p>결과 화면은 다음과 같다.</p><div class="figure-img" data-ke-type="image" data-ke-style="floatLeft" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1RglK/3da59281622cde0d1359ac2776d998f6e0f1b869" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1RglK/3da59281622cde0d1359ac2776d998f6e0f1b869" data-origin-width="447" data-origin-height="417"></div><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<!-- -->
]]>
카페 게시글
ESP32_CAM
웹서버에 텐서플로우 사물인식 플렛폼으로 인식해보자!
사진사랑
추천 0
조회 7
25.04.15 10:34
댓글 0
다음검색
