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

 

相关文章
|
2月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
398 1
|
11天前
解除谷歌浏览器默认禁止音频自动播放
解除谷歌浏览器默认禁止音频自动播放
20 1
|
11天前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
8 0
|
2月前
浏览器兼容性解决方案
【5月更文挑战第4天】浏览器兼容性解决方案。
27 5
|
2月前
|
JavaScript IDE 测试技术
Rtsp转Flv在浏览器中播放
【2月更文挑战第5天】本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。
300 1
|
2月前
|
计算机视觉
关于人脸识别最近浏览器打不开摄像头的解决方案
关于人脸识别最近浏览器打不开摄像头的解决方案
|
10月前
|
Web App开发 移动开发 编解码
浏览器播放RTSP视频流几种解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
410 0
|
8月前
|
缓存 前端开发 JavaScript
前端跨浏览器标签页数据共享解决方案
vue 项目中有一个工单消息通知列表页,每条消息有已读和未读状态,点击消息会用 window.open 打开一个新的浏览器标签页跳转到工单列表页,工单列表页里有项操作是查看消息,会弹窗显示出具体的详细内容,进入这个弹窗就代表用户已经看到消息了,此时会去调后端接口修改消息状态为已读
119 0
|
8月前
Edge浏览器崩溃解决方案
Edge浏览器崩溃解决方案
105 0
|
9月前
|
编解码 Cloud Native 前端开发
H.265 视频在浏览器中的播放问题探究
H.265 视频在浏览器中的播放问题探究
181 0