老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧。
说这个之前,还是先说一下什么是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。
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vKnFJNXlKV2JYSSouak1ITkZILkpJMFdBSWZQcXpnby5SRE4qRXlUVUNTRSEvby9kR2dCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89WmdLYUFHWUNtZ0FERURVISZzdT0xOTQ2Nzg1OTMmdG09MTQ5NTA3NjQwMCZzY2U9MC0xMi0xMiZyZj0yLTk%3D.jpg?w=700&webp=1)
1.先把nginx开了。
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vR0hGRjNpaTdwTk53ZlJkQ1JBRng2eFhpVG5URnZRSXlKVnNsREJKV3kxcyEvby9kR2dCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89UVFJeUFFRUNNZ0FERURVISZzdT0xMzE3NzE1NTMmdG09MTQ5NTA3NjQwMCZzY2U9MC0xMi0xMiZyZj0yLTk%3D.jpg?w=700&webp=1)
conf里我用的是这两个端口,
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vdzFHOE9TQlozNzRXbmouZ0dxY3BWZHFNdldpUU9uaVBMS3E5WmIqQjZLSSEvby9kR2NCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89cGdFZ0FxWUJJQUlERURVISZzdT0xMTI0NzUyNTkzJnRtPTE0OTUwNzY0MDAmc2NlPTAtMTItMTImcmY9Mi05.jpg?w=700&webp=1)
1935不是http,但8080的www是呀, 先放个本地的mp4看看有没有问题。
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vaExuMm1NOW5VOTFLcVk3eFJrTjQ2MW1iUzk3UipaeEVxLnlWb3NzaThTWSEvby9kRlVCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89TGdLVEFTNENrd0VERURVISZzdT0xMjAxNzIzMDQxJnRtPTE0OTUwNzY0MDAmc2NlPTAtMTItMTImcmY9Mi05.jpg?w=700&webp=1)
2再说说ffmpeg.
FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。在这里我只用到了它的视屏格式转换功能,将rtsp协议的视频流转成rtmp(监控本身是rtsp协议,现在这个方案虽然用了jwplay,但也只是支持rtmp,因此要用ffmpeg转码)
举个例子:
假如海康摄像头的监控地址为(rtsp://admin:12345@192.168.10.215/h264/ch1/main/av_stream)(帐户,密码,ip,端口,.....)
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vT2tBdjBwWmhtYncyblF4MkpzS1ltOFZEN0EzRldZREpTUWJmMEhadWx2RSEvby9kRlVCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89b2dKekFLSUNjd0FERURVISZzdT0xMTkyOTg5MzYxJnRtPTE0OTUwNzY0MDAmc2NlPTAtMTItMTImcmY9Mi05.jpg?w=700&webp=1)
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vUWs5eVZ5NDVRY0o4M0ZXZlFFWk9VOEd3UzBJNXFhOFdWNXNub2xlbVlxOCEvby9kR2NCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89aEFJM0FJUUNOd0FERURVISZzdT0xOTIxNDY0MSZ0bT0xNDk1MDc2NDAwJnNjZT0wLTEyLTEyJnJmPTItOQ%3D%3D.jpg?w=700&webp=1)
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vaU5WeWFiWXFLYjNiYXN2QyphRVVkVC5pT3RRU2loYkltQ3BvMnRUcDB3dyEvby9kRllCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89a3dKY0FKTUNYQUFERURVISZzdT0xMjI1MTU0MTEzJnRtPTE0OTUwNzY0MDAmc2NlPTAtMTItMTImcmY9Mi05.jpg?w=700&webp=1)
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vdmFtamlPRWZkeHpOVVFHdktpZjRQQipabXJtQk9sVjF5MlNEczdzTUgwbyEvby9kRllCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89aFFLOEFZVUN2QUVERURVISZzdT0xMjE3ODI3NDQxJnRtPTE0OTUwNzY0MDAmc2NlPTAtMTItMTImcmY9Mi05.jpg?w=700&webp=1)
![浏览器播放rtsp流媒体解决方案 浏览器播放rtsp流媒体解决方案](https://image.shishitao.com:8440/aHR0cDovL3IucGhvdG8uc3RvcmUucXEuY29tL3BzYj8vVjExWG01eGQyRDUzek4vR25pRnFJaUFMZ2hZMjJmejZrLkJ2dFZrVHhmbjVqSVBhNVBoWTVmQ01jVSEvby9kRlVCQUFBQUFBQUEmZWs9MSZrcD0xJnB0PTAmYm89NFFKV0FlRUNWZ0VERURVISZzdT0xMjM0Njg1MjQ5JnRtPTE0OTUwNzY0MDAmc2NlPTAtMTItMTImcmY9Mi05.jpg?w=700&webp=1)