前端使用二开Thingsboard一、二、三事(七)-集成海康威视h5player(上)

最新推荐文章于 2024-07-17 22:24:27 发布
最新推荐文章于 2024-07-17 22:24:27 发布
阅读量88 收藏
点赞数
分类专栏： thingsboard、物联网、IOT 文章标签： 前端 音视频 angular iot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43163457/article/details/135622700
版权

在这里插入图片描述

前端使用二开Thingsboard一、二、三事(七)-集成海康威视h5player(上)

angular集成海康威视H5player

本章介绍Thingsboard中集成海康威视h5player实现物联网平台取流播放视频，因Thingsboard前端使用的是angular框架开发的，集成海康h5player与Thingsboard关系不大，主要介绍的是如何在angular中集成海康h5player来实现视频播放。

一.web集成H5播放器说明

1.1海康威视集成方案

在这里插入图片描述上图中是海康官网提供的四种三方集成海康视频的方案，四种方案中web插件和H5播放器可以在web中集成开发使用，对于这两种方案官方都提供了demo供开发者们参考调用使用，也提供可开发文档，有不清楚的可直接在文档中查看，需要说明的是想在自己项目中集成这两个放的前提条件是demo必须调通。
在这里插入图片描述
在海康官网中找到支持与服务之后点击工具下载便可以直接进入工具下载页面，第一个插件demo，第二个是H5player demo，如何运行dem

了解本专栏 订阅专栏 解锁全文 超级会员免费看
weixin_43163457
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
海康威视H5播放器开发指南，兼容各种主流浏览器
07-23
海康威视H5播放器开发指南，兼容各种主流浏览器，chrome,IE,火狐。
物联网云平台工业设备对接远程控制数据采集视频接入开源
TGHyoJb的博客
03-09 1820
物联网云平台是当今互联网技术的重要应用之一，它为工业设备的远程控制、数据采集和视频接入提供了一种高效、便捷的解决方案。该平台的开源性和可二次开发性，为用户提供了更大的灵活性和可定制性，使其能够满足不同用户的需求。比如，在工业领域，它可以实现对工业设备的远程监控和控制；物联网云平台是当代科技发展的重要成果之一，它为工业设备的远程控制、数据采集和视频接入提供了一种高效、便捷的解决方案。1、内含物联网云平台全套源码（源码全部开放，无任何加密，可二次开发）、MQTT服务、数据库设计、相关资料、相关工具软件等；
ThingsBoard前端Vue版本开源啦！！！！
国家专精特新小巨人、资深消防行业企业、国家高新技术企业、智慧消防技术实验室、准独角兽企业、浙江省电流AI技术研发中心
06-12 1427
ThingsVue 是一个免费开源的中后台模版，是ThingsBoard开源物联平台的前端版本。使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 ​
海康威视h5player.js 2.0版demo压缩包
01-19
总的来说，海康威视h5player.js 2.0版demo压缩包是一个全面的开发资源，旨在帮助前端开发者快速集成并定制自己的视频播放解决方案。通过学习和实践，开发者可以充分利用这个强大的工具，提升视频播放体验。
海康威视h5player.js 2.0版 跨域隔离
01-19
海康威视h5player.js 2.0版 跨域隔离解决方案 海康威视h5player.js 2.0版为提升解码性能，采用了多线程解码技术，使用SharedArrayBuffer来完成多线程之间的数据交互。然而，SharedArrayBuffer等高级功能可被攻击者...
海康威视的H5playerV2.0.0开发指南_20210805145842_20210918155600.pdf
12-14
海康威视的H5player V2.0.0是一个基于HTML5技术的网络视频播放器，它利用websocket协议从媒体服务获取音视频流进行播放，无需用户安装任何浏览器插件。这个播放器支持多种格式的音视频内容，并且特别强调了在不同...
萤石H5(4MP)用户指南，海康威视萤石H5摄像头使用说明书，安装教程
12-03
本文档提供了海康威视萤石H5摄像头的用户指南，涵盖了产品的外观介绍、安装教程、使用说明、FAQ等内容。用户可以通过本文档了解萤石H5摄像头的使用方法、安装步骤、日常维护和保养等信息。 一、外观介绍 萤石H5...
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1110
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 668
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 197
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 149
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
ReactRouter v6升级的步骤
feixin369的博客
07-14 357
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
【零基础】学JS之APIS第三天
大学生小郑的博客
07-12 1709
【零基础】学JS之APIS第三天
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 786
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
前端工具-json-server
zhangankang的博客
07-14 153
以项目为例，介绍前端mock数据的方式；
＜Rust＞＜GUI＞rust语言GUI库tauri体验：前、后端结合创建一个窗口并修改其样式
用沸腾的热血，支付我们的人生吧！
07-16 908
前言 本文是rust语言下的GUI库：tauri来创建一个窗口的简单演示，主要说明一下，使用tauri这个库如何创建GUI以及如何添加部件、如何编写逻辑、如何修改风格等，所以，这也是一个专栏，将包括tauri库的多个方面。 环境配置 系统：windows 平台：visual studio code 语言：rust、javascript、html、css 库：tauri概述 本文是tauri库系列博文的第一篇，主要是简单实现一个窗口程序并成功运行，当然，这是基于官方的示例，事实上官方给出的上手例程非常详细，不
前端最基础的面试题
qq_61132537的博客
07-13 553
3.简写方法：window.onload没有简写的方法，$(document).ready(function(){})可以简写为$(function(){})1.执行时间上的区别：window.onload必须等到页面内,$(document).ready(function(){})是DOM结构加载完毕后就会执行。区别:(1).箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
基于 Web 的家校联系系统的设计与实现
最新发布
weixin_45506061的博客
07-17 591
本论文主要探讨了基于 Web 的家校联系系统的设计与实现。通过需求分析、总体设计、详细设计与实现等环节，详细介绍了如何使用 Servlet、JDBC、JSP 和 MySQL 等技术栈来构建一个安全、高效、便捷的家校联系平台。最后，对课程学习体会进行了总结，并列出了参考文献。关键词：家校联系系统；Servlet；JDBC；JSP；MySQL一、绪论（一）研究背景家校联系作为教育不可或缺的一环，对于学生的全面发展和教育质量的提升有重大意义。
java Web学习笔记（三）
qq_62678419的博客
07-12 1060
java 前端工程框架 vue3 包括以下依赖的学习 vite npm router axios
react集成海康威视h5player
08-03
要将海康威视H5Player集成到React中，可以按照以下步骤进行: 1. 首先，确保项目中已经安装了React，并创建一个新的React组件。 2. 在组件的构造函数中，引入H5Player的依赖。可以通过在`index.html`中引入H5Player的js和css文件，或者使用npm安装H5Player的包。 3. 在React组件的render方法中，创建一个DOM元素作为H5Player的容器。可以使用`<div>`标签并设置一个唯一的ID作为容器的标识。 4. 在组件的生命周期方法（如componentDidMount）中，实例化H5Player并将容器传递给它。这可以通过调用海康威视提供的初始化方法来完成，该方法接受一个参数为容器的选择器。 5. 确保在组件将被销毁时，调用H5Player的销毁方法以释放资源。这可以在组件的生命周期方法componentWillUnmount中完成。 这样，海康威视H5Player就可以被成功集成到React中。可以通过其他React组件的方式来控制H5Player的播放、暂停、音量控制等操作，从而实现更加丰富的交互体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值