使用Html5 Stream开发实时监控系统


Posted in HTML / CSS onJune 02, 2020

这些天在尝试使用RTSP协议(Real Time Streaming Protocol,实时流传输协议)来完成实时传输和显示摄像头画面的功能,毕竟海康威视的web控件对高版本Chrome不予支持,如果使用这一套技术的话,后续的系统就难以优化升级。而RTSP协议在市面上已经有一些H5的解决方案了,是一种发展可期的方案。

H5Stream

在网上搜索web直播/摄像头直播等关键词找到了H5Stream,这是一个可以基于Native H5 Video标签实现直播的解决方案。当然它也支持其他的RTMP/HLS等。

发流服务通过RTSP地址从摄像头采集视频,在代码中可以通过配置文件进行配置。

使用Html5 Stream开发实时监控系统

配置好摄像头信息后,我们启动发流服务h5ss.bat,开始进行client端的调试。

在www目录下有一个demo.html,这是demo网页,打开该文件可以知道如何连接发流服务。

在Vue项目中应用H5Stream的方法如下:

(1)在static目录下新增这几个js(adapter.js,h5splayer.js,h5splayerhelper.js,platform.js),这些在demo中有提供。

(2)在index.html中引用这些js

使用Html5 Stream开发实时监控系统

(3)在vue页面调用API

createH5Video() {
    let conf1 = {
        videoid: 'divPlugin',
        protocol: this.$store.state.config.H5_STREAM_SERVER_PROTOCOL,
        host: this.$store.state.config.H5_STREAM_SERVER_HOST,
        rootpath: '/',
        token: 'token1',
        hlsver: 'v1',
        session: 'c1782caf-b670-42d8-ba90-2342340ee83'
    }
    this.v1 = H5sPlayerCreate(conf1)
    this.v1.connect()
},
closeH5Video() {
    if (this.v1) {
        this.v1.disconnect()
        this.v1 = null
        $(".h5video").get(0).pause()
    }
}

运行代码,可以实时地看到摄像头画面!(打了码,哈哈)

使用Html5 Stream开发实时监控系统

到此这篇关于使用Html5 Stream开发实时监控系统的文章就介绍到这了,更多相关Html5 Stream实时监控内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 #HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 #HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 #HTML / CSS
html5拖拽应用记录及注意点
May 27 #HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 #HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 #HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 #HTML / CSS
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
jquery中ajax学习笔记4
2011/10/16 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
在python中安装basemap的教程
2018/09/20 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
PyQt5 控件字体样式等设置的实现
2020/05/13 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
医疗专业毕业生求职信
2014/08/28 职场文书
公司会议开幕词
2016/03/03 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书