Day4

今天依舊研究如何在html中加入即時串流的視訊畫面

今日成果是成功在網頁上串流，但是缺點卻是在python上執行會有固定的http，不符合與其他研究生們的成果合併，但是由於今日成果是如此，還是稍微公布今天研究結果。

我是使用Python與Flask OpenCV 來建立一個攝影機MJPEG(Motion JPEG)即時串流，在網站上顯示webcam或camera攝影機的即時串流影像，這個應用常見於監控系統或者即時影像處理的情形上。

Flask裡使用render_template處理 templete，使用的串流技術是HTTP的multipart類型回應，瀏覽器透過不同的Content-Type header定義可以做出對應的反應，例如瀏覽器遇到Content-Type是application/zip就下載檔案，遇到Content-Type是application/pdf就預覽pdf等等。
本次使用到的Content-Type是multipart/x-mixed-replace，x-mixed-replace是Server利用HTTP推送串流的技術其中之一，作法是讓每一個資料區塊取代頁面中先前的一塊藉此達到更新畫面，利用這種技術你可以將圖片作為每一個資料區塊來傳送，這樣在瀏覽器上看起來就像在播放視訊或播放動畫的效果。
而連續地循環串流幾張影像，在index.html的img標籤裡放入video_feed

在 /video_feed 路由處理

Response 傳入一個 genator，multipart/x-mixed-replace：後續抵達的資料區塊會覆蓋先前的結果，藉此達成動畫效果boundary=frame：告知後續的連續資料塊以 --frame 作為各單位資料區塊邊界image/jpeg：告知傳送的每一塊的資料型態為 jpeg 影像