【IOT環控系統開發】監控您的家(下) —建立視訊簡易主機監控平台

作者/圖片提供:曹永忠/王景穗

在上篇文章《【IOT環控系統開發】監控您的家(上) — 開發準備》中介紹了如何編寫一段程式,並透過開發工具將整個程式編譯後,燒錄後上傳到ESP32 CAM視訊整合模組,進行程式測試。

如下圖所示,讀者可以看到本次實驗- ESP32CAM視訊鏡頭程式成功結果,下圖可以看到ESP32CAM視訊鏡頭程式結果畫面,已經成功讓ESP32 CAM視訊整合模組連上熱點,並且成為192.168.4.1,PORT:10000的視訊服務。

WEBCAM連上主機

ESP32 CAM視訊簡易主機開發

為了簡化,筆者使用NodeMCU-32S Lua WiFi 物聯網開發板來當唯一台簡易的熱點(Access Point)與一台視訊監控服務器。

NodeMCU-32S Lua WiFi 物聯網開發板

如上圖所示,NodeMCU-32S Lua WiFi 物聯網開發板也支持使用Lua腳本語言程式設計,NodeMCU-32S Lua WiFi 物聯網開發板之開發平台基於eLua開源項目,例如lua-cjson, spiffs.。NodeMCU-32S Lua WiFi 物聯網開發板是上海Espressif 研發的WiFi+藍牙芯片,旨在為嵌入式系統開發的產品提供網際網絡的功能。

NodeMCU-32S Lua WiFi 物聯網開發板模組核心處理器ESP32晶片提供了一套完整的802.11 b/g/n/e/i 無線網路(WLAN)和藍牙4.2解決方案,具有最小物理尺寸。

NodeMCU-32S Lua WiFi 物聯網開發板專為低功耗和行動消費電子設備、可穿戴和物聯網設備而設計,NodeMCU-32S Lua WiFi 物聯網開發板整合了WLAN和藍牙的所有功能,NodeMCU-32S Lua WiFi 物聯網開發板同時提供了一個開放原始碼的平台,支持使用者自定義功能,用於不同的應用場景。

NodeMCU-32S Lua WiFi 物聯網開發板 完全符合WiFi 802.11b/g/n/e/i和藍牙4.2的標準,整合了WiFi/藍牙/BLE無線射頻和低功耗技術,並且支持開放性的RealTime作業系統RTOS。

NodeMCU-32S Lua WiFi 物聯網開發板具有3.3V穩壓器,可降低輸入電壓,為NodeMCU-32S Lua WiFi 物聯網開發板供電。它還附帶一個CP2102晶片(如下圖所示),允許ESP32開發板與電腦連接後,可以再程式編輯、編譯後,直接透過串列埠傳輸程式,進而燒錄到ESP32開發板,無須額外的下載器。

ESP32 Devkit CP2102 Chip 圖

NodeMCU-32S Lua WiFi物聯網開發板的功能包括以下內容:

商品特色:

  • WiFi+藍牙4.2+BLE
  • 雙核CPU
  • 能夠像Arduino一樣操作硬件IO
  • 用Nodejs類似語法寫網絡應用

商品規格:

  • 尺寸:49*25*14mm
  • 重量:10g
  • 品牌:Ai-Thinker
  • 芯片:ESP-32
  • Wifi:802.11 b/g/n/e/i
  • Bluetooth:BR/EDR+BLE
  • CPU:Xtensa 32-bit LX6 雙核芯
  • RAM:520KBytes
  • 電源輸入:2.3V~3.6V

NodeMCU-32S腳位圖

視訊簡易主機監控平台開發

我們將NodeMCU-32S Lua WiFi 物聯網開發板的驅動程式安裝好之後,我們打開ESP 32開發板的開發工具:Sketch IDE整合開發軟體(安裝Arduino開發環境,請參考『ESP32程式設計(基礎篇):ESP32 IOT Programming (Basic Concept & Tricks)』之『Arduino開發IDE安裝』(曹永忠, 2020a, 2020b, 2020f);安裝ESP 32開發板 SDK請參考『ESP32程式設計(基礎篇):ESP32 IOT Programming (Basic Concept & Tricks)』之『安裝ESP32 Arduino 整合開發環境』(曹永忠, 2020a, 2020b, 2020c, 2020d, 2020e)),編寫一段程式,並透過開發工具將整個程式編譯後,上傳燒錄到NodeMCU-32S Lua WiFi 物聯網開發板,進行測試。

視訊簡易主機監控平台程式(ESP32_MonitorV20210530.ino)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
#include "initPins.h"
#include    //使用網路函式庫
#include    //使用網路連線函式庫

const char *ssid = "CAMAP";    //建立基地台的名稱 ,請用ST+您的學號
const char *password = "12345678";    //連線基地台的password密碼

WiFiServer server(80);      //產生一台網頁伺服器


void setup() {
   
  Serial.begin(9600);   //啟動通訊埠,用9600 bps速率進行通訊
  Serial.println();
  Serial.println("Configuring access point...");
      // 通訊埠印出  "Configuring access point..."
  // You can remove the password parameter if you want the AP to be open.
  WiFi.softAP(ssid, password);    //建立一個熱點,名稱=ssid,密碼=password
  IPAddress myIP = WiFi.softAPIP();   //取得熱點的IP 位址(網路位址)
  Serial.print("AP IP address: ");    // 通訊埠印出 "AP IP address: "
  Serial.println(myIP);     // 通訊埠印出    網路位址
  server.begin();

  Serial.println("Server started");   // 通訊埠印出  "Server started"
}

void loop() {
  WiFiClient client = server.available();   // listen for incoming clients
        // Server 建立的網站
        //  Server伺服器有人連入   server.available()
        // 產生一個 client物件,去接"伺服器有人連入"的通訊,===>連接WiFiClient client = server.available();
  if (client)     //建立"伺服器有人連入"的通訊 成功
  {                             // if you get a client,
    Serial.println("New Client.");           // print a message out the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected())    //建立網路連線成功
    {            // loop while the client's connected
      if (client.available())   //對方講話,對方通訊送資料過來
      {             // if there's bytes to read from the client,
        char c = client.read();  //把資料(字元)讀入等 C           // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        if (c == '\n')
        {                    // if the byte is a newline character

          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0)
          {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println();
            // 上面就是瀏覽器基本資料
            // the content of the HTTP response follows the header:
            client.print(h1a);
            client.print(h1b);
            // The HTTP response ends with another blank line:
            client.println();
            // break out of the while loop:
            break;
          } else {    // if you got a newline, then clear currentLine:
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }


      }
    }
    // close the connection:
    client.stop();
    Serial.println("Client Disconnected.");
  }
}

視訊簡易主機監控平台程式(initPins.h)

1
2
3
4
#includeString h1a = "
<div class="webcam">" ;
String h1b = "<img src="http://192.168.4.100:10000" width="650px" height="450px" /></div>
" ;

如下圖所示,我們可以看到視訊簡易主機監控平台程式結果畫面,已經成功讓ESP32 CAM視訊整合模組連上熱點,並且成為192.168.4.1,PORT:10000的視訊服務。

視訊簡易主機監控平台程式結果畫面

視訊簡易主機監控平台程式整合測試

當NodeMCU-32S Lua WiFi 物聯網開發板上傳其韌體後,重開啟動後,如下圖所示,我們可以看到NodeMCU-32S Lua WiFi 物聯網開發板成為一個無線基地台:CAMAP,已經出現,接下來重啟ESP32 CAM視訊整合模組,讓ESP32 CAM視訊整合模組的連上無線基地台:CAMAP,把視訊傳到視訊簡易主機監控平台(網址:192.168.4.100)。

接下來筆者使用筆電,如下圖所示,將無線網路指向無線基地台:CAMAP。

無線網路指向無線基地台

如下圖所示,筆者接下來打開瀏覽器,在網址列:輸入『192.168.4.100』的網站網址(視訊簡易主機監控平台)。

開啟瀏覽器

如下圖所示,在網址列:輸入『192.168.4.100』的網站網址(視訊簡易主機監控平台)之後,我們可以看到ESP32 CAM視訊整合模組已經將動態影像呈現在用NodeMCU-32S Lua WiFi 物聯網開發板開出建立的視訊簡易主機監控平台。

簡易主機監控平台網站

後續

本篇為『環控系統開發』系列之監控您的家,只要透過幾個ESP32 CAM視訊整合模組與一個NodeMCU-32S Lua WiFi 物聯網發板,甚至不需要其他的設備,就可以建立的視訊簡易主機監控平台,任何使用者只要用手機、平板、筆電等任何資訊設備,就可以透過WIFI 連接到無線基地台:CAMAP,就可以簡單方便的監控要監控的家庭。

筆者本系列是針對非資訊、電機、電子等學子攥寫的物聯網系統開發系列,這九年多來在物聯網系統開發領域寫書、發表文章、辦展、授課,常遇到許多學子訓練不足,以交作業的心態來學習,並沒有把程式底子打好。

後續筆者還會繼續發表『環控系統開發』系列的文章,在未來我們可以創造出更優質,更具未來性的物聯網(Internet of Thing:IOT)產品開發相關技術。
敬請期待更多的文章。

參考資料

共同作者介紹

王景穗(Wang-Jing Suei)

國立高雄大學(NUK)電機工程學系碩士,碩士論文主要專研物聯網技術與微處理器應用整合,並協助學校針對實作性課程的遠距教學系統開發,結合自動控制系統與物聯網技術,設計開發教育性遠距操作系統。

(責任編輯:謝涵如)

Author: 曹永忠

國立中央大學資訊管理學系博士,目前在國立暨南國際大學電機工程學系兼任助理教授、國立高雄科技大學商務資訊應用系兼任助理教授自由作家,專注於軟體工程、軟體開發與設計、物件導向程式設計、物聯網系統開發、Arduino開發、嵌入式系統開發。長期投入資訊系統設計與開發、企業應用系統開發、軟體工程、物聯網系統開發、軟硬體技術整合等領域,並持續發表作品及相關專業著作,並通過台灣圖霸的專家認證。

Share This Post On

發表

跳至工具列