首页 > 代码库 > 浏览器播放rtsp流媒体解决方案

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

2024-09-23 03:47:04   206人阅读

老板提了一个需求，想让网页上播放景区监控的画面，估计是想让游客达到未临其地，已知其境的状态吧。
    说这个之前，还是先说一下什么是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。

<iframe id="iframe_0.5029553447304878" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/*qI5yJWbXI*.jMHNFH.JI0WAIfPqzgo.RDN*EyTUCSE!/o/dGgBAAAAAAAA&ek=1&kp=1&pt=0&bo=ZgKaAGYCmgADEDU!&su=194678593&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.5029553447304878‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>    

1.先把nginx开了。

<iframe id="iframe_0.32780845480041654" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/GHFF3ii7pNNwfRdCRAFx6xXiTnTFvQIyJVslDBJWy1s!/o/dGgBAAAAAAAA&ek=1&kp=1&pt=0&bo=QQIyAEECMgADEDU!&su=131771553&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.32780845480041654‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe> 

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

<iframe id="iframe_0.1356119867897534" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/w1G8OSBZ374Wnj.gGqcpVdqMvWiQOniPLKq9Zb*B6KI!/o/dGcBAAAAAAAA&ek=1&kp=1&pt=0&bo=pgEgAqYBIAIDEDU!&su=1124752593&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.1356119867897534‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

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

<iframe id="iframe_0.07817118811660007" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/hLn2mM9nU91KqY7xRkN461mbS97R*ZxEq.yVossi8SY!/o/dFUBAAAAAAAA&ek=1&kp=1&pt=0&bo=LgKTAS4CkwEDEDU!&su=1201723041&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.07817118811660007‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>

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

这串地址每一项都要对，不然就等着报错吧，错了重来也是挺浪费时间的。
<iframe id="iframe_0.06549133362117932" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/OkAv0pZhmbw2nQx2JsKYm8VD7A3FWYDJSQbf0HZulvE!/o/dFUBAAAAAAAA&ek=1&kp=1&pt=0&bo=ogJzAKICcwADEDU!&su=1192989361&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.06549133362117932‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
如图就是地址不对导致的授权失败。
话不多说，让我们开了ffmpeg吧。
<iframe id="iframe_0.7025072238023651" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/Qk9yVy45QcJ83FWfQEZOU8GwS0I5qa8WV5snolemYq8!/o/dGcBAAAAAAAA&ek=1&kp=1&pt=0&bo=hAI3AIQCNwADEDU!&su=19214641&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.7025072238023651‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
然后再转一下rtmp
<iframe id="iframe_0.9505085440533791" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/iNVyabYqKb3basvC*aEUdT.iOtQSihbImCpo2tTp0ww!/o/dFYBAAAAAAAA&ek=1&kp=1&pt=0&bo=kwJcAJMCXAADEDU!&su=1225154113&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.9505085440533791‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
如果成功了会一直转，不停歇：
<iframe id="iframe_0.9912768874190452" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/vamjiOEfdxzNUQGvKif4PB*ZmrmBOlV1y2SDs7sMH0o!/o/dFYBAAAAAAAA&ek=1&kp=1&pt=0&bo=hQK8AYUCvAEDEDU!&su=1217827441&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.9912768874190452‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
至此，ffmpeg就先这样吧
3 让我们开了jwplayer
<iframe id="iframe_0.6088982154455236" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/GniFqIiALghY22fz6k.BvtVkTxfn5jIPa5PhY5fCMcU!/o/dFUBAAAAAAAA&ek=1&kp=1&pt=0&bo=4QJWAeECVgEDEDU!&su=1234685249&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.6088982154455236‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
key值一定要有，这是我以前觉的一切都没错，js也引了，可还是实现不了播放的一个原因。
jwplayer虽然是国外的还是很不错的，可以自定义直播封面，插播广告等，可惜有的功能要花钱。
最后刷下local,
<iframe id="iframe_0.7413069751796626" src="data:text/html;charset=utf8,%3Cstyle%3Ebody%7Bmargin:0;padding:0%7D%3C/style%3E%3Cimg%20id=%22img%22%20src=%22http://r.photo.store.qq.com/psb?/V11Xm5xd2D53zN/h56hrg55zL04eJDa2ecYqH9*TrZiZ76pTogScqMdATQ!/o/dGgBAAAAAAAA&ek=1&kp=1&pt=0&bo=.wElAfsBJQEDEDU!&su=187895121&tm=1495076400&sce=0-12-12&rf=2-9&_=6872365%22%20style=%22border:none;max-width:701px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById(‘img‘);%20window.parent.postMessage(%7BiframeId:‘iframe_0.7413069751796626‘,width:img.width,height:img.height%7D,%20‘http://www.cnblogs.com‘);%7D%3C/script%3E" frameborder="0" scrolling="no" width="320" height="240"></iframe>
 
ok，海康的摄像头再也不需要海康的软件才能看直播了。
其实，实践过程中还出过一些其它错误，时间拖的太长，我也记不清了。
一开始是想用websocket直接拿过来video直接播放rtsp的，由于后台说的某些原因，就改用这个方案了。
我现在还是想用websocket，有时间了再看下吧。

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

 

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


联系
我们