uniApp中开发App引入海康h5player实现监控的播放

已于 2024-02-28 16:40:09 修改
阅读量1.6k 收藏 13
点赞数 13
文章标签： 前端 uni-app vue.js
于 2023-12-21 08:48:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76742166/article/details/135078568
版权
本文介绍了如何在uniApp中开发App并引入海康的H5player，实现在App内查看监控的功能。详细阐述了配置步骤，包括使用renderjs，后端返回的ws视频流和监控ID，以及运行状态的显示。开发者需要将开发包放入项目静态目录，创建视图层元素，定义相关数据，并通过renderjs与逻辑层交互，加载和显示ws视频流。
摘要由CSDN通过智能技术生成

概述

如果只想在h5而不是App(App会报错)中引入海康监控比较简单，可以直接使用uniApp的插件市场直接进行插入使用，地址如下海康视频H5播放器组件 - DCloud 插件市场海康视频H5播放器组件，视频预览、分屏设置、录像回放和语音对讲等功能封装icon-default.png?t=N7T8https://ext.dcloud.net.cn/plugin?id=15428如果想要实现App进行查看，就比较麻烦了，需要使用到

1.renderjs,不了解的可以去看看官网 renderjs | uni-app官网，或者掘金的这位大哥写的(uniapp中使用renderjs的一些细节 - 掘金)

2.后端返回的ws视频流与id

3.运行效果加载状态与运行显示

配置步骤

1.下载开发包放置项目static目录下,创建一个lib文件夹，(开发包可以直接把上面插件市场中的

最低0.47元/天 解锁文章
Strive-x
关注
  • 13
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
在uniapp中使用海康H5player过程，以及各种踩坑警告
第⑦个前端
10-14 5143
uniapp使用一套代码即可实现多端发布，这个是我们程序员的福音，希望uniapp越来越好吧 废话不多说，来干货！ 1 uniapp结合海康H5player，推荐使用web-view引入html的方式； 2 关于文件引入； 将海康H5player相关文件，引入到该文件夹下，文件相对位置保持一致； 3 vue界面书写； webview-styles为样式，通过数据引入 src为html的文件地址 我们通过url地址的形式传递后端视频流地址数据。 4 html文件书写 首先要引入webview.js，.
海康h5player2.1.3监控播放插件
05-31
支持websocket流
【Uni-app 引入海康h5player并接入ws视频流】
小猪佩奇
06-24 2682
采用uni-app中的renderjs 引入海康H5 SDK后端接入海康综合安防平台的开放API获取预览流海康H5 SDK。
2024年vue项目接入海康威视H5player(2)，五面拿下阿里飞猪offer
2301_76278747的博客
05-11 367
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
uni.app对接海康视频播放、回放，以及注意点
m0_67790636的博客
01-26 2366
给大家避个坑，这种格式会使你输入的时间与它转换完的时间有差别，举例：你选择的是"2023-01-26 12:36:33" 但是你用这种格式的话，他就会输出2023-01-26T04:36:33Z,字面上看就是会比你选择的时间少8个小时，那是因为在JavaScript中，日期对象的toJSON()方法会将日期对象转换为ISO 860 1格式的字符串。在转换过程中，会将日期对象 的时间调整为UTC时间。如果太长，会使我们那个html文件成为一个文本，也就是说你看到的不是一个页面，而是你写在编译器里的代码。
uniapp使用海康h5player并接入hls、ws、rtsp视频流
q866725的博客
09-07 3784
script.src = 'static/lib/h5player.min.js' //h5player.min.js 相对路径。szBasePath: "static/lib", // 必填,引用H5player.min.js的js相对路径。szId: "play_window", //需要英文字母开头 必填。3.html中编写dom元素时候需使用render.js传参方式将数据从逻辑层传到视图层。playURL: playUrl,//监控地址。采用uniap中的render.js 引入海康sdk。
uni-app引入海康威视h5player实现视频监控的播放
热门推荐
Serena_tz的博客
12-02 1万+
因为web-view组件默认就是占据整个视口的高宽，所以我们需要设置web-view的宽高，调整位置。将demo中bin文件夹下的文件原封不动复制到h5player文件夹中，txt文件可以删除。在uni-app应用内，pages页面中需要用到视频播放的页面，创建web-view组件。在uni-app项目中static文件夹下创建文件目录，我命名为h5player。在webplayer.html文件中，新增样式，宽高根据自己的需求调整。web-view组件的src需要动态改变，所以存储在data数据里。
unniapp通过iframe引入海康H5player实现视频监控的播放
记录
12-29 1157
我是把demo的文件直接放到staic文件直接用他的demo.html，也能用bin文件自己创建html文件引入h5player.min.js文件 根据自己的需求。3.在staic-h5player-demo.html。1.首先引入H5player。2.在需要用的页面直接。
uni-app 对接海康监控H5palyer
weixin_50536607的博客
05-16 4837
最近新入手一个项目，其中一个需求是需要对接海康威视监控的H5palyer。参考了一些文章最后决定采用web-view引入html的方式进行开发，这里记录一下开发过程中踩的坑以及解决办法。以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
uniapp中使用海康h5player实现实时视频和录像回放功能
奋斗的小猪
02-07 1980
uniapp和海康h5player实现小程序实时视频和录像回放功能。
海康视频H5player播放简单demo
02-27
海康视频H5player是一款专为在线视频播放设计的JavaScript库，它允许开发者在网页上实现流畅、功能丰富的视频播放体验。这个“海康视频H5player播放简单demo”是针对该库的一个基础示例，旨在帮助开发者快速理解和...
海康平台h5播放插件。
04-06
在海康平台的H5播放插件中，WebSocket被用来实现实时视频流的传输，确保用户能够流畅地观看监控画面，这对于安全监控、远程操作等应用场景尤为重要。 在提供的文件中，“H5playerV2.0.0开发指南.pdf”很可能是详细...
h5player.rar
08-20
总结来说，"h5player.rar"项目展示了如何利用HTML5、WebSocket、MediaSource Extensions和FFmpeg来构建一个实时视频流播放系统。这个系统充分利用了现代Web技术的优势，提供了高效、实时的视频播放体验。通过对相关...
H5播放器播放海康摄像头视频开发包和demo
01-20
在这个开发包中，开发者可以找到实现H5播放器与海康摄像头视频流对接所需的技术文档和代码示例。 “使用说明.txt”和“适用版本说明.txt”是重要的参考资料。前者会详细解释如何使用这个开发包，包括配置、调用API...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 804
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 994
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 589
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 276
【代码】TS如何处理js模块的类型？
vue 海康h5player
11-04
Vue 海康 H5Player 是一种基于 Vue 框架的海康威视播放器组件。海康威视是中国领先的视频监控解决方案提供商，他们的 H5Player 是一种用于在浏览器中播放海康威视摄像头视频的技术。 Vue 是一种用于构建用户界面的 JavaScript 框架，它提供了一套易于使用的工具和功能，帮助开发者快速构建动态、交互性的前端应用程序。Vue 框架使用了虚拟 DOM 和单向数据流的概念，简化了前端开发的复杂性。 海康 H5Player 结合了海康威视的视频监控技术和 Vue 框架的优势，提供了一个易于集成和使用的播放器组件。使用 Vue 框架的优势是可以将播放器组件与其他 Vue 组件进行混合使用，实现更灵活的界面设计和功能扩展。 在使用 Vue 海康 H5Player 进行视频播放时，可以通过传递参数来设置需要播放的视频流地址、窗口布局、控制条样式等。播放器组件还提供了丰富的事件和方法，可以实现视频的控制、抓图、录像等功能。 总之，Vue 海康 H5Player 是一种方便易用的海康威视摄像头视频播放器组件，结合了 Vue 框架的优势，为开发者提供了快速集成和定制的解决方案。无论是在安防行业还是其他需要视频监控的领域中，Vue 海康 H5Player 都是一个强大的工具。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值