WEB页面页面播放实时视频流
yuyutoo 2025-01-06 16:13 2 浏览 0 评论
业务述求
需要在WEB端实时查看现场的视频监控(公司选型的是大华摄像机)
1
技术方案选型
1. ffmpeg通过rtsp协议拉取视频流
2. 使用vlc media player 组件拉取视频流,在web端显示
3. 使用h5Stream在线对视频流拉取
123
实现大方向
- 把局域网内的摄像头地址做穿刺暴露给外网,并更具响应的视频拉取协议映射好端口
- 安装相应的组件,对相应视频流进行拉取
- 在WEB对通过中间件中转,显示到页面
实现细节
局域网内摄像头配置
公司选型的大华摄像机,所有摄像机出厂统一IP是192.168.1.108
这个IP是可变的,可配置,但是前提这个IP可以访问到摄像头才允许更改
12
在地址栏输入192.168.1.108,第一次登陆默认账号密码都为admin,默认端口37777,第一次登陆会提醒你更改账号密码,记得不要忘记,后面视频拉取的需要用到,进入摄像头更具自己需要做个性化的配置。相关协议端口开放如下:
摄像头的ip地址穿刺
- 登录公司路由器,做端口映射
- 使用花生壳做穿刺。
使用路由器映射的方法,需要拿到路由器的账号密码,这个得跟公司的运维沟通下。
用花生壳做穿刺,会免费赠送一个域名,但是端口是不固定的,如果配置固定的端口,花生壳需要免费收费
在百度上输入本地IP会出现公司路由的外网IP。测试下两种方式是否可以通过外网IP来访问。
拉取视频流
我选用的的是rtsp协议来拉取视频流,大华摄像机的rtsp地址格式如下:
rtsp://[账号]:[密码]@[IP]:[端口]/cam/realmonitor?channel=1&subtype=0channel=1,此属性值对应渠道。subtype=0对应使用主码流还是辅码流
不管大华摄像机也好,还是海康威视摄像机,他们官网都提供本地局域网内的摄像头管理软件。进入官网,导航找到技术支持,里面有工具软件。比如大华的可以用smartPss,海康威视的有iVMS,视频流通过可以通过多个渠道来传输,所以channel要和本地软件中输出通道一致
比如的本地地址:rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0本地摄像头IP地址做穿刺后,把账号密码换成公网的ip和端口即可。
使用h5Stream拉取视频流
h5Stream网上的配置文档很多,不做一一赘述,其主要配置文件为:conf目录下的h5ss.conf文件。
我这里用的是rtsp协议,根据自己的需要配置,一般配置一个空闲的端口即可。
在web端的显示,在h5stream安装目录里, www目录下有相关的使用样例。
优点:配置简单,实时视频同步延迟小,画面清晰。firefox,chrom,ie都可以使用缺点:web页面操作相对复杂,在使用多个摄像头,配置清单驳长,h5stream为收费软件,h5stream为收费软件,h5stream为收费软件,重要的事情说三遍原免费版,会在实时视频流播放一个小时后断流,且当前暂时没有找到破解版。我在官网找到电话,打电话过去咨询,收费是100块钱一个摄像头,具体的价格可以再谈。
vlc media player 拉取
省事儿的话先下载vlc media player安装,也可以单独下载相应的控件。下载完成后:
把rtsp地址copy进地址栏,测试是否可正常显示,若不正常请检查网络是否通畅,账号密码是否正确,ip端口是否正确,通道是否一致而在web端是根据相关的标签来的:实例如下:
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab">
<param name="autostart" value="true" />
<param name="allowfullscreen" value="false" />
</object>
1234
链接: vlc使用操作文档.
优点:测试简单,操作简单,WEB页面操作最简单,视频清晰度无损,延迟级小。缺点:谷歌只支持43版本及其更早,现在都70+版本了。火狐更直接,直接提示不支持。现在通过安装谷歌应用程序可以解决,但是面向客户的时候,客户不会使用体验版,所以注定就不会使用面就不会广
ffmpeg拉取视频流
首先ffmpeg是十分强大,且无比灵活,使用命令行来操作,相对来说就复杂得多,网上有很多安装ffmpeg介绍和ffmpeg命令介绍,这里就不做一一赘述。ffmpeg对视频流进行拉取,转成我们需要的视频码流,比如我们使用的rtsp协议,可以转成rtmp协议或者HLS(m3u8)协议。本文着重介绍此两种,其它的协议格式,原理上相同,只是转码后页面显示的细节不同。ffmpeg允许截图:
- 使用HLS(m3u8)协议
也就是ffmpeg把拉取的rtsp转成HLS的视频流。
命令实例:ffmpeg -i "rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 D:/workspace/nginx-1.8.1/html/hls/test.m3u8 - 1
NGINX并不是一定要用,只要能读取到此今天文件即可。我是通过nginx吧request请求,定向到此文件,当然web项目比较灵活,可以通过web来做访问。生成的文件如下:
静态资源只要支持hls协议,使用今天资源,访问test.m38u文件即可引入video.js,我使用的是7.4.1
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400">
<source src="http://192.168.0.118:1935/hls/test.m38u" type='rtmp/flv'>
</video>
123
缺点:此方法对网络依赖要求比较高,延迟高,容易卡顿
- rtmp协议
命令样例:ffmpeg -rtsp_transport tcp -i "rtsp://admin:Aa517518@192.168.0.108:554/cam/realmonitor?channel=1&subtype=0" -f flv -r 25 -s 1280*720 -an "rtmp://192.168.0.118:1935/hls/mystream" 1其中把rtsp视频流转成rtmp视频流,通过video.js 直接在页面播放<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay width="960" height="400"> <source src="rtmp://192.168.0.118:1935/hls/mystream" type='rtmp/flv'> </video> 123
使用ffmpeg优缺点:优点:谷歌火狐IE都可以用。缺点: ffmpeg很强大,使用命令很灵活,很多细节问题需要琢磨,比如清晰度的问题,比如帧数的问题。ffmpeg比h5stream和vlc使用上确实麻烦许多,而且清晰度不如以上两种,延迟相对也高一下。需要建立相对完善的管理机制,因为全部使用命令,在客户页面关闭视频流时,后台还在不停的拉取视频流,造成极大的资源浪费。
不足与思考
- 不足
单个的视频播放,注定应用面相对狭窄,相当于只写了一半的功能,在很多应用场景单个摄像头是不能满足业务需求的,一般需要拉取多个视频流,这个就很需要好好的思考的。
多个摄像头,如果不在同一个局域网,那么拉取视频流占用较大的资源就无法避免 - 思考
如果在同一的局域网,使用本地的工具,比如电视墙功能,组播功能,在多个镜头信息直接完成一个视频流拉取多个摄像头信息
如果是不同的局域网,那么就需要使用ffmpeg的组播功能,vlc和h5stream的支持并不是很友好
视频流并不是24小时拉取,如果使用ffmpeg的话,在空闲时间并不能主动停止拉取,在WINDOWS下也很难精确地停止某个视频流的拉取进程,在linux下会相对好一些,可以shell脚本找到相对于的pid并KILL
相关推荐
- 详细指南:如何在本地或服务器上安装Z-Blog博客系统
-
怎么安装Z-Blog(HowtoInstallZ-Blog) Z-Blog是一款功能强大的博客系统,因其简单易用和灵活性受到许多用户的喜爱。本文将详细介绍如何在本地或服务器上安装Z-Blog,...
- 群晖NAS安装wordpress博客,构建属于自己的web网站
-
学习网络技术的话可以关注我,每天都会有相应的教程发布的!群晖NAS主要的作用就是网络储存,你可以理解为百度云,但这个百度云的服务器放在了家里。个人而言,有了NAS以后,家里的所有设备(台式电脑,笔记本...
- MySQL8安装 八: 使用phpMyadmin客户端
-
MySQL8安装一:源码安装...
- ThinkPHP6开发博客实战入门(一),集成环境的安装与配置
-
本套入门教程适合想学php或者thinkphp却无从下手的同学,那么恭喜你,你只需要按照本套教程实战操作一遍,就会有意想不到的收获。我教程的特色是很少讲理论知识,主要偏重功能实战。我只会告诉你用怎样的...
- 蒸汽流量计远程控制系统的调试与应用
-
1、系统的联合调试蒸汽流量计上位机控制系统的调试主要包括服务器与数据库、各站点的连接调试。在与数据库连接调试中,本文选用一种被广泛使用的phpMyAdmin工具软件,实现对MySQL数据库图形化管理,...
- 有MacBook电脑,自学PHP详细步骤
-
自学PHP编程并在MacBook上设置好环境,是一个比较简单的过程。你可以按照以下步骤一步步开始你的学习之旅:1.安装PHPMacBook通常预装有PHP,但可以确认一下版本并更新到最...
- 如何从零开始创建一个功能强大的ZBlog网站指南
-
ZBlog怎么创建(HowtoCreateZBlog) ZBlog是一款非常流行的博客系统,因其简洁易用和强大的功能受到许多博主的喜爱。本文将详细介绍如何从零开始创建一个ZBlog网站,包括...
- phpMyAdmin 5.0.0正式发布:移除对5.5/5.6/7.0等旧版PHP支持
-
phpMyAdmin5.0.0版本于今天正式发布。该版本同4.9.3版本同时存在,不过官方推荐没有安装旧版PHP的用户尽量使用5.0.0版本。本次5.0版本更新中在涵盖了4.9分支的大量改进之外,还...
- 黑客学习搭建社工库nas黑群晖部署安装apache+php+mysql个人网站
-
今天分享给大家如何利用群晖自带的web功能,来搭建一个属于自己的个人网站群晖环境:首先进入套件中心,1、下载安装webstation2、下载安装php53、下载安装apache2.44、下载安装Ma...
- phpMyAdmin使用教程(图文详解)
-
什么是phpMyAdmin?phpMyAdmin是众多MySQL图形化管理工具中使用最为广泛的一种,是一款使用PHP开发的基于B/S模式的MySQL客户端软件,该工具是基于Web跨平台的管理程序,并且...
- ZBlog PHP迁移指南:步骤、注意事项与常见问题解决方案总结
-
ZBlogPHP迁移指南(ZBlogPHPMigrationGuide) ZBlog是一个功能强大的博客系统,广泛用于个人博客和企业网站。随着网站的发展,用户可能需要将其ZBlogP...
- 0成本打造私人文档管理系统,这个开源工具让你省下万元订阅费
-
在这个数字化时代,我们每天都在处理大量的文件和文档,随着时间推移,这些纸质文件不断堆积,不仅占用大量空间,查找起来非常让人头疼。你是否也曾因为找不到重要文件而焦虑不已?或是被满屋子的文件弄得焦头烂额?...
- 群晖NAS安装MySQL数据库及phpMyAdmin实现远程管理本地数据库
-
前言本文主要介绍如何在群晖NAS安装MySQL与数据库管理软件phpMyAdmin,并结合cpolar内网穿透工具配置公网地址,实现异地远程访问本地部署的phpMyAdmin详细流程。...
- 广受追捧MFC界面开发库BCGControlBar如何安装?
-
1.BCGControlBar简介1.1概述BCG是MFC的一个扩展库,可以用来构建类似于MicrosoftOffice2003/2007/2010/2013/2016和Microsoft...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)