Vue项目步骤如下：

安装依赖

npm install ezuikit-js

main.js内引入

import EZUIKit from 'ezuikit-js';

页面使用

<template><div><div id="videoPlayr"></div></div>
</template><script>import EZUIKit from "ezuikit-js";
var player = null;
export default {data(){return{}},methods: {videoPlayer() {player = new EZUIKit.EZUIKitPlayer({autoplay: true,id: "videoPlayr",   // 播放控件的IDaccessToken: this.videoInfo.accessToken,   // 后端给的Tokenurl: this.videoInfo.parameter,         // 后端给的URLtemplate: "security", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；width: 1100,height: 563,});}
};
</script>

如果只需要预览则极简版、标准版都可以后端返回的url要以.hd.live结尾

如果需要预览回放功能二合一则需要切换安防版后端返回url如果以hd.live结尾则首先进入预览页面如果以local.rec结尾则首先进入回放页

控制步骤如下：

操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距

需要的参数可以参照文档文档已经放文章最上面

控制可能会有一些延迟

在每个按钮上添加mousedown和mouseup事件

// 拿向上按钮举例  鼠标按下越久 转动的也就越广~<div class="top_left kz" v-on:mousedown="kz('4')" v-on:mouseup="stop()"></div>// 监控控制 Vue的写在methods内//开始控制kz(param) {// 把控制参数存起来 方便暂停使用this.controlnum = param;// 控制所需参数this.controldata = {// 授权过程获取的access_tokenaccessToken: this.videoInfo.accessToken,// 设备序列号,存在英文字母的设备序列号，字母需为大写deviceSerial: this.deviceEqCode,// 通道号channelNo: "1",// 0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小direction: this.controlnum,// 云台速度：0-慢，1-适中，2-快，海康设备参数不可为0speed: "2",};$.ajax({url: "https://open.ys7.com/api/lapp/device/ptz/start",type: "post",data: this.controldata,success: function (result) {},});},// 暂停 stop() {this.controldata = {accessToken: this.videoInfo.accessToken,deviceSerial: this.deviceEqCode,channelNo: "1",direction: this.controlnum,speed: "2",};$.ajax({url: "https://open.ys7.com/api/lapp/device/ptz/stop",type: "post",data: this.controldata,success: function (result) {},});},

前端JS、Vue实现海康萤石直播预览、回放、云台控制功能相关推荐

浏览器显示海康摄像头实时预览画面纯前端解决方案
浏览器显示海康摄像头实时预览画面纯前端解决方案将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流,并将实时视频流通过 express 服务生成 http 长链接或 ws ...
uni-app 海康(HIKVISION)实时视频预览、录像回放、语音对讲
uni-app 海康(HIKVISION)实时视频预览.录像回放.语音对讲:https://ext.dcloud.net.cn/plugin?id=2403
前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件
前端江太公前端实现文档在线预览功能最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本.带参数文本.html文本.json文本.公 ...
前端js实现上传图片大于2M时压缩,预览
最近有个需求,用户在上传图片预览时,需要显示大小为2M以下,大于2M的需要压缩后上传,小于2M的原图显示一.先说下限制图片大小的好处直接上传特别占用带宽,上传速度慢,对程序考验以及影响用户的体验 ...
前端如何显示服务器摄像头,浏览器显示海康摄像头实时预览画面纯前端解决方案...
php 实时输出内容到浏览器 php 实时输出内容到浏览器当你在处理一个过程需要耗时很长,但你又需要适时的知道程序当前的处理状况的时候,该怎么办呢?下面就分享一下如何使用php及时的输出当前结果到浏 ...
firefly的RK3399AIOC开发板+海康工业相机抓图预览
显示效果如图开发平台:firefly家的RK3399AIOC开发板. 系统:Android9 显示:firefly自带的LVDS10寸屏 SDK:使用SDK_MVCamCtrl_Android_V1 ...
html 预览海康实时视频,海康视频实时预览插件
更新记录 1.0.1(2020-06-17) 对于没有云台的设备,新增了直接全屏播放的调用函数 1.0.0(2020-06-12) 修改插件采集的数据.发送的服务器地址.以及数据用途说明查看更多平 ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
vue接入海康萤石云npm包，开发视频模块
vue接入海康萤石云npm包,开发视频模块因为公司项目的需要,需要接入海康萤石云平台的npm包来开发公司的视频模块我们目前做的是公司的视频直播模块 ui设计采用的是公司的视频窗口ui 好了,我们 ...
java 前台播放视频_「纯js项目」海康视频项目,java后台+前台web显示的,望提供思路！...
纯js项目: 海康视频项目,java后台+前台web显示的,望提供思路! 如果只是实现BS架构,可以向海康要web开发包,直接使用浏览器通过ocx访问海康设备浏览视频,如果需要的功能不全,再使用JNI ...

前端JS、Vue实现海康萤石直播预览、回放、云台控制功能

Vue项目步骤如下：

控制步骤如下：

前端JS、Vue实现海康萤石直播预览、回放、云台控制功能相关推荐

最新文章

热门文章