Vue集成海康websdk实现摄像头预览

  1. 选择以及下载相应的websdk:
    从海康开放平台下载相应的sdk,web3.0不支持高版本浏览器,web3.2需要摄像头支持摄像头取流,web3.3支持高版本浏览器
    在这里插入图片描述
    我这选择的是3.3的。
  2. 可以先测试下开发包是否可以成功访问,修改用ip、户名、密码。端口一般使用默认80,点击登录,然后选择相应已登录设备,通道列表,点击开始预览可以看到画面即可。
  3. 将web集成到Vue:
    我这只需显示摄像头画面,所以只用了一个web元素
    在这里插入图片描述
    引入jquery和webVideoCtrl.js(需要修改导出模块代码以及jsVideoPlugin-1.0.0.min.js导出模块代码)
    在这里插入图片描述
    从代码中抽取出一些变量:
    在这里插入图片描述
    将官方demo中demo.js的自己需要的代码复制过来
    主要是初始化,登录,预览,退出预览等。官方退出之后没法重新登录预览,这个得修改下。并且,官方demo没有提供销毁插件画面的函数(不过可以自己在jsVideoPlugin-1.0.0.min.js里面找到)
m_pluginOBJECT.JS_DestroyPlugin();
/** 关闭播放插件 */this.I_StopWnd= function(){if(m_pluginOBJECT ){m_pluginOBJECT.JS_HideWnd();m_pluginOBJECT.JS_DestroyPlugin();}};

在vue中调用这个方法即可

// 销毁插件destory() {WebVideoCtrl.I_StopWnd();},

其它的就是需要啥就自己添加了,demo.js将基本功能都封装成函数了

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

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

相关文章

android开发布局知识

插件开发的视频笔记:

算法进阶指南图论 通信线路

通信线路 思路:我们考虑需要升级的那条电缆的花费,若其花费为 w ,那么从 1 到 n 的路径上,至多存在 k 条路径的价值大于 w ,这具有一定的单调性,当花费 w 越大,我们路径上价值大于 w 的花费会越…

读者自荐的 4 个 GitHub 项目

本期推荐的 4 个开源项目,为读者在开源项目 Awesome-GitHub-Repo 的评论区自推的, 如果你开源了不错的项目,想让大家看到,也可以去 Awesome-GitHub-Repo 进行投稿。 本期推荐开源项目目录: 1. DB-GPT 2. 定制中国传统节日头像 3. …

Java / Android 多线程和 synchroized 锁

s AsyncTask 在Android R中标注了废弃 synchronized 同步 Thread: thread.start() public synchronized void start() {/*** This method is not invoked for the main method thread or "system"* group threads created/set up by the VM. Any new functionali…

超全大厂UI库分享,可免费套用!

今天我们要给大家分享的是TDesign、Arco Design、Ant Design、Material design等6个优秀的大厂UI库,一次性打包送给大家,通通免费用。大厂UI库都是经过无数次的事件检验的,扛住了许多种使用场景和突发情况的组件资源库,是前人的经…

HarmonyOS NEXT 调优工具 Smart Perf Host 高效使用指南

在软件开发的过程中,很多开发者都经常会遇到一些性能问题,比如应用启动慢、点击滑动卡顿、应用后台被杀等,想要解决这些问题势必需要收集大量系统数据。而在收集数据的过程中,开发者则需要在各种工具和命令之间来回切换&#xff0…

k8s 部署mqtt —— 筑梦之路

mqtt是干嘛的,网上有很多资料,这里就不再赘述。 --- apiVersion: apps/v1 kind: Deployment metadata:labels:app: mqttname: mqttnamespace: default spec:replicas: 1selector:matchLabels:app: mqttstrategy:rollingUpdate:maxSurge: 25%maxUnavaila…

华为认证 | 11月底这门HCIP认证即将发布!

非常荣幸地通知您,华为认证HCIP-Storage V5.5(中文版)预计将于2023年11月30日正式对外发布。为了帮助您做好学习、培训和考试计划,现进行预发布通知,请您关注。 01 发布概述 基于“平台生态”战略,围绕“云…

Django快速入门(一)

Django三板斧 1. 基本使用 三板斧: HttpResponse,render,redirect from django.shortcuts import HttpResponse,render,redirect# 一. 返回字符串类型的数据 return HttpResponse(字符串) # 二. 返回HTML文件 # 1. 动态HTML页面: return render(request,login.html) def ab…

西门子S7-1200PLC混合通信编程(ModbusTcp和UDP通信)

S7-1200PLC的MODBUS-TCP通信 西门子PLC ModbusTcp通信访问网关后从站(SCL语言轮询状态机)-CSDN博客文章浏览阅读305次。西门子PLC的ModbusTcp通信在专栏已有很多文章介绍,所不同的是每个项目的通信需求都略有不同,今天我们以访问网关后的三个从站数据来举例,给出轮询的推荐…

iOS 16.4 之后真机与模拟器无法使用Safari调试H5页面问题

背景 iOS 16.4之后用真机调试H5时候发现,Safari中开发模块下面无法调试页面 解决方案 在WKWebView中设置以下代码解决 if (available(iOS 16.4, *)) {[_webView setInspectable:YES];}然后再次调试就可以了

[git] cherry pick 将某个分支的某次提交应用到当前分支

功能:将某个分支的某次提交应用到当前分支 应用场景: 在合并分支时,是将源分支的所有内容都合并到目标分支上,有的时候我们可能只需要合并源分支的某次或某几次的提交,这个时候我们就需要使用到git的cherry-pick操作…

边缘计算多角色智能计量插座:用电监测和资产管理的未来智能化引擎

目前主流的智能插座涵盖了红外遥控(控制空调和电视等带有红外标准的电器),配备着测温、测湿等仓库应用场景,配备了人体红外或者毫米波雷达作为联动控制,但是大家有没有思考一个问题,就是随着对接的深入&…

易点易动固定资产管理系统:实现全生命周期闭环式管理和快速盘点

固定资产管理对于企业来说至关重要,它涉及到资产的采购、领用、使用、维护和报废等各个环节。然而,传统的固定资产管理方式往往繁琐、耗时,容易导致信息不准确和资源浪费。为了解决这些问题,我们引入易点易动固定资产管理系统&…

DevOps简介

DevOps简介 1、DevOps的起源2、什么是DevOps3、DevOps的发展现状4、DevOps与虚拟化、容器 1、DevOps的起源 上个世纪40年代,世界上第一台计算机诞生。计算机离不开程序(Program)驱动,而负责编写程序的人,被称为程序员&…

Kotlin基础数据类型和运算符

原文链接 Kotlin Types and Operators Kotlin是新一代的基于JVM的静态多范式编程语言,功能强大,语法简洁,前面已经做过Kotlin的基本的介绍,今天就来深入的学习一下它的数据类型和运算操作符。 数据类型 与大部分语言不同的是&am…

socket编程中的EINTR是什么?

socket编程中的EINTR是什么? 在socket编程中&#xff0c;我们时常在accept/read/write等接口调用的异常处理的部分看到对于EINTR的处理&#xff0c;例如下面这样的语句&#xff1a; repeat: if(read(fd, buff, size) < 0) {if(errno EINTR)goto repeat;elseprintf("…

三菱FX3U系列-定位指令

目录 一、简介 二、指令形式 1、相对定位[DRVI、DDRVI] 2、绝对定位[DRVA、DDRVA] 三、总结 一、简介 定位指令用于控制伺服电机或步进电机的位置移动。可以通过改变脉冲频率和脉冲数量来控制电机的移动速度和移动距离&#xff0c;同时还可以指定移动的方向。 二、指令形…

Linux下的环境变量【详解】

Linux下的环境变量 一&#xff0c;环境变量的概念1 概述2 环境变量的分类3 常见的环境变量4 查看环境变量4.1 shell变量4.2 查看环境变量 5 添加和删除环境变量5.1 添加环境变量5.2 删除环境变量 6. 通过代码如何获取环境变量6.1 命令行的第三个参数6.2 通过第三方变量environ获…

Linux 的热插拔机制通过 Udev(用户空间设备)实现、守护进程

一、Udev作用概述 udev机制简介udev工作流程图 二、Linux的热拔插UDEV机制 三、守护进程 守护进程概念守护进程在后台运行基本特点 四、守护进程和后台进程的区别 一、Udev作用概述 udev机制简介 Udev&#xff08;用户空间设备&#xff09;是一个 Linux 系统中用于动态管…