vue中使用海康插件实现视频监控-前端给视频画面中添加文字

基于本人前面写的有关海康插件的博客，要实现这步效果不难。在你的开发demo里面找到添加字符串的方法。

添加的文字的条件是要你能播放出来的前提下：

通过视频播放是否成功的后推送过来的消息来判断视频播放的状态：

// 推送消息cbIntegrationCallBack(oData) {// console.log(oData);console.log(JSON.parse(oData.responseMsg.msg).result);//成功后添加字符串if (JSON.parse(oData.responseMsg.msg).result == 768) {this.djString(this.singleItem);//调用这个方法}}//叠加字符串  传进来你要渲染的数据的值valdjString(val) {console.log(val);// var Color = 65536 * ColorB + 256 * ColorG + ColorR;//文字颜色是rgb格式算出来的。this.oWebControl.JS_RequestInterface({funcName: "drawOSD",argument: JSON.stringify({text: val.projAbbreviation + " " + val.nodeName,x: 55,//距离原点的x距离y: 60,//距离原点的y距离// color: 0,wndId: 0//渲染的窗口})}).then(function(oData) {});},

注意：有一个问题,就是插件1.3.0版本我们不能改变这里面文字的大小。只有视频插件里面默认的大小

vue中使用海康插件实现视频监控-前端给视频画面中添加文字相关推荐

vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
在vue中使用海康插件实现视频实时监控(海康插件)
在vue中使用海康插件实现视频实时监控(海康插件) 首先下载并安装海康插件 webcontrol.exe 然后直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些 ...
在vue中使用海康插件实现视频监控视频直播方法二(RTMP流加Flash加swf)
在vue中使用海康威视实现视频监控,视频直播方法二(RTMP流加Flash加swf) 第一步用npm装这个几个包 "video.js": "^6.6.0",& ...
Vue项目中使用海康安全生产平台播放监控视频
最近一直在做有关海康监控视频的项目,闲下来写下这篇文章,加深一下印象,同时也和大家交流一下经验,以便更好提升自己.废话不多说,开始正题.... 首先把海康插件引进到项目中来然后在index.html ...
vue中使用海康实时监控详细代码
第一步:下载海康的js包,并在html中引入: 第二步:在相应的页面中开始编写,具体代码如下: <template><el-container><el-aside wid ...
在angular项目中集成海康视频web插件 V1.4.1
在近期的angular项目中,需要跟海康iSecure Center平台对接,实现监控点视频的实时和录像播放功能. 对接过程并不顺畅. 本来已经通过视频流转http-flv协议,利用flvjs实现了基 ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
vue webRTC播放海康摄像头实时画面延迟1s内
最终效果主要参考地址,:https://blog.csdn.net/qq_45777115/article/details/118054927?spm=1001.2014.3001.5502 htt ...
如何在LabVIEW中进行海康机器视觉算法平台VisionMaster二次开发
目录 1.导言庞大的NI LabVIEW软件平台 LabVIEW 平台的特点海康机器人的视觉算法平台VisionMaster特点如何在LabVIEW中进行海康视觉算法平台二次开发 2.方法与步骤 ...

vue中使用海康插件实现视频监控-前端给视频画面中添加文字

vue中使用海康插件实现视频监控-前端给视频画面中添加文字

vue中使用海康插件实现视频监控-前端给视频画面中添加文字相关推荐

最新文章

热门文章