uniapp 引入海康H5player实现视频监控的播放

news2024/9/22 11:42:53

uniapp直接调用海康H5player方法,只能在web浏览器页面正常播放,实机运行会因为找不到文件的相对路径而报错无法播放。因此需要通过web-viewiframe引入html的方式来实现实时视频监控的播放。具体步骤如下:

1、首先将海康h5player的相关文件,引入到static文件夹下,文件相对位置保持一致;

2、在H5player文件夹下新建html页面webplayer.html;

        (1)页面元素代码

        <div id="h5player" class="myplayer"></div>

        (2)页面样式代码

        <style type="text/css">
            html,
            body {
                width: 100%;
                height: 100%;
                margin: auto;
                overflow: hidden;
                background-color: #000000;
                -webkit-user-select: none;
                user-select: none;
            }

            .myplayer {
                width: 100%;
                height: 100%;
            }
        </style>

       * 此页面用来进行海康方法的调用和视频监控的播放。

       * 将页面与h5player.min.js放在同一路径下,防止实机运行出现路径错误的问题。

3、在webplayer.html页面引入h5player.min.js,并进行监控视频初始化配置;

 

 4、通过webview或iframe的形式将页面嵌入到需要进行监控视频展示的页面;

5、将接口请求到的视频流地址通过url拼接的方式传给webplayer.html页面;

 6、在webplayer.html页面通过解析url路径地址的方法获取视频播放流地址,并调用海康api的视频播放方法。

 

 7、实机运行,视频播放成功;(抓拍、摄像头移动等方法直接写在webplayer.html页面进行调用)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/909070.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

服装定制小程序的秘诀

随着互联网的快速发展&#xff0c;越来越多的企业开始关注互联网商业模式的创新。其中&#xff0c;定制化服务成为了各行各业的关注焦点之一。尤其是在服装行业&#xff0c;定制化服装已经成为许多消费者的追求。而面对这一市场需求&#xff0c;如何创造成功的互联网新商业模式…

https非对称加密算法

非对称加密算法原理 在客户端公开公钥&#xff0c;服务端保存私钥 1.客户端第一次请求先请求443端口&#xff0c;从443端口下载公钥。 2.客户端将数据进行公钥算法进行加密&#xff0c;将秘文发送到服务端 服务端收到秘文后&#xff0c;通过私钥算法进行解密得到明文数据。…

【STM32】开发方式:寄存器、CMSIS、SPL、HAL、LL、RTOS

阅读本专栏其他文章&#xff0c;有助于理解本文。 文章目录 一、开发库选择1.1 概述1.2 CMSIS库1.3 SPL库1.4 HAL 库1.5 LL库1.6 寄存器开发 二、代码对比2.1 使用寄存器2.2 使用CMSIS库2.3 使用SPL库2.4 使用HAL库2.5 使用LL库2.6 使用RTOS 三、软件配置 一、开发库选择 1.1 …

【linux】使用rpm下载mysql

1/ 2/ 3/ 4/ 5/ 6/ 7/ 8/ 9/ 10/ 11/ 12/ 13/

JDBC回顾

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 JDBC回顾 前言一、JDBC1.JDBC是什么&#xff1f;2.如何使用&#xff1f;&#xff08;1&#xff09;注册驱动&#xff08;2&#xff09;获取连接&#xff08;3&#xff09;操作…

二叉树题目:二叉树的层序遍历

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树的层序遍历 出处&#xff1a;102. 二叉树的层序遍历 难度 4 级 题目描述 要求 给你二叉树的根结点 root \texttt{root} root&#xff0c;返…

c++ day1

作业: 1&#xff0e;整理思维导图 2.定义一个命名空间Myspace&#xff0c;包含以下函数:将一个字符串中的所有单词进行反转&#xff0c;并输出反转后的结果。例如&#xff0c;输入字符串 为"Hello World"&#xff0c;输出结果为"olleH dlroW"&#xff0c;并…

python:pyqt5 + cef 模仿 mdict 界面

PyQt5 安装参见&#xff1a;python&#xff1a;PyQt5 简单示例 cefpython 入门 参考: Python GUI: cefpython3的简单分析和应用 pip install cefpython3 cefpython3-66.1-py2.py3-none-win_amd64.whl (69.0 MB) Successfully installed cefpython3-66.1 cd \Python37\Lib\si…

prometheus blackbox_exporter安装

目录 一、准备工作1.1 安装或关闭以下服务1.2 本次安装环境 二、安装blackbox_exporter2.1 下载并解压2.2配置2.3测试 三、配置blackbox_exporter3.1配置blackbox.yml3.2 开启blackbox_exporter3.3配置prometheus.yml 四、其他4.1server returned HTTP status 400 Bad Request …

Docker 存储驱动解析:选择最适合你的存储方案

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

分类预测 | MATLAB实现NGO-DBN北方苍鹰优化深度置信网络多特征输入分类预测

分类预测 | MATLAB实现NGO-DBN北方苍鹰优化深度置信网络多特征输入分类预测 目录 分类预测 | MATLAB实现NGO-DBN北方苍鹰优化深度置信网络多特征输入分类预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 MATLAB实现NGO-DBN北方苍鹰优化深度置信网络多特征输入…

【QT】重写QAbstractLIstModel,使用ListView来显示多列数据

qt提供了几个视图来进行信息的列表显示&#xff0c;QListView可以用来显示继承QStractListModel的字符串列表中的字符串&#xff0c;默认的模型里面只包含一列的内容&#xff1a; 这里以qml为例子&#xff0c;先新建一个qml的项目&#xff0c;示例代码如下&#xff1a; 先创建一…

查看所有数据库各表容量大小

查看所有数据库各表容量大小 1. 查看所有数据库各表容量大小2.查看指定数据库容量大小3. 查看所有数据库容量大小 1. 查看所有数据库各表容量大小 select table_schema as 数据库, table_name as 表名, table_rows as 记录数, truncate(data_length/1024/1024, 2) as 数据容量…

Redis 持久化的手段有哪些 ?RDB 和 AOF 有什么区别 ?

目录 1. Redis 持久化的手段有哪些 2. RDB 和 AOF 有什么区别 2.1 RDB 持久化 2.2 AOF 持久化 2.2.1 AOF 持久化策略有哪些 3. 混合持久化是如何执行的&#xff08;了解&#xff09; 1. Redis 持久化的手段有哪些 Redis 持久化的手段有三种&#xff1a; 快照方式&#…

模型预测笔记(二):结合SMOTE来进行数据不均衡处理实操

文章目录 数据不均衡危害如何解决SMOTE原理代码效果 数据不均衡危害 在模型预测中&#xff0c;数据不均衡是指不同类别的样本数量差异很大。这种情况可能会对模型的性能和结果产生一些危害&#xff1a; 偏斜的预测结果&#xff1a;由于某些类别的样本数量较少&#xff0c;模型…

Rides分布式缓存

分布式缓存 -- 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; 1.Redis持久化 Redis有两种持久化方案&#xff1a; RDB持久化 AOF持久化 1.1.RDB持久化 RDB全称Redis Database Backup file&#xff08;Redis数据备份文件&#xff09;&#x…

从Web 2.0到Web 3.0,互联网有哪些变革?

文章目录 Web 2.0时代&#xff1a;用户参与和社交互动Web 3.0时代&#xff1a;语义化和智能化影响和展望 &#x1f389;欢迎来到Java学习路线专栏~从Web 2.0到Web 3.0&#xff0c;互联网有哪些变革&#xff1f; ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#x…

Docker容器与虚拟化技术:容器运行时说明与比较

目录 一、理论 1.容器运行时 2.容器运行时接口 3.容器运行时层级 4.容器运行时比较 5.强隔离容器 二、问题 1.K8S为何难以实现真正的多租户 三、总结 一、理论 1.容器运行时 &#xff08;1&#xff09;概念 Container Runtime 是运行于 k8s 集群每个节点中&#xff…

基于51单片机的八路抢答器Protues仿真设计

目录 一、设计背景 二、实现功能 三、仿真演示 四、源程序&#xff08;部分&#xff09; 一、设计背景 近年来随着科技的飞速发展&#xff0c;单片机的应用正在不断的走向深入。本文阐述了基于51单片机的八路抢答器设计。本设计中&#xff0c;51单片机充当了核心控制器的角…

HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D旋转相册+音乐(附源码)(三)

一. 前言 七夕马上就要到了&#xff0c;为了帮助大家高效表白&#xff0c;下面再给大家加几款实用的HTML浪漫表白代码(附源码)背景音乐&#xff0c;可用于520&#xff0c;情人节&#xff0c;生日&#xff0c;求爱表白等场景&#xff0c;可直接使用。 来吧&#xff0c;展示&am…