星期五, 4月 08, 2011

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

沒有留言: