使用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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
Js切换功能的简单方法
2010/11/23 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
回调函数的意义以及python实现实例
2017/06/20 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
一道python走迷宫算法题
2018/01/22 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python简单的三元一次方程求解实例
2020/04/02 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
我的祖国演讲稿
2014/05/04 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang