文档章节

谷歌浏览器Chrome播放rtsp视频流解决方案

yizhichao
 yizhichao
发布于 2017/09/01 14:46
字数 576
阅读 613
收藏 1

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

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

yizhichao

粉丝 16
博文 464
码字总数 362836
作品 0
南京
程序员
私信 提问
Facebook视频支持AV1

Facebook尝试在自己的视频服务中使用AV1编码,并通过“切片+分布式”的方式解决AV1编码延迟的问题。LiveVideoStack对文章进行了翻译。 文 / Daniel Baulig,Yu Liu 译 / 蒋默邱泽 审校 / 包研...

LiveVideoStack
2018/04/29
0
0
EasyNVR网页Chrome无插件播放安防摄像机视频流是怎么做到web浏览器延时一秒内

版权声明:本文为EasyDarwin开源社区原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiejiashu/article/details/90083694 背景说明 由于互联网的飞速发展,传统安防摄像头的视频监...

xiejiashu
05/10
0
0
Google Chrome 73新功能初探:自动画中画 支持硬件媒体按钮

桌面端Chrome浏览器在即将到来的版本更迭中有望获得一系列新的功能,我们从各种Commits、媒体发掘的实验性功能以及Canary通道都能一瞥这些新功能,包括可跟随系统的原生黑暗主题,高性能的“...

稿源:
02/09
0
0
jw player播放大码流文件黑屏,但是有声音,请问何解?

昨天摸索了一下JW Player,现在使用小码流文件(小于6Mbps)播放正常,但是播放大于6Mbps的码流文件时候,视频区显示黑屏,但是声音是正常的。 使用IE和谷歌浏览器都试过,都会出现此问题,请...

Justino
2012/02/28
2.4K
2
EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整

EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权 起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授...

xiejiashu
01/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部