使用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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
javascript强大的日期函数代码分享
2013/09/04 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
Node.js的特点详解
2017/02/03 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
javascript实现日历效果
2019/06/17 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python爬取天气数据的实例详解
2020/11/20 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
CAD制图人员的自荐信
2014/02/07 职场文书
店面出租协议书范本
2014/11/28 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
民事调解协议书
2016/03/21 职场文书
Python集合的基础操作
2021/11/01 Python
js不常见操作运算符总结
2021/11/20 Javascript