当前位置 : 首页 » 互动问答 » 正文

How can I display an RTSP video stream in a web page?

分类 : 互动问答 | 发布时间 : 2010-02-11 22:27:17 | 评论 : 12 | 浏览 : 381209 | 喜欢 : 68

I have an ip camera which provides a live RTSP video stream. I can use VLC media player to view the feed by providing it with the URL:

rtsp://cameraipaddress

But I need to display the feed on a web page. The camera provider supplied an ActiveX control which I got working, but it is really buggy and causes the browser to frequently hang.

Does anyone know of any alternative video plugins I could use which support RTSP?

The camera can be configured to stream in either H264 or MPEG4.

回答(12)

  • 1楼
  • VLC also comes with an ActiveX plugin that can display the feed in a web page:

    http://wiki.videolan.org/ActiveX/HTML

    <OBJECT classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"
         codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"
         width="640" height="480" id="vlc" events="True">
       <param name="Src" value="rtsp://cameraipaddress" />
       <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://cameraipaddress" ></embed>
    </OBJECT>
    
  • 2楼
  • Roughly you can have 3 choices to display RTSP video stream in a web page:

    1. Realplayer
    2. Quicktime player
    3. VLC player

    You can find the code to embed the activeX via google search.

    As far as I know, there are some limitations for each player.

    1. Realplayer does not support H.264 video natively, you must install a quicktime plugin for Realplayer to achieve H.264 decoding.
    2. Quicktime player does not support RTP/AVP/TCP transport, and it's RTP/AVP (UDP) transport does not include NAT hole punching. Thus the only feasible transport is HTTP tunneling in WAN deployment.
    3. VLC neither supports NAT hole punching for RTP/AVP transport, but RTP/AVP/TCP transport is available.
  • 3楼
  • It’s not easy to display live video stream from an IP camera on a web page because you need wide internet bandwidth and a great video player that is compatible with the major browsers.

    But fortunately there are some cloud based services that can do this job for us. One of the best is IPCamLive. This service can receive RTSP/H264 video stream from an IP Camera and can broadcast it to the viewers. IPCamLive has Flash/HTML5 video player component that will display the video on PC, MAC, tablet or mobile. The greatest thing is that this site generates the needed HTML snippet for embedding the live video like this:

    <iframe src="http://ipcamlive.com/player/player.php?alias=szekesfehervar" width="800px" height="600px"/>
    

    So we just need to copy paste it into our HTML file without any modification.

  • 4楼
  • If you want to stream RTSP directly to web page, then I am afraid your only option is to use an ActiveX control viewer that comes with the camera. This is a direct connection IP Cam -> Viewer, and should really be the fastest. Not sure why you having issues; Axis ActiveX works pretty good for me.

    However, this option is not really bandwidth-efficient and you can not serve multiple concurrent viewers (most of IP Cams have 10 viewers limit). The better option is to upload a single RTSP stream to centrally-hosted streaming server, which will convert your stream to RTMP/MPEG-TS and publish it to Flash players/Set-Top boxes.

    Wowza, Erlyvideo, Unreal Media Server, Red5 are your options.

  • 5楼
  • Found a simple and working solution from VLC official documentation for web plugin

    https://wiki.videolan.org/Documentation:WebPlugin/

    Modified the code a little bit and got it working. Here is my code-

    <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" autoplay="yes" loop="no" width="300" height="200" target="rtsp://10.20.50.15:554/0/888888:888888/main" />
    <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" style="display:none;"></object>
    

    Note: The above snippet uses the rtsp url format that is supported by my IP camera. So you need to get the same for your camera. You can get this information by consulting your camera vendor support. Also keep in mind that I tested it on Chrome (using an activeX plugin for Chrome) and other browsers (including mobile phone browsers) might not be supported.

  • 6楼
  • Wowza

    1. Re-streaming RTSP to RTMP(Flash Player) Will not work with Android Chrome or FF (Flash is not supported)
    2. Re-streaming RTSP to HLS

    Web Call Server (Flashphoner)

    1. Re-Streaming RTSP to WebRTC (Native browser feature for Chrome and FF either on Android or desktop)

    2. Re-Streaming RTSP to Websockets (iOS Safari and Chrome/FF Desktop)

    Take a look at this article.

  • 7楼
  • Try the QuickTime Player! Heres my JavaScript that generates the embedded object on a web page and plays the stream:

    //SET THE RTSP STREAM ADDRESS HERE
    var address = "rtsp://192.168.0.101/mpeg4/1/media.3gp";
    
    var output = '<object width="640" height="480" id="qt" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab">';
        output += '<param name="src" value="'+adsress+'">';
        output += '<param name="autoplay" value="true">';
        output += '<param name="controller" value="false">';
        output += '<embed id="plejer" name="plejer" src="/poster.mov" bgcolor="000000" width="640" height="480" scale="ASPECT" qtsrc="'+address+'"  kioskmode="true" showlogo=false" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">';
        output += '</embed></object>';
    
        //SET THE DIV'S ID HERE
        document.getElementById("the_div_that_will_hold_the_player_object").innerHTML = output;
    
  • 8楼
  • Also you can try opensource WebRTC Media Server Kurento

    Which can play RTSP video stream and send it to WebRTC or transcode to RTMP or saving on server.

    We are useing it on Production for the following cases:

     - WebRTC to Webrtc (many to many)
     - WebRTC to RTMP
     - RTSP to WebRTC
    
  • 9楼
  • the Microsoft Mediaplayer can do all, you need. I use the MS Mediaservices of 2003 / 2008 Server to deliver Video as Broadcast and Unicast Stream. This Service could GET the Stream from the cam and Broadcast it. Than you have "only" the Problem to "Display" that Picture in ALL Browers at all OS-Systems

    My Tip :check first the OS , than load your plugin . on Windows it is easy -take WMP , on other take MS Silverligt ...

  • 10楼
  • For purposes like this one I use VLC as a redistribution server. You said you get to catch the video with VLC? Right-click on the media in VLC, select "stream" and choose your options. You can also do it with command line, which gives you potential benefits of various option (transcoding, scaling, compressing, desinterlacing). Here is a batch that starts VLC distribution from source to its own 555 port (so you will have to type rstp://myvlcserveripaddress:555 in your src option on the webpage to get the stream)

    cd \
    cd C:\Program Files (x86)\VideoLAN\VLC\
    
    vlc --logo-file C:\logo.png --logo-position 5 --logo-opacity 200 --logo-x 900 --logo-y -2 "mmsh://typeyoursourceIPhere:554" :sout=#transcode{vcodec=div3,vb=800,scale=0,acodec=mpga,ab=128,channels=2,samplerate=44100}:duplicate{dst=rtp{mux=ts,sdp=rtsp://:555/stream}} :sout-all :sout-keep
    

    Here, you have a sample of a webpage that embeds player (based on VLC plugin).

  • 11楼
  • Most popular and reliable way to share live video on a website is by RTMP (using a Flash player) or HLS (HTTP Live Streaming) that also works on mobiles over HTML5 but involves big latency.

    To transform RTSP stream to RTMP/HLS a relay server is required (to connect to RTSP stream and then provide RTMP/HLS to web clients). Wowza Streaming Engine 4.2+ provides such functionality and is available for free with a limited use developer license. http://www.wowza.com/streaming/ip-camera-streaming

    A script to manage that and publish by web is available at http://www.videowhisper.com/?p=PHP-IP-Camera-Stream , also with free limited license. Additionally, the online demo for that script allows publishing your own RTSP streams to web for some time (24h).

  • 12楼
  • All the above solutions does not work any longer or too time consuming to figure out.

    This is the ultimate answer. You can embed rtsp link in your website.

    Copy the below code in your html editor:

    <!--- BEGIN PLAYER --->
    
    <!-- webbot bot="HTMLMarkup" startspan ---->
    
    <object ID="MediaPlayer" WIDTH="320" HEIGHT="270" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
    
    <param name="autoStart" value="True">
    
    <param name="filename" value="rtsp://xxx.xxx.xxx:xxxx">
    
    <param NAME="ShowControls" VALUE="False">
    
    <param NAME="ShowStatusBar" VALUE="False">
    
    <embed TYPE="application/x-mplayer2" SRC="rtsp://xxx.xxx.xxx:xxxx" NAME="MediaPlayer" WIDTH="320" HEIGHT="270" autostart="1" showcontrols="0"></embed></object>
    
    <!-- webbot bot="HTMLMarkup" endspan ---->
    
    <!--- end PLAYER --->
    

    If all this is too complicated and still does not solve it, let me help you.

    I have done this for my clients.

    Click here http://www.mhcreative.com.my/ipcameratowebsite/

相关阅读:

Streaming via RTSP or RTP in HTML5

How can I display an RTSP video stream in a web page?

How can I display an RTSP video stream in a web page?

HTML5 live streaming

从Android摄像头到服务器的视频流

在HTML5中播放无限循环视频

如何获取vlc日志?

通过WiFi从一部Android手机直播视频

如何从网址播放视频

视频流上的TCP与UDP