使用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的特性改变文本选中时的颜色
Sep 11 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 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实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
详解Python with/as使用说明
2018/12/13 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
python 字符串格式化的示例
2020/09/21 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
洗车工岗位职责
2014/03/15 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
党员个人总结范文
2015/02/14 职场文书
自主招生自荐信范文
2015/03/04 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技