百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

WEB页面页面播放实时视频流

yuyutoo 2025-01-06 16:13 4 浏览 0 评论


业务述求

	需要在WEB端实时查看现场的视频监控(公司选型的是大华摄像机)
1

技术方案选型

1.  ffmpeg通过rtsp协议拉取视频流
2.  使用vlc media player 组件拉取视频流,在web端显示
3.  使用h5Stream在线对视频流拉取
123

实现大方向

  1. 把局域网内的摄像头地址做穿刺暴露给外网,并更具响应的视频拉取协议映射好端口
  2. 安装相应的组件,对相应视频流进行拉取
  3. 在WEB对通过中间件中转,显示到页面

实现细节

局域网内摄像头配置

公司选型的大华摄像机,所有摄像机出厂统一IP是192.168.1.108 
这个IP是可变的,可配置,但是前提这个IP可以访问到摄像头才允许更改
12

在地址栏输入192.168.1.108,第一次登陆默认账号密码都为admin,默认端口37777,第一次登陆会提醒你更改账号密码,记得不要忘记,后面视频拉取的需要用到,进入摄像头更具自己需要做个性化的配置。相关协议端口开放如下:

摄像头的ip地址穿刺

  1. 登录公司路由器,做端口映射
  2. 使用花生壳做穿刺。

使用路由器映射的方法,需要拿到路由器的账号密码,这个得跟公司的运维沟通下。
用花生壳做穿刺,会免费赠送一个域名,但是端口是不固定的,如果配置固定的端口,花生壳需要免费收费

在百度上输入本地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允许截图:

  1. 使用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
  2. 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

缺点:此方法对网络依赖要求比较高,延迟高,容易卡顿

  1. 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使用上确实麻烦许多,而且清晰度不如以上两种,延迟相对也高一下。需要建立相对完善的管理机制,因为全部使用命令,在客户页面关闭视频流时,后台还在不停的拉取视频流,造成极大的资源浪费。

不足与思考

  1. 不足
    单个的视频播放,注定应用面相对狭窄,相当于只写了一半的功能,在很多应用场景单个摄像头是不能满足业务需求的,一般需要拉取多个视频流,这个就很需要好好的思考的。
    多个摄像头,如果不在同一个局域网,那么拉取视频流占用较大的资源就无法避免
  2. 思考
    如果在同一的局域网,使用本地的工具,比如电视墙功能,组播功能,在多个镜头信息直接完成一个视频流拉取多个摄像头信息
    如果是不同的局域网,那么就需要使用ffmpeg的组播功能,vlc和h5stream的支持并不是很友好
    视频流并不是24小时拉取,如果使用ffmpeg的话,在空闲时间并不能主动停止拉取,在WINDOWS下也很难精确地停止某个视频流的拉取进程,在linux下会相对好一些,可以shell脚本找到相对于的pid并KILL

相关推荐

网站制作的流程是什么呢?简单大概的流程

关注我!了解更多网站建设的小干货~如今,随着网络时代的全面到来,网站在人们的生活和工作中发挥着极其重要的作用。网站制作的发展使更多的人加入了这个行业。如果你想掌握网站制作的知识,你可以在学校或网上学习...

一款谷歌(Google)打造的广告网页设计制作软件

GoogleWebDesigner是由谷歌(Google)打造的一款广告网页设计制作软件,它能够帮助从事于广告网页设计工作或是有这方面需求的用户更加有效快速的进行完成相关的行业设计工作,软件可以支...

普通网站如何制作一个网站?

对行外人来讲,在预备做一个网站项目时,最想了解的无非就是网站制作的悉数流程。网站制作是要有计划的,事先策划好才能更快更好的完成。网站的几个基本组成元素:域名+空间+程序+模板+维护经验+日常管理.网站...

用纯Python就能写一个漂亮的网页,再见HTML

再见HTML!用纯Python就能写一个漂亮的网页我们在写一个网站或者一个网页界面的时候,需要学习很多东西,对小白来说很困难!比如我要做一个简单的网页交互:天啊,听听头都大呢!其实我就给老板做一个...

HTML表单4(form的action、method属性)——零基础自学网页制作

表单的工作过程表单的信息发送与处理过程可以简单的进行图示,如下图。以注册会员为例,用户在自己的电脑上打开相应的注册表单页面填写信息,完成填写后点击提交按钮,也就是图中1所示过程。这时浏览器会将这些信息...

官网网站设计网页制作模板建站前端自适应响应式网站仿站门户

案例背景航科慧联无人机搜索雷达能够在多种天气下检测到无人机的入侵、并获得目标的距离、方向和高度等具体信息,是无人机反制作战中的关键设备。航科慧联无人机搜索雷达能够在多种天气下检测到无人机的入侵、并获得...

软网推荐:在线制作软件图标

在制作PPT演示、软件、网页或其他程序时,我们往往需要用到一些个性化的图标。现在,即便是不安装任何软件,也可以上网在线制作自己需要的图标。首先访问如下制作网址:http://www.rw-design...

自定义跳转的h5网页如何制作?

文章来源:墨鹊微站...

网页如何制作?这几点要知道

这是一个个性张扬的时代,也是一个动手能力和动脑能力都比较强的时代,因此很多人对于能够自己动手完成的东西,都不太想假手于人。于是网页制作成了各大搜索引擎里面排名比较靠前的关键词之一。想要知道网页如何制作...

手机端网站简单制作教程,怎么快速制作一个移动端的网站

想要创建一个手机端的网站,需要有域名、已经完成网站页面的开发设计,零基础朋友不懂代码技术,直接在线套用乔拓云里面的网站模板来开发是比较简单可行的,进入乔拓云网,复制网站模板编辑网站的内容,注册域名后绑...

几张动图教你轻松了解Dreamweaver做网页

施老师:当今可是互联网时代,人们的生活、社交离不开互联网,那么不管你是网页设计师,还是销售达人,还是个体户,总必不可少的要在网上呈现一些页面给客户看,这个就是让你做网页,而Dreamweaver是做网...

用Deepseek制作网页版的汉诺塔游戏保姆级教程

在deepseek中输入:“帮我做一个网页版的汉诺塔演示游戏,游戏包含2层、3层、4层、5层的汉诺塔游戏演示,制作自动求解演示按钮,点击按钮就可以生成出步数,同时自动演示最优解动画。”...

JS制作网页版计算器

大家晚上好,我是洁哥,抱歉今天有点晚了,但是洁哥不会缺席哦,今天我们来看一个JS实现网页版计算器的例题,先来看一看出来的效果吧(123+123=246)(123-123=0)(123*123=1512...

网页制作流程哪几步

在数字化时代,网页制作成为企业和个人展示形象、传递信息的重要方式。但是,许多人对于网页制作的流程仍感到困扰。为了解决这一问题,我们将深入探讨网页制作的关键步骤,助您更好地理解和应用这一过程。第一步:需...

这4个设计技巧,教你做好个人网页制作

随着互联网发展,个人建站已经不是什么稀奇事,学生、求职者、插画师、摄影师、作家……都可以制作个人网站,用来展示自身形象,或者吸引粉丝。那么如何做好个人网站呢?在不懂设计和技术知识的情况下,个人网页制作...

取消回复欢迎 发表评论: