分享
查看: 3756|回复: 0

[发布] html页面如何访问rtsp视频源

[复制链接]

html页面如何访问rtsp视频源

发表于 2019-8-27 14:05:20 来自 发布 阅读模式 倒序浏览
zzv_icon3756 zzr_icon0 查看全部

基本知识:

1. 目前web不能直接访问rtsp视频源(不考虑安装插件的情况)

2. html页面播放视频的四种方式

1.)视频文件(如mpeg,webm,部署最简单,实时性较差)

2.)webrtc协议, 实时性能最好

3.) websokect 协议, 需要自己封装,也有一些开源和商业库

4.)rtmp协议(需安装flash插件)

所以rtsp视频源必须 通过 视频转换服务器进行转换后才能在html页面上播放视频。

整个架构如下:

html页面如何访问rtsp视频源


转码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选择网络串流。

html页面如何访问rtsp视频源

填上视频源

html页面如何访问rtsp视频源

如果点下面播放,可以播放视频说明视频源没有问题。点串流则可以做本地视频源转换。

再确认一下视频源,点下一步

html页面如何访问rtsp视频源

再选择 流输出可以选择http文件

html页面如何访问rtsp视频源

点击添加,填上服务器端口号和路径。

html页面如何访问rtsp视频源

编码方式要 选 Theora会稳定一点

html页面如何访问rtsp视频源

继续点下一步,VLC便开始以 转码server 的方式运行了。

html页面如何访问rtsp视频源

4. html页面编写

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <video src="http://127.0.0.1:8080/test" controls="controls">
  5. your browser does not support the video tag
  6. </video>
  7. </body>
  8. </html>
复制代码

最后打开页面成功完成rtsp的html web化。


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t