Mjpeg On The Http

最近的工作內容是有關於Streaming，這部分改天再來好好聊一聊，而是中間有個插曲，為了能讓一般手機也可以瀏覽Streaming，但是在短時間內又不想另外花時間撰寫各種手機平台上的程式，所以直接利用手機上的瀏覽器來瀏覽Jpeg，但只不過是Motion Jpeg。

瀏覽器下載Jpeg跟顯示是很基本的功能，可是Server Side要如何把即時的影像源源不絕的傳給瀏覽器，瀏覽器基本上不靠Script是沒辦法跟Server端有互動的，所以第一種方式是利用javascript定時做img tag的重新reload，這方式不需reload整個網頁，所以不會看到網頁在做重載，而Server每次就提供最新的圖片給Client，缺點是Client不會知道是否有新的即時影像產生，只能依靠Timer定時觸發，而且速度也比較慢。而且IE會暫存圖片，反而不會觸發onload的事件，網路上有相關的解決方法，這裡就不再多說了。

motionjpeg.html
<img id="myjpeg" onload="my_reload()" src="myjpeg.cgi" />
<script type="text/javascript">
my_reload()
{
    document.myjpeg.src=myjpeg.cgi;
}
</script>
myjpeg.cgi輸出的內容
Content-Type: image/jpeg\r\n
\r\n
JPEG檔案內容
第二種方式則是利用了類似Push的，讓Server傳送一個連續的資料給Client端，MIME的Content-Type中有一個特別的定義multipart/x-mixed-replace，當瀏覽器讀到這個類型時不會立即斷線，而會不斷的讀取資料，並且將新的Jpeg貼在原來的位置。但是每張Jpeg之間必須有間隔字串讓瀏覽器可以辨識，boundary就是定義分隔字串，只要是資料內不會出現的文字就可以了。

motionjpeg.html
<img src="myjpeg.cgi" />
myjpeg.cgi輸出的內容
Content-type: multipart/x-mixed-replace; boundary=xxx分隔字串xxx

xxx分隔字串xxx\r\n
Content-Type: image/jpeg\r\n
\r\n
Jpeg檔案內容
\r\n
xxx分隔字串xxx\r\n
Content-Type: image/jpeg\r\n
\r\n
Jpeg檔案內容
...
xxx分隔字串xxx\r\n