谷歌浏览器Chrome播放rtsp视频流解决方案
谷歌浏览器Chrome播放rtsp视频流解决方案
yizhichao 发表于6个月前
谷歌浏览器Chrome播放rtsp视频流解决方案
  • 发表于 6个月前
  • 阅读 50
  • 收藏 1
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

代码中的具体参数含义,大家可以移步这里:

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

 

找半天,HTML5的可以支持RTMP 但是无法播放RTSP,flash也止步于RTMP,最后同事推荐了个开源的好东东 VLC ,请教谷歌大神之后,这货果然可以用来让各浏览器(IE activex方式,谷歌、FF)实现播放RTSP视频流,那真是极好的~~ 废话不多说了附上参考文档和案例,大家自己看吧。

视频是用的海康网络摄像头(支持RTSP,标准H.264 RTP封装的设备),可以通过 rtsp://admin:12345@192.0.0.64:81/h264/ch1/main/av_stream  对摄像头进行读取RSTP流。在谷歌浏览器下实现web显示实时监控画面步骤:

1. 下载vlc -  http://www.videolan.org/vlc/  开源的好东西,并安装(本人测试系统为WIN8.1 64bit 下载32bit的就可以,XP也没问题);

2. 安装,并勾选Mozila支持;

3. 实时播放代码如下

复制代码

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>

复制代码

代码中的具体参数含义,大家可以移步这里:

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

说明文档很详细,可以使用js进行各种操作,修改视频地址、建立播放列表、暂停、播放、音量控制等。

 

 

 

具体步骤:

 

1.      仿照http://download.csdn.net/detail/haowenxin123456789/8044245 中步骤;

2.      从http://www.videolan.org/vlc/index.html  中下载 vlc-2.2.1-win32.exe 并安装到D:\\ProgramFiles文件夹下;

3.  运行:regsvr32  D:\\ProgramFiles\\VideoLAN\\VLC\\axvlc.dll ;

4.  test.html 文件代码如下:

<html>  
<body>  
<!--[if IE]>  
   <object type='application/x-vlc-plugin' id='vlc' events='True'  
       classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="720" height="540">  
          <param name='mrl' value='http://g3.ykimg.com/0130391F455321692EC42C1496BCB33029ABCB-A4FF-A71D-EC9C-063ED7327684' />  
          <param name='volume' value='50' />  
          <param name='autoplay' value='true' />  
          <param name='loop' value='false' />  
          <param name='fullscreen' value='false' />  
    </object>  
<![endif]-->  
<!--[if !IE]><!-->  
    <object type='application/x-vlc-plugin' id='vlc' events='True' width="720" height="540" pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">  
        <param name='mrl' value='rtsp://218.204.223.237:554/live/1/0547424F573B085C/gsfp90ef4k0a6iap.sdp' />  
        <param name='volume' value='50' />  
        <param name='autoplay' value='true' />  
        <param name='loop' value='false' />  
        <param name='fullscreen' value='false' />  
    </object>  
<!--<![endif]-->  
</body  
</html>  


在IE浏览器中打开test.html即会播放实时的rtsp视频流。

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
yizhichao
粉丝 10
博文 340
码字总数 271925
×
yizhichao
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: