使用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 相关文章推荐
利用css3制作3D样式按钮实现代码
Mar 18 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
python实现逆波兰计算表达式实例详解
2015/05/06 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
Python有序字典简单实现方法示例
2017/09/28 Python
python使用RNN实现文本分类
2018/05/24 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
高分子材料与工程专业个人求职信
2013/12/15 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
学习十八大的心得体会
2014/09/12 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
「月刊Action」2022年5月号封面公开
2022/03/21 日漫