浏览器播放RTSP格式视频流的解决方法
公司最近在做一个和摄像头有关的项目,我也参与了一些边边角角的事情,下面就来说一说我做的一些事情。
公司采用的是海康威视的摄像头,海康威视还是可以的,他会给客户提供一个摄像头web的管理系统,用户其实使用这个管理系统就可以完成基本的需求了,海康威视的提供还是比较充分的。可能有些开发者对于这个管理系统还是不够满足,想要自己开发一个可以在web页面显示摄像头视频画面。这个也是可以的,海康威视也是提供了一个web开发包,方便开发者的使用。我这几天在网上找了好久,都是一些下载要积分的,我这里把下载的地址放在GitHub上面,方便大家的下载。同时放上去的还有海康威视开发的SDK。
海康威视摄像头的视频流采用的RTSP协议的视频流,但是html5支持的是RTMP,所以RTSP协议的食视频流无法直接在web页面上面显示。我要做的工作就是在web页面上面显示RTSP格式的摄像视频流。
先来说一说RTSP协议的一些特点: (1)是流媒体协议。 (2)RTSP协议是共有协议,并有专门机构做维护。 (3)RTSP协议一般传输的是 ts、mp4 格式的流。 (4)RTSP传输一般需要 2-3 个通道,命令和数据通道分离。以上是我在网上搜到的一些RTSP协议的特点。下面就来说一说我要做的工作。
浏览器支持RTSP格式也是比较简单的,但是对于不同的浏览器会有不一样的实现方式,比如安装VLC插件,这种方法对于IE比较适合(高版本的IE不清楚),下面就来说一说具体的实现。
VLC实现播放RTSP格式的视频流非常简单,只要安装了VLC的插件或者安装了VLC的播放器就可以了,VLC播放器和插件我也都放在了GitHub上面,下面会有链接。安装完VLC插件后,直接在页面显示视频流代码就可以。我的页面代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <html> <body> <!--[ if IE]> <object type= 'application/x-vlc-plugin' id= 'vlc' events= 'True' classid= 'clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase= "http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width= "720" height= "540" > <param name= 'mrl' value= 'rtsp://admin:hik12345+@10.168.5.111:554/H264/ch1/main/av_stream' /> <param name= 'volume' value= '50' /> <param name= 'autoplay' value= 'true' /> <param name= 'loop' value= 'false' /> <param name= 'fullscreen' value= 'false' /> </object> <![endif]--> <!--[ if !IE]><!--> <object type= 'application/x-vlc-plugin' id= 'vlc' events= 'True' width= "720" height= "540" pluginspage= "http://www.videolan.org" codebase= "http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz" > <param name= 'mrl' value= 'rtsp://admin:hik12345+@10.168.5.111:554/H264/ch1/main/av_stream' /> <param name= 'volume' value= '50' /> <param name= 'autoplay' value= 'true' /> <param name= 'loop' value= 'false' /> <param name= 'fullscreen' value= 'false' /> </object> <!--<![endif]--> </body </html> |
代码非常简单,这里要注意你的RTSP路径,因为我的是海康威视的摄像机,所以会有一定的格式,大家也要注意各自开发时的URL。我这里没有安装插件,只是之前安装了VLC播放器,所以没有安装插件来测试,如果有问题的话,欢迎大家提出问题,一起解决。
上面也说了,VLC插件现在支持的浏览器不是很多了,比如谷歌和火狐的高版本就不再支持VLC’插件,所以这里还要在想一个解决办法,解决谷歌播放RTSP格式的视频流。但是不凑巧,我看到关于谷歌工程师的一个帖子,他说谷歌就不应该支持RTSP格式的视频流,将来也不会。有点灰心,但我还是找到了一个方法。利用vxgplayer。Vxgplayer是一个谷歌浏览器的插件,好像也只支持谷歌浏览器,在其他浏览器上面我还没有找到这个插件,现在谷歌的问题也是如此,插件我就不再上传上去了,插件和js文件两个都有就可以播放视频了。
不过要注意的是,这个页面要放在tomcat上面运行启动,我会把整个压缩包放上去,这些都是在官网上面下载的,在文章的最后我也会放上去这几天我查到的一些有用的官网资料。
下面就是简答的代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html> <head> <!-- vxgplayer --> <script type= "text/javascript" src= "vxgplayer-1.8.31.min.js" ></script> <link href= "vxgplayer-1.8.31.min.css" rel= "stylesheet" /> </head> <body> <div id= "runtimePlayers" > <div id= "vxg_media_player1" class = "vxgplayer" url= "rtsp://admin:hik12345+@10.168.5.111:554/H264/ch1/main/av_stream" aspect-ratio latency= "3000000" autostart controls avsync></div> </div> </body> </html> |
下载完压缩包后,记得将index.html替换为上面的代码,官网中提供的代码比较乱。直接将url替换为你的RTSP格式的视频流就可以了。
下面其实就没有什么要讲的了,你的web支持了IE和谷歌估计也差不多了,火狐在想想办法估计也是可以的。但是估计也要安装插件。
最后在说一说遇到的RTSP格式视频流的问题,因为我使用的是海康威视的摄像头,RTSPurl的格式估计大家的也不太一样,在网上搜一搜也是可以找到的。不再累述。只是想说一下,不同的摄像机的RTSP的格式是不一样的。最后放上一些链接,关于这几天找到的一些有用的网站。我的GitHub工具地址为https://github.com/qq1162210866/developmenttool.git
海康威视的下载:https://www.hikvision.com/cn/download_60.html
Vxgplayer的官网:https://www.videoexpertsgroup.com/vxg-chrome-plugin/
streamedian 官网(也是不错的一个RTSP播放器,但是最后没有采用):https://streamedian.com/
结束。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现