开发者社区> developerguy> 正文

浏览器播放rtsp流媒体解决方案

简介: 老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧。    说这个之前,还是先说一下什么是rtsp协议吧。 RTSP(Real Time Streaming Protocol),实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学、网景和RealNetworks公司提交的IETF RFC标准。
+关注继续查看

老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧。
    说这个之前,还是先说一下什么是rtsp协议吧。
 RTSP(Real Time Streaming Protocol),实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学、网景和RealNetworks公司提交的IETF RFC标准。该协议定义了一对多应用程序如何有效地通过IP网络传送多媒体数据。RTSP在体系结构上位于RTP和RTCP之上,它使用TCP或RTP完成数据传输。HTTP与RTSP相比,HTTP传送HTML,而RTP传送的是多媒体数据。HTTP请求由客户机发出,服务器作出响应;使用RTSP时,客户机和服务器都可以发出请求,即RTSP可以是双向的。(管他说的啥,反正就是摄像头的协议,网页不能直接播)。
 跟后台研究了几天,决定的实现方式是:nginx搭的服务器,ffmpeg转码,jwplayer播放。(未知的时候像读天书,真要了解了,感觉也没多难)。
什么都不说了,卷起袖子玩玩吧。先搞个ffmpeg、nginx和jwplay。

    

1.先把nginx开了。

 

conf里我用的是这两个端口,

1935不是http,但8080的www是呀, 先放个本地的mp4看看有没有问题。

2再说说ffmpeg.
 FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。在这里我只用到了它的视屏格式转换功能,将rtsp协议的视频流转成rtmp(监控本身是rtsp协议,现在这个方案虽然用了jwplay,但也只是支持rtmp,因此要用ffmpeg转码)
举个例子:
假如海康摄像头的监控地址为(rtsp://admin:12345@192.168.10.215/h264/ch1/main/av_stream)(帐户,密码,ip,端口,.....)

这串地址每一项都要对,不然就等着报错吧,错了重来也是挺浪费时间的。

如图就是地址不对导致的授权失败。
话不多说,让我们开了ffmpeg吧。
然后再转一下rtmp
如果成功了会一直转,不停歇:
至此,ffmpeg就先这样吧
3 让我们开了jwplayer
key值一定要有,这是我以前觉的一切都没错,js也引了,可还是实现不了播放的一个原因。
jwplayer虽然是国外的还是很不错的,可以自定义直播封面,插播广告等,可惜有的功能要花钱。
最后刷下local,
 
ok,海康的摄像头再也不需要海康的软件才能看直播了。
其实,实践过程中还出过一些其它错误,时间拖的太长,我也记不清了。
一开始是想用websocket直接拿过来video直接播放rtsp的,由于后台说的某些原因,就改用这个方案了。
我现在还是想用websocket,有时间了再看下吧。

http://www.cnblogs.com/gaoji/p/6872365.html

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
几种将设备视频流转码成浏览器能够播放的协议的方法
将rtsp转换成浏览器能访问的hls协议和http-flv协议的方法
45 0
如果监控摄像头不支持Web Socket,猿大师播放器还能在网页中播放RTSP流吗?
猿大师播放器在前端用web socket是浏览器和中间件及播放程序之间的通讯协议,和实际播放无关,只要浏览器支持web socket就可以播放,现在大部分浏览器都支持web socket,所以就算监控设备不支持Websocket,用猿大师播放器播放RTSP也是是没问题的。
71 0
猿大师播放器在Chrome网页播放多路H.265海康威视RTSP视频流页面卡顿CPU占用高怎么办?
试用猿大师播放器播放一路视频效果很不错,延迟可以控制在200毫秒左右,但是如果播放多路高清视频,CPU占用就会比较高,并且网页也会卡顿,该如何解决呢?
204 0
HTML页面 加载播放RTMP协议流和HLS协议流直播视频
HTML页面 加载播放RTMP协议流和HLS协议流直播视频
557 0
高版本Chrome VUE页面播放RTSP实时视频流,并抓图、录像、回放、倍速等
因为项目上需要把海康威视摄像头集成到WEB网页中播放,于是开始了对WEB播放摄像头方案的各种折腾。 2015年之前还可以用VLC原生播放器在Chrome、Firefox等浏览器中直接播放,延迟比较低,效果也还不错。可惜好景不长,从 2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,海康威视官方提供的 web3.0开发包也只能在低版本浏览器播放。
356 0
在高版本谷歌Chrome浏览器中用VLC播放海康、大华RTSP实时视频完全方案
随着互联网基础设施的完善以及4G、5G等技术的大规模商用,在Chrome、Firefox、Edge等浏览器播放RTSP视频流也慢慢成为了信息化系统的行业标准。早些年还可用VLC播放器在网页中播放RTSP视频流,好景不长,2015年Chrome、Firefox等浏览器取消了对 NPAPI插件的支持,导致在高版本的Chrome等网页中播放海康威视、大华等摄像头RTSP视频流也成了奢望。
1193 0
海康威视摄像头RTSP视频流嵌入到谷歌Chrome等WEB页面中实时播放方案(图文教程)
近期在做一个智慧城市项目,要求将海康威视、大华等摄像头RTSP视频流在Chrome、Firefox、Edge等浏览器中播放,并且要求延迟必须要低,能到多低就多低,最好是实时视频。 小编了解很多不同的方案,目前市面上大部分是转码转流方案,不仅需要服务器支持,并且需要服务器不停的转码转流,如果多路同时播放或者播放高清视频,非常容易出现卡顿、花屏等情况,延迟更是高达数秒甚至数分钟,对于一些延迟要求较高的项目来说,这简直是灾难性后果。
1970 0
安卓端/iOS端如何播放4K分辨率的RTMP/RTSP流
关于4K分辨率 4K分辨率即4096×2160的像素分辨率,它是2K投影机和高清电视分辨率的4倍,属于超高清分辨率。在此分辨率下,观众将可以看清画面中的每一个细节,每一个特写。影院如果采用惊人的4096×2160像素,无论在影院的哪个位置,观众都可以清楚的看到画面的每一个细节,影片色彩鲜艳、文字清晰锐丽,再配合超真实音效,这种感觉真的是一种难以言传的享受。
1396 0
如何在IE浏览器播放RTSP或RTMP流
好多开发者一直苦恼于如何在IE浏览器环境下,构建低延迟的RTSP或RTMP播放,对于RTSP流来说,好多公司通常的做法是把RTSP转RTMP,然后分发到RTMP服务器,然后服务器转http-flv出来,浏览器直接播放http-flv流,亦或通过flash控件直接播放RTMP流,还有就是,转hls流出来,缺点是hls流延迟更大。
3632 0
+关注
developerguy
A code cleanliness code farmers, A programmer concentrate on elegant design, A want to do with the product architect
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于浏览器的实时构建探索之路
立即下载
基于WebAssembly的H265播放器
立即下载
基于浏览器的实时构建探索之路--玄寂
立即下载