浏览器播放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

 

相关文章
|
1月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
138 1
|
1月前
|
计算机视觉
关于人脸识别最近浏览器打不开摄像头的解决方案
关于人脸识别最近浏览器打不开摄像头的解决方案
33 0
|
1月前
|
JavaScript IDE 测试技术
Rtsp转Flv在浏览器中播放
【2月更文挑战第5天】本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。
86 1
|
7月前
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
253 0
|
5月前
|
缓存 前端开发 JavaScript
前端跨浏览器标签页数据共享解决方案
vue 项目中有一个工单消息通知列表页,每条消息有已读和未读状态,点击消息会用 window.open 打开一个新的浏览器标签页跳转到工单列表页,工单列表页里有项操作是查看消息,会弹窗显示出具体的详细内容,进入这个弹窗就代表用户已经看到消息了,此时会去调后端接口修改消息状态为已读
79 0
|
5月前
Edge浏览器崩溃解决方案
Edge浏览器崩溃解决方案
80 0
|
6月前
|
编解码 Cloud Native 前端开发
H.265 视频在浏览器中的播放问题探究
H.265 视频在浏览器中的播放问题探究
99 0
|
6月前
|
Web App开发 安全 Shell
【异常解决】浏览器无法访问此网站ERR_UNSAFE_PORT/网页可能无法连接,或者它已永久性地移动到了新网址问题解决方案
【异常解决】浏览器无法访问此网站ERR_UNSAFE_PORT/网页可能无法连接,或者它已永久性地移动到了新网址问题解决方案
268 0
|
7月前
|
Web App开发 JavaScript 前端开发
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
SAP UI5 在 PC 端浏览器和移动设备使用摄像头进行条形码扫描的几种解决方案介绍
63 0
|
7月前
|
编解码 网络协议 开发工具
IE浏览器下如何低延迟播放RTSP或RTMP流
首先,虽然本文是介绍IE浏览器下OCX控件播放RTSP或RTMP,但这种方式并不推荐,毕竟它只能用于IE浏览器环境下,局限太大,而且随着微软IE浏览器的更新,不确定后续支持情况。当然,话说回来,如果是在特定的使用场景下,只需要某些版本IE浏览器支持,但对延迟和稳定性要求非常高,OCX控件方式也不失为一个好的选择。

热门文章

最新文章