ESP32-CAM mpeg Video Stream 用.net接收並錄製影片檔－夜市小霸王

我的ESP32實做書籍：https://youyouyou.pixnet.net/blog/post/121105860
博客來網址：https://www.books.com.tw/products/0010901195

今天介紹如何透過.net framework來播放ESP32-CAM的video stream，咦？為什麼需要這麼搞缸用到.net？ESP32本身就有網站可以做Stream Server，為何還需要用PC來接？

其實也是，如果你只是需要播放即時影像當作監視器來用，這樣就差不多了，不過本篇所談要透過.net來承接影像，最大的優勢是「你可以完全掌控影像」，因此後續要做智慧辨識、即時錄影、肢體分析等等，就變成在PC或Server來做，相形之下都會簡單許多。畢竟你要讓一個記憶體只有4M的MCU來做類神經運算或openpose等人工智慧分析也太強人所難。.

本教學之結果呈現如下圖，可承接多個ESP32-CAM之來源進行直播及分析

本範例我們分成以下幾個部份來說明：

一、在PC上安裝VS.net 2017
二、在ESP32-CAM上安裝Video Stream Server
三、撰寫.net串流程式並測試結果
四、對影像進行錄製

一、在PC上安裝VS.net 2017
本部份請參閱之前的文章「 ESP32-CAM 自動拍照並上傳伺服器(http file post) 」

二、在ESP32-CAM上安裝Video Stream Server
本部份請參閱之前的文章「 ESP32-CAM(ardunio)拍照auto take picture、串流stream及物件辨識object detection 」
露天搜尋ESP32-CAM： https://goods.ruten.com.tw/item/show?21910115309507
完成後，在序列通訊窗查看ESP32-CAM所取得的IP，其中要注意的是這次要用的是stream的串流網址，因此選擇「http://192.168.x.x:9601/stream」這個網址，先記起來下個步驟會用到。

三、撰寫.net串流程式
本部份將介紹如何建立.net串流的部份，分成7個步驟

1.建立專案
首先開啟VS.net，並建立一個windows專案，專案選擇Visual Basic/Windows Form APP，看到這裡請不笑我老人家VB，相同的內容可以C#或C++來建立都可以。
下方的名稱、位置、方案等資訊，依照個人設定選擇即可。

2.匯入AForge工具
AForge是.net非常知名的影像分析工具，本次主要用以接收ESP32-CAM的串流，往後在介紹如何用AForge進行物件辨識機器學習等功能。

點選上方功能表/工具/NuGet套件管理員/管理方案的NuGet套件

先點選瀏覽（很重要，否則都搜尋不到），然後輸入AForge，搜尋後會跳出與AForge相關之套件

本次將安裝AForge Controls套件，因此點選AForge.Controls後，將之安裝到本次要開發的應用程式。

安裝完畢後，切回Form1.vb此時，點選工具箱，便內會多出一列AFroge工具

3.放置AFroge VideoSourcePlayer
接下來要在Windows表單（Form1）中放置VideoSourcePlayer，找到VideoSourcePlayer之後，將之拖曳到Form1中。
如果要同時監控多個ESP32-CAM，可以多拉幾個VideoSourcePlayer分別對應到不同的ESP32-CAM

拖曳VideoSourcePlayer改變大小到合適

若有兩組ESP32-CAM請分別設定兩組VideoSourcePlayer

4.放置一個按鈕

點選本按鈕，修改屬性text內容為「啟動視訊」

5.程式撰寫
快速點選啟動視訊按鈕兩次，可以進行程式編輯畫面

6.按鈕程式
在Button1_Click的函數內輸入以下的程式

'第二支ESP32-CAM
Dim stream1 As New MJPEGStream("http://192.168.43.178:9601/stream") '指定第一組視訊來源
VideoSourcePlayer1.VideoSource = stream1 '將播放器視訊來源指定為stream1
VideoSourcePlayer1.Start() '播放器開始播放
'第二支ESP32-CAM，若僅有一組ESP32-CAM，可省略本部份
Dim stream2 As New MJPEGStream("http://192.168.43.179:9601/stream") '指定第二組視訊來源
VideoSourcePlayer2.VideoSource = stream2
VideoSourcePlayer2.Start()

並在最上方imports AForge.Video函式庫，完成如下的程式畫面

7.啟動程式
接下來就可以來測試是否可用，先將ESP32-CAM啟動，並取得IP就緒後，在.net畫面點選上方啟動執行符號後，啟動本程式，按下「啟動視訊」按鈕查看是否有接入視訊。
另外上方可以放置label標示不同cam的所在位置，例如檔案室、閱覽室之類。

接下來，你就可以針對每一個ESP32-CAM所傳入的影像進行截圖、錄影、影像分析等等的功能。

四、對影像進行錄製

本部份將要撰寫錄製影片的程式碼，我們會用到Accord.NET套件（這又是一個功能超級多的套件，下次會介紹用他來做臉部標示）。不過本次要用的是他的一個小工具「vfw」也就是Video For Windows工具。

1.首先在NuGet匯入Accord.Video.VFW套件
開啟NuGet，點選瀏覽頁簽，輸入關鍵字Accord vfw找到Accord.Video.VFW後，點選右下角的安裝

2.匯入函式庫並宣告物件
首先最上方輸入Imports Accord.Video.VFW，來匯入本函式庫
再來宣告兩個廣域變數recording 代表是否錄影中，Vwriter 則是Accord.Video.VFW的錄影器
在button_click內最下方設定，當啟動視訊時，順便設定Vwriter相關選項，本處有兩個選項，分別是壓縮碼="WMV3"及FrameRate=15。

3.新增兩個按鈕
拉出兩個按鈕，分別是「開始錄影」跟「停止錄影」

4.輸入兩個按鈕的程式
Vwriter.Open("d:\test.avi", 800, 600) '代表錄影檔案名稱路徑及解析度，解析度必須依照你對ESP32-CAM所指定的stream大小，否則會報錯誤。
另外要注意的是編碼器是否有安裝，請至微軟網站下載:https://download.microsoft.com/download/9/8/a/98a6cb2d-6659-485e-b1f9-2c0d9bf6c328/wmv9VCMsetup.exe

'開始錄影按鈕
Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
recording = True '開始錄影
Vwriter.Open("test.avi", 800, 600) '開啟檔案，並指定畫面大小
End Sub

'停止錄影按鈕
Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
recording = False '關閉錄影
Vwriter.Close() '關閉檔案
End Sub

5.在NewFrame事件中加入程式
NewFrame事件是VideoSourcePlayer1每次有新畫面進來時要做的事，因此我們可以在這個事件做很多工作，例如各種AI辨識等，本次我們新做錄影，因此當新畫面進來時，就讓Vwriter.AddFrame(ImageFrame)，意思是把新的畫面加入檔案中，也就是上面的"test.avi"影片檔中。

Private Sub VideoSourcePlayer1_NewFrame(sender As Object, ByRef ImageFrame As Image) Handles VideoSourcePlayer1.NewFrame
If recording Then'如果錄影中
Vwriter.AddFrame(ImageFrame)'將每張畫格都加到錄影機檔案
End If
End Sub