基本知识: 1. 目前web不能直接访问rtsp视频源(不考虑安装插件的情况) 2. html页面播放视频的四种方式 1.)视频文件(如mpeg,webm,部署最简单,实时性较差) 2.)webrtc协议, 实时性能最好 3.) websokect 协议, 需要自己封装,也有一些开源和商业库 4.)rtmp协议(需安装flash插件) 所以rtsp视频源必须 通过 视频转换服务器进行转换后才能在html页面上播放视频。 整个架构如下: 
转码server 是其中最复杂又最核心的部分。(目前有很多商用公司如:声网,也有一些开源资源例如 :kurento )
知道上述架构后,我们可以用vlc软件来做快速做个试验。 1.收集rtsp源: 如大华的是 rtsp://user:pwd@ip:port/cam/ realmonitor?channel=1&subtype=0 海康的是 rtsp://user:pwd@ip:port/MPEG-4/ch1/main/av_stream 旷视 C2 rtsp://192.168.1.10/user=admin&password=&channel=1&stream=0.sdp? 2.安装VLC播放器,我们用VLC播放器来做 转码server VLC播放器安装,百度搜索下载安装。 3.设置转码。 打开VLC选择网络串流。 
填上视频源 
如果点下面播放,可以播放视频说明视频源没有问题。点串流则可以做本地视频源转换。 再确认一下视频源,点下一步 
再选择 流输出可以选择http文件 
点击添加,填上服务器端口号和路径。 
编码方式要 选 Theora会稳定一点 
继续点下一步,VLC便开始以 转码server 的方式运行了。 
4. html页面编写 - <!DOCTYPE HTML>
- <html>
- <body>
- <video src="http://127.0.0.1:8080/test" controls="controls">
- your browser does not support the video tag
- </video>
- </body>
- </html>
复制代码最后打开页面成功完成rtsp的html web化。
|