web页面播放实时视频流
web页面播放实时视频流
- 业务述求
- 技术方案选型
- 实现大方向
- 实现细节
- 局域网内摄像头配置
- 摄像头的ip地址穿刺
- 拉取视频流
- 使用h5Stream拉取视频流
- vlc media player 拉取
- ffmpeg拉取视频流
- 不足与思考
业务述求
需要在WEB端实时查看现场的视频监控（公司选型的是大华摄像机）
技术方案选型
1. ffmpeg通过rtsp协议拉取视频流
2. 使用vlc media player 组件拉取视频流，在web端显示
3. 使用h5Stream在线对视频流拉取
实现大方向
- 把局域网内的摄像头地址做穿刺暴露给外网，并更具响应的视频拉取协议映射好端口
- 安装相应的组件，对相应视频流进行拉取
- 在WEB对通过中间件中转，显示到页面
实现细节
局域网内摄像头配置
公司选型的大华摄像机，所有摄像机出厂统一IP是192.168.1.108
这个IP是可变的，可配置，但是前提这个IP可以访问到摄像头才允许更改
在地址栏输入192.168.1.108，第一次登陆默认账号密码都为admin，默认端口37777，第一次登陆会提醒你更改账号密码，记得不要忘记，后面视频拉取的需要用到，进入摄像头更具自己需要做个性化的配置。
相关协议端口开放如下：
摄像头的ip地址穿刺
- 登录公司路由器，做端口映射
- 使用花生壳做穿刺。
使用路由器映射的方法，需要拿到路由器的账号密码，这个得跟公司的运维沟通下。
用花生壳做穿刺，会免费赠送一个域名，但是端口是不固定的，如果配置固定的端口，花生壳需要书费收费
在百度上输入本地IP会出现公司路由的外网IP。
测试下两种方式是否可以通过外网IP来访问。
拉取视频流
我选用的的是rtsp协议来拉取视频流，大华摄像机的rtsp地址格式如下：
rtsp://[账号]:[密码]@[IP]:[端口]/cam/realmonitor?channel=1&subtype=0
channel=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>
链接: 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
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>
缺点：此方法对网络依赖要求比较高，延迟高，容易卡顿
- 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"其中把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>
使用ffmpeg优缺点：
优点：谷歌火狐IE都可以用。
缺点： ffmpeg很强大，使用命令很灵活，很多细节问问需要琢磨，比如清晰度的问题，比如帧数的问题。
ffmpeg比h5stream和vlc使用上确实麻烦许多，而且清晰度不如以上两种，延迟相对也高一下。
需要建立相对完善的管理机制，因为全部使用命令，在客户页面关闭视频流时，后台还在不停的拉取视频流，造成极大的资源浪费。
不足与思考
- 不足
单个的视频播放，注定应用面相对狭窄，相当于只写了一半的功能，在很多引用场景单个摄像头是不能满足业务需求的，一般需要拉取多个视频流，这个就很需要好好的思考的。
多个摄像头，如果不在同一个局域网，那么拉取视频流占用较大的资源就无法避免 - 思考
如果在同一的局域网，使用本地的工具，比如电视墙功能，组播功能，在多个镜头信息直接完成一个视频流拉取多个摄像头信息
如果是不同的局域网，那么就需要使用ffmpeg的组播功能，vlc和h5stream的支持并不是很友好
视频流并不是24小时拉取，如果使用ffmpeg的话，在空闲时间并不能主动停止拉取，在WINDOWS下也很难精确的停止某个视频流的拉取进程，在linux下回相对好一些，可以shell脚本找到相对于的pid并KILL
web页面播放实时视频流相关推荐
- flash media server播放实时视频流
标签: 图2.连接到电脑的所有摄像头 注意:你可以使用多种摄像头甚至是数字视频录像机来捕获视频.正如FME支持文档中所阐述的那样:Flash Media Live Encoder被用来和微软遭人抱怨的 ...
- web页面播放语音提示保存成功
web页面播放语音提示保存成功 <!DOCTYPE html> <html><head><title>tishiyin.html</title&g ...
- QT5.15.2源码编译后在君正MIPS架构运行播放实时视频流
问题背景: 公司新项目需要使用君正T40 soc,平台是 MIPS 架构,但是君正在此平台未开发出图形界面工具,项目需要人机交互,于是需要使用QT实现相关需求. 问题描述: 下载QT5.15.2源码( ...
- WEB页面播放大华摄像头视频解决方案
目前在网页上播放大华摄像头视频,有如下2种途径: 1)首选获取摄像头的hls协议地址,H5可直接播放 2)获取摄像头rtsp协议地址,用ffmpeg转换成hls再播放 近期做的一个项目,需要在WEB端 ...
- 使用VLC转码，在HTML5页面播放实时监控
首先要获取摄像机品牌的RTSP地址: 如大华的是 rtsp://user:pwd@ip:port/cam/ realmonitor?channel=1&subtype=0 海康的是 rtsp: ...
- web页面播放优酷视频，播放html5视频，兼容ie7 vcastr22.swf播放
一:vcastr22.swf播放本地视频 1.下载vcastr22.swf 把播放插文件放到服务器文件夹. 2.代码如下 红色路径是你自己服务器的路径 可以用最简单的 文件夹/文件夹/文件夹/xx.M ...
- 清空本地_PyQt5播放实时视频流或本地视频文件
一.编辑UI 编辑UI如下图所示: 二.新建视频播放类Display 定义如下初始化函数 def __init__(self, ui, mainWnd):self.ui = uiself.mainWn ...
- H5页面播放M4a音频文件
业务场景: 手机app端录音,然后上传至后台服务器,前端从后台服务器获取录音,在PC端WEB页面播放. 实际问题: 首先app录音文件默认是m4a格式,而在PC端WEB H5页面,<audio& ...
- 轻松实现在web页面中直接播放rtsp视频流
轻松实现在web页面中直接播放rtsp视频流 写在前面 实现 介绍 如何使用 准备ffmpeg 运行rtsp2web 参数说明(在 `new RTSP2web` 时,可配置的参数如下): 前端代码 参 ...
- html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音. 这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在 ...
最新文章
- 一键生成表结构说明文档的参考，数据字典生成方式参考
- Hive--优化参数
- java导出mysql数据库失败_利用Java进行MySql数据库的导入和导出
- [系列][编译原理]正则表达式
- Intellj IDEA 注册码 2018
- SAP License：SAP 现金流量表实现方法谈
- web应用非法访问linux路径,Web安全对策研究.doc
- 《跟我一起做J2EE版Blog–jPress》6（Spring集成Struts2，打通第一个Action）
- java infinity 处理_Java：如何执行向-Infinity而不是0的整数除法？
- SpringBoot整合Mybatis详细教程
- 产品配件类目税目分类_商品和服务税收分类编码
- 【小插件】文字镂空“LSP”制作空心文字CAD
- 电子计算机与多谋种,2011—2012学年度第一学期七年级上册语文期末测试AB卷（2套）(含答案)...
- Execel 中文转拼音英文字母
- 迅雷9设置php,Win10系统如何取消迅雷9右侧多余窗口【图文教程】
- [导入]Swatch手表
- 美国国土安全部承认使用数据库追踪数百万手机用户
- 为什么我的联想打印机M7450F换完墨粉之后打印机显示请更换墨粉盒？这是我的墨盒第一次灌粉#183;、...
- 2012中国福布斯富豪榜
- 数字孪生扫除智慧城市“盲点”，赋能社会数字发展