使用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百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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 SEO优化之URL优化方法
2011/04/21 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
快速入门python学习笔记
2017/12/06 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
python pandas模块基础学习详解
2019/07/03 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
民生工程实施方案
2014/03/22 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
个人德育工作总结
2015/03/05 职场文书
校运会广播稿
2015/08/19 职场文书
学习经验交流会总结
2015/11/02 职场文书
新手初学Java网络编程
2021/07/07 Java/Android