2014/1/27

[JavaScript] RTSP streamed by VLC

最近遇到一個需求,要在網頁上呈現透過RTSP方式傳送的影音串流

我這邊是選用 VLC Player  Plug-in
主要原因是因為它可以跨瀏覽器支援
在IE、FireFox、Chrome 上都可以使用

在寫程式之前,要先測試RTSP的串流是否有正常的發送
可以先下載VLC media player來進行測試

媒體 -> 開啟網路串流
在裡面輸入要測試的RTSP串流的位址



接著來完成網頁的部分
其實這個範例只有單純的使用到HTML
但是如果要對影音串流做控制就需要JavaScript的幫忙了

<!DOCTYPE html>
<html><body>
<object
  classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" 
  codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
  id="vlc"
  name="vlc"
  class="vlcPlayer"
  events="True">
    <param name="Src" value="rtsp://Your Address" />
    <param name="ShowDisplay" value="True" />
    <param name="AutoLoop" value="False" />
    <param name="AutoPlay" value="True" />
   <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://Your Address" ></embed>
</OBJECT>
</html></body>

這邊嵌入的<Object>就是控制VLC player呈現的控制項
注意這邊有兩地方要輸入 RTSP的位址

給IE看的
<param name="Src" value="rtsp://Your Address" />

給FireFox、Chrome看的
 <embed id="vlcEmb"  type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480"
     target="rtsp://Your Address" ></embed>


研究過程中有看到說 HTML5 的 Video Tag可以支援RTSP
但是我怎麼試都是不成功....後來才發現有另一派的言論說HTML5不支援

如果有一天HTML5支援RTSP,就會變得很方便了


範例檔


參考資料:
http://stackoverflow.com/questions/14711438/vlc-javascript-api-on-ie

http://nerijuso.lt/how-stream-video-with-vlc-plugin-in-your-website/

http://stackoverflow.com/questions/3120027/embed-vlc-player-in-html