如果有帮助到你的话，能点个赞再走嘛，让我知道我写的东西有人看就好啦~O(∩_∩)O
最近因公司业务需要，要在vue项目里呈现某现场的实时视频，用的是海康威视的网络摄像头，可以通过ip、port、用户名、密码登陆摄像头，我在网上找到一个web控件开发包，在此基础上进行开发，实现了项目需要。
引入jquery
npm下载
npm install jquery --save
配置文件
const webpack = require('webpack')
plugins:[
new webpack.ProvidePlugin({
$: 'jquery',
jQuery:'jquery'
})
],
在组件中引入
import $ from 'jquery'
安装海康web插件，可以去官网下载
在index.html引入js文件
文件开发包里都有。
<script src="./static/hkws/jquery-1.12.4.min.js"></script>
<script src="./static/hkws/jsencrypt.min.js"></script>
<script src="./static/hkws/jsWebControl-1.0.0.min.js"></script>
代码实现
<template>
<div>
<div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
<div id="operate" class="operate">
<div class="module">
<div class="item"><span class="label">appkey:</span><input id="appkey" type="text" value=""></div>
<div class="item"><span class="label">secret:</span><input id="secret" type="text" value=""></div>
<div class="item"><span class="label">平台IP地址:</span><input id="ip" type="text" value=""></div>
<div class="item">
<span class="label">是否启用HTTPS协议</span>
<select id="isHttps" onchange="UpdateValue()" value="启用">
<option value="0">不启用</option>
<option value="1" selected>启用</option>
</select>
</div>
<div class="item"><span class="label">平台端口:</span><input id="port" type="text" value="443"></div>
<div class="item"><span class="label">抓图存储路径:</span><input id="snapDir" type="text" value="D:\SnapDir"></div>
<div class="item"><span class="label">录像存储路径:</span><input id="videoDir" type="text" value="D:\VideoDir"></div>
<div class="item">
<span class="label">初始化布局:</span>
<select id="layout" value="1x1">
<option value="1x1" selected>1x1</option>
<option value="2x2">2x2</option>
<option value="3x3">3x3</option>
<option value="4x4">4x4</option>
</select>
</div>
<div class="item">
<span class="label">加密字段:</span>
<div style="display: inline-block; vertical-align: top;">
<label><input type="checkbox" value="secret" disabled checked>secret</label><br>
<label><input class="encryptedFields" type="checkbox" value="appkey">appkey</label><br>
<label><input class="encryptedFields" type="checkbox" value="ip">ip</label><br>
<label><input class="encryptedFields" type="checkbox" value="snapDir">抓图路径</label><br>
<label><input class="encryptedFields" type="checkbox" value="videoDir">录像路径</label><br>
<label><input class="encryptedFields" type="checkbox" value="layout">布局</label>
</div>
</div>
<div class="item">
<button style="width:10px;padding:0;margin:0;" id="init" class="btn" @click='initVideo'>初始化</button>
<button style="width:10px;padding:0;margin:0;" id="uninit" class="btn" @click='clickUninit'>反初始化</button>
</div>
</div>
<div class="module">
<div class="item">
<span style="width:50px;padding:0;margin:0;" class="label">布局：</span>
</div>
<div class="item">
<span class="label">设置布局:</span>
<select id="setlayout" value="1x1">
<option value="1x1" selected>1x1</option>
<option value="2x2">2x2</option>
<option value="3x3">3x3</option>
<option value="4x4">4x4</option>
</select>
</div>
<div class="item">
<button style="width:10px;padding:0;margin:0;" id="SetLayout" class="btn" @click='SetLayout'>设置布局</button>
<button style="width:10px;padding:0;margin:0;" id="GetLayout" class="btn" @click='GetLayout'>获取布局</button>
</div>
<div class="item">
<span style="width:50px;padding:0;margin:0;" class="label">预览：</span>
</div>
<div class="item">
<span class="label">预览模式：</span>
<select id="PlayType" onchange="UpdatePlayTypeValue()" value="0">
<option value="0" selected>空闲窗口预览</option>
<option value="1">选中窗口预览</option>
<option value="2">指定窗口预览</option>
</select>
</div>
<div class="item" id = "PreviewWndId" style="display: none;">
<span class="label">窗口ID：</span>
<select id="playWndId" value="0">
</select>
</div>
<div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""></div>
<div class="item">
<span class="label">主子码流标识：</span>
<select id="streamMode" value="0">
<option value="0">主码流</option>
<option value="1">子码流</option>
</select>
</div>
<div class="item">
<span class="label">传输协议：</span>
<select id="transMode" value="1">
<option value="1">TCP</option>
<option value="0">UDP</option>
</select>
</div>
<div class="item">
<span class="label">是否启用GPU硬解：</span>
<select id="gpuMode" value="0">
<option value="0">不启用</option>
<option value="1">启用</option>
</select>
</div>
<div class="item">
<button style="width:20px;padding:0;margin:0;" id="startPreview" class="btn" @click='startPreview'>预览</button>
<button style="width:;padding:0;margin:0;" id="stopAllPreview" class="btn" @click='stopAllPreview'>停止全部预览</button>
</div>
<div class="item">
<span style="width:50px;padding:0;margin:0;" class="label">抓图：</span>
</div>
<div class="item">
<span class="label">抓图模式：</span>
<select id="SnapType" onchange="UpdateSnapTypeValue()" value="0">
<option value="0" selected>选中窗口抓图</option>
<option value="1">指定窗口抓图</option>
</select>
</div>
<div class="item" id = "SnapShotWndId" style="display: none;">
<span class="label">窗口ID：</span>
<select id="SnapWndId" value="0">
</select>
</div>
<div class="item">
<span style="padding:0;margin:0;" class="label">抓图绝对路径：</span>
<input id="snapName" type="text" value="d:\SnapDir\test.jpg">
</div>
<div class="item">
<button style="width:10px;padding:0;margin:0;" id="SnapPic" class="btn" @click='SnapPic'>预览抓图</button>
</div>
</div>
<!--字符叠加 -->
<div class="module" style="height:50xp;padding:10;margin:10;">
<div class="item">
<span style="width:100px;padding:0;margin:0;" class="label">字符叠加：</span>
</div>
<div class="item">
<span class="label">叠加模式：</span>
<select id="SetOSDType" onchange="UpdateSetOSDTypeValue()" value="0">
<option value="0" selected>选中窗口叠加</option>
<option value="1">指定窗口叠加</option>
</select>
</div>
<div class="item" id = "SetOSDWndId" style="display: none;">
<span class="label">窗口ID：</span>
<select id="osdWndId" value="0">
</select>
</div>
<div class="item">
<span class="label">起点X坐标：</span><input id="Xsite" type="text" value="0" maxlength="4" onkeyup="JavaScript:textbox(this, 0, 1000)" placeholder="请输入0~1000的数字">
<span class="label">起点Y坐标：</span><input id="Ysite" type="text" value="0" maxlength="4" onkeyup="JavaScript:textbox(this, 0, 1000)" placeholder="请输入0~1000的数字">
<span class="label" style="width:150px;padding:0;margin:0;">字体RGB颜色：</span>
<input id="RColor" type="text" style="width:50px;padding:0;margin:0;" value="255" maxlength="3" onkeyup="JavaScript:textbox(this, 0, 255)">
<input id="GColor" type="text" style="width:50px;padding:0;margin:0;" value="0" maxlength="3" onkeyup="JavaScript:textbox(this, 0, 255)">
<input id="BColor" type="text" style="width:50px;padding:0;margin:0;" value="0" maxlength="3" onkeyup="JavaScript:textbox(this, 0, 255)">
<span class="label">待叠加字符串：</span><textarea id="OSDText" type="text" style="width:320px;height:100px;" value="20"></textarea>
</div>
<div class="item">
<button style="width:;padding:0;margin:0;" id="setOSDText" class="btn" @click='setOSDText'>叠加字符</button>
</div>
</div>
<fieldset class="cbInfoDiv">
<legend>返回值信息</legend>
<div id="cbInfo" class="cbInfo"></div>
<button id="clear" @click='clear'>清空</button>
</fieldset>
</div>
</div>
</template>
<script>
import $ from 'jquery'
let oWebControl = null;// 插件对象
let bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器
let pubKey = '';
let iLastCoverLeft = 0;
let iLastCoverTop = 0;
let iLastCoverRight = 0;
let iLastCoverBottom = 0;
let initCount = 0;
export default {
name: 'demo',
data () {
return {
}
},
mounted() {
this.initPlugin();
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
},
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
},
methods: {
UpdateValue() {
var sel = document.getElementById("isHttps");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (0 == v)
{
document.getElementById("port").value = 80;
}
else
{
document.getElementById("port").value = 443;
}
},
UpdatePlayTypeValue() {
var sel = document.getElementById("PlayType");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (2 == v) {
//获取布局，并显示标签和窗口选择下拉框
document.getElementById("PreviewWndId").style.display="";//显示
oWebControl.JS_RequestInterface({
funcName: "getLayout"
}).then(function (oData) {
//分析窗口数
//{"errorCode":0,"errorModule":0,"responseMsg":{"code":0,"data":"{\n \"layout\": \"2x2\",\n \"wndNum\": 4\n}\n"},"sequence":"93298475-03d0-49c9-bc3a-a94ec696f983","uuid":"{c76078b4-4f19-4198-b68d-83df1d3d71a9}"}
//"{\n \"layout\": \"2x2\",\n \"wndNum\": 4\n}\n"
var Data = JSON.stringify(oData.responseMsg.data);
//"{ \"layout\": \"2x2\", \"wndNum\": 4}"
Data = Data.replace(/\\n/g, "");
//"{ "layout": "2x2", "wndNum": 4}"
Data = Data.replace(/\\/g, "");
//{ "layout": "2x2", "wndNum": 4}"
Data = Data.replace(/\"{/g, "{");
//{ "layout": "2x2", "wndNum": 4}"
Data = Data.replace(/}\"/g, "}");
var DataNum = JSON.parse(Data).wndNum;
createSelectOption(DataNum);
});
} else {
//隐藏标签和窗口选择下拉框
document.getElementById("PreviewWndId").style.display="none";//隐藏
}
},
createSelectOption(wndNum){
var _html="";
//先清空之后再添加
$("#playWndId").empty();
for(var _i = 0; _i < wndNum; _i++){
_html=_html+"<option value='"+(_i+1)+"'>"+ (_i+1) +"</option>";
}
$("#playWndId").append(_html);
},
UpdateSnapTypeValue() {
var sel = document.getElementById("SnapType");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (1 == v) {
//获取布局，并显示标签和窗口选择下拉框
document.getElementById("SnapShotWndId").style.display="";//显示
oWebControl.JS_RequestInterface({
funcName: "getLayout"
}).then(function (oData) {
//分析窗口数
var Data = JSON.stringify(oData.responseMsg.data);
Data = Data.replace(/\\n/g, "");
Data = Data.replace(/\\/g, "");
Data = Data.replace(/\"{/g, "{");
Data = Data.replace(/}\"/g, "}");
var DataNum = JSON.parse(Data).wndNum;
createSnapSelectOption(DataNum);
});
} else {
//隐藏标签和窗口选择下拉框
document.getElementById("SnapShotWndId").style.display="none";//隐藏
}
},
createSnapSelectOption(wndNum) {
var _html="";
//先清空之后再添加
$("#SnapWndId").empty();
for(var _i = 0; _i < wndNum; _i++){
_html=_html+"<option value='"+(_i+1)+"'>"+ (_i+1) +"</option>";
}
$("#SnapWndId").append(_html);
},
UpdateSetOSDTypeValue() {
var sel = document.getElementById("SetOSDType");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (1 == v) {
//获取布局，并显示标签和窗口选择下拉框
document.getElementById("SetOSDWndId").style.display="";//显示
oWebControl.JS_RequestInterface({
funcName: "getLayout"
}).then(function (oData) {
//分析窗口数
var Data = JSON.stringify(oData.responseMsg.data);
Data = Data.replace(/\\n/g, "");
Data = Data.replace(/\\/g, "");
Data = Data.replace(/\"{/g, "{");
Data = Data.replace(/}\"/g, "}");
var DataNum = JSON.parse(Data).wndNum;
createSetOSDSelectOption(DataNum);
});
} else {
//隐藏标签和窗口选择下拉框
document.getElementById("SetOSDWndId").style.display="none";//隐藏
}
},
createSetOSDSelectOption(wndNum) {
var _html="";
//先清空之后再添加
$("#osdWndId").empty();
for(var _i = 0; _i < wndNum; _i++){
_html=_html+"<option value='"+(_i+1)+"'>"+ (_i+1) +"</option>";
}
$("#osdWndId").append(_html);
},
// 标签关闭
beforeunloadHandler(){
// 此处请勿调反初始化
if (oWebControl != null){
oWebControl.JS_Disconnect().then(function(){}, function() {});
}
},
// 设置窗口遮挡
setWndCover() {
var iWidth = $(window).width();
var iHeight = $(window).height();
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > 700) ? 700 : iCoverLeft;
iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
iCoverRight = (iCoverRight > 700) ? 700 : iCoverRight;
iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;
if (iLastCoverLeft != iCoverLeft) {
console.log("iCoverLeft: " + iCoverLeft);
iLastCoverLeft = iCoverLeft;
oWebControl.JS_SetWndCover("left", iCoverLeft);
}
if (iLastCoverTop != iCoverTop) {
console.log("iCoverTop: " + iCoverTop);
iLastCoverTop = iCoverTop;
oWebControl.JS_SetWndCover("top", iCoverTop);
}
if (iLastCoverRight != iCoverRight) {
console.log("iCoverRight: " + iCoverRight);
iLastCoverRight = iCoverRight;
oWebControl.JS_SetWndCover("right", iCoverRight);
}
if (iLastCoverBottom != iCoverBottom) {
console.log("iCoverBottom: " + iCoverBottom);
iLastCoverBottom = iCoverBottom;
oWebControl.JS_SetWndCover("bottom", iCoverBottom);
}
},
// 初始化插件
initPlugin () {
var _this = this;
oWebControl = new WebControl({
szPluginContainer: "playWnd",
iServicePortStart: 15900,
iServicePortEnd: 15909,
cbConnectSuccess: function () {
_this.setCallbacks();
oWebControl.JS_StartService("window", {
dllPath: "./VideoPluginConnect.dll"
//dllPath: "./DllForTest-Win32.dll"
}).then(function () {
oWebControl.JS_CreateWnd("playWnd", 700, 400).then(function () {
console.log("JS_CreateWnd success");
});
}, function () {
});
},
cbConnectError: function () {
console.log("cbConnectError");
oWebControl = null;
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://");
initCount ++;
if (initCount < 3) {
setTimeout(function () {
initPlugin();
}, 3000)
} else {
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
}
},
cbConnectClose: function () {
console.log("cbConnectClose");
oWebControl = null;
}
});
},
// 获取公钥
getPubKey (callback) {
oWebControl.JS_RequestInterface({
funcName: "getRSAPubKey",
argument: JSON.stringify({
keyLength: 1024
})
}).then(function (oData) {
console.log(oData)
if (oData.responseMsg.data) {
pubKey = oData.responseMsg.data
callback()
}
})
},
// 设置窗口控制回调
setCallbacks() {
var _this = this;
oWebControl.JS_SetWindowControlCallback({
cbIntegrationCallBack: _this.cbIntegrationCallBack
});
},
// 推送消息
cbIntegrationCallBack(oData) {
var _this = this;
_this.showCBInfo(JSON.stringify(oData.responseMsg));
},
// RSA加密
setEncrypt (value) {
var encrypt = new JSEncrypt();
encrypt.setPublicKey(pubKey);
return encrypt.encrypt(value);
},
// 初始化
initVideo() {
var _this = this;
console.log($('#init'));
this.getPubKey(function () {
var appkey = $("#appkey").val();
var secret = _this.setEncrypt($("#secret").val());
var ip = $("#ip").val();
var szPort=$("#port").val();
var snapDir = $("#snapDir").val();
var videoDir = $("#videoDir").val();
var layout = $("#layout").val();
var encryptedFields = ['secret'];
appkey = appkey.replace(/(^\s*)/g, "");
appkey = appkey.replace(/(\s*$)/g, "");
secret = secret.replace(/(^\s*)/g, "");
secret = secret.replace(/(\s*$)/g, "");
ip = ip.replace(/(^\s*)/g, "");
ip = ip.replace(/(\s*$)/g, "");
szPort = szPort.replace(/(^\s*)/g, "");
szPort = szPort.replace(/(\s*$)/g, "");
snapDir = snapDir.replace(/(^\s*)/g, "");
snapDir = snapDir.replace(/(\s*$)/g, "");
videoDir = videoDir.replace(/(^\s*)/g, "");
videoDir = videoDir.replace(/(\s*$)/g, "");
var port = parseInt(szPort);
var enableHttps = parseInt($("#isHttps").val());
$(".encryptedFields").each(function (index, item) {
var $item = $(item);
if ($item.prop('checked')) {
var value = $item.val();
if (value !== 'secret') {
encryptedFields.push(value);
}
// secret固定加密，其它根据用户勾选加密
if (value == 'ip') {
ip = _this.setEncrypt(ip)
}
if (value == 'appkey') {
appkey = _this.setEncrypt(appkey)
}
if (value == 'snapDir') {
snapDir = _this.setEncrypt(snapDir)
}
if (value == 'videoDir') {
videoDir = _this.setEncrypt(videoDir)
}
if (value == 'layout') {
layout = _this.setEncrypt(layout)
}
}
})
encryptedFields = encryptedFields.join(",");
if (!appkey) {
_this.showCBInfo("appkey不能为空！", 'error');
return
}
if (!$("#secret").val()) {
_this.showCBInfo("secret不能为空！", 'error');
return
}
if (!ip) {
_this.showCBInfo("ip不能为空！", 'error');
return
}
if (!$("#port").val()) {
_this.showCBInfo("端口不能为空！", 'error');
return
} else if (!/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test($("#port").val())) {
_this.showCBInfo("端口填写有误！", 'error');
return
}
console.log({
appkey: appkey,
secret: secret,
ip: ip,
playMode: 0, // 预览
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHttps,
encryptedFields: encryptedFields
})
oWebControl.JS_RequestInterface({
funcName: "init",
argument: JSON.stringify({
appkey: appkey,
secret: secret,
ip: ip,
playMode: 0, // 预览
port: port,
snapDir: snapDir,
videoDir: videoDir,
layout: layout,
enableHTTPS: enableHttps,
encryptedFields: encryptedFields
})
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
})
},
// 设置当前布局
SetLayout() {
var _this = this;
var layout = $("#setlayout").val();
oWebControl.JS_RequestInterface({
funcName: "setLayout",
argument: JSON.stringify({
layout : layout
})
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
_this.UpdatePlayTypeValue();
_this.UpdateSnapTypeValue();
_this.UpdateSetOSDTypeValue();
});
},
// 获取当前布局
GetLayout() {
var _this = this;
oWebControl.JS_RequestInterface({
funcName: "getLayout"
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
_this.UpdatePlayTypeValue();
_this.UpdateSnapTypeValue();
_this.UpdateSetOSDTypeValue();
});
},
// 抓图
SnapPic() {
var _this = this;
var snapName = $("#snapName").val();
var wndId = 0; //选中窗口抓图
snapName = snapName.replace(/(^\s*)/g, "");
snapName = snapName.replace(/(\s*$)/g, "");
var sel = document.getElementById("SnapType");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (1 == v)//指定窗口抓图
{
wndId = parseInt($("#SnapWndId option:selected").val(), 10);
}
else if (0 == v) //选中窗口抓图
{
wndId = 0;
}
oWebControl.JS_RequestInterface({
funcName: "snapShot",
argument: JSON.stringify({
name : snapName,
wndId: wndId
})
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
// 视频预览
startPreview() {
var _this = this;
var cameraIndexCode = $("#cameraIndexCode ").val();
var streamMode = +$("#streamMode").val();
var transMode = +$("#transMode").val();
var gpuMode = +$("#gpuMode").val();
var wndId = -1; //默认为空闲窗口回放
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
var sel = document.getElementById("PlayType");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (2 == v)//指定窗口回放
{
wndId = parseInt($("#playWndId option:selected").val(), 10);
}
else if (1 == v) //选中窗口回放
{
wndId = 0;
}
if (!cameraIndexCode ) {
_this.showCBInfo("监控点编号不能为空！", 'error');
return
}
oWebControl.JS_RequestInterface({
funcName: "startPreview",
argument: JSON.stringify({
cameraIndexCode : cameraIndexCode ,
streamMode: streamMode,
transMode: transMode,
gpuMode: gpuMode,
wndId: wndId
})
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
// 字符叠加
setOSDText() {
var _this = this;
var text = $("#OSDText").val();
var x = +$("#Xsite").val();
var y = +$("#Ysite").val();
var ColorR = parseInt($("#RColor").val());
var ColorG = parseInt($("#GColor").val());
var ColorB = parseInt($("#BColor").val());
var Color = 65536 * ColorB + 256 * ColorG + ColorR;
var wndId = 0;
var sel = document.getElementById("SetOSDType");
var selectedId = sel.selectedIndex;
var v = sel.options[selectedId].value;
if (1 == v)//指定窗口字符叠加
{
wndId = parseInt($("#osdWndId option:selected").val(), 10);
}
else //空闲窗口字符叠加
{
wndId = 0;
}
oWebControl.JS_RequestInterface({
funcName: "drawOSD",
argument: JSON.stringify({
text : text,
x: x,
y: y,
color: Color,
wndId: wndId
})
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
// 停止预览
stopAllPreview() {
var _this = this;
oWebControl.JS_RequestInterface({
funcName: "stopAllPreview"
}).then(function (oData) {
_this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
// 反初始化
uninit () {
oWebControl.JS_RequestInterface({
funcName: "uninit"
}).then(function (oData) {
showCBInfo(JSON.stringify(oData ? oData.responseMsg : ''));
});
},
// 点击反初始化
clickUninit() {
this.uninit();
},
// 显示回调信息
showCBInfo(szInfo, type) {
var _this = this;
if (type === 'error') {
szInfo = "<div style='color: red;'>" + _this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
} else {
szInfo = "<div>" + _this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
}
$("#cbInfo").html(szInfo + $("#cbInfo").html());
},
// 清空回馈信息
clear() {
$("#cbInfo").html('');
},
// 格式化时间
dateFormat(oDate, fmt) {
var o = {
"M+": oDate.getMonth() + 1, //月份
"d+": oDate.getDate(), //日
"h+": oDate.getHours(), //小时
"m+": oDate.getMinutes(), //分
"s+": oDate.getSeconds(), //秒
"q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
"S": oDate.getMilliseconds()//毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
},
textbox(obj, min, max){
obj.value=obj.value.replace(/[^\d]/g,'');
if(parseInt(obj.value)==obj.value && parseInt(obj.value)>=min && parseInt(obj.value)<=max)
{}
else
{
if(parseInt(obj.value) < min)
{
obj.value = min;
}
if(parseInt(obj.value) > max)
{
obj.value = max;
}
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html, body {
padding: 0;
margin: 0;
}
.playWnd {
margin: 30px 0 0 400px;
width: 700px;
height: 400px;
border: 1px solid red;
}
.cbInfoDiv {
float: left;
width: 360px;
margin-left: 16px;
border:1px solid #7F9DB9;
}
.cbInfo {
height: 200px;
padding: 5px;
border: 1px solid #7F9DB9;
overflow: auto;
word-break: break-all;
}
.operate {
margin-top: 24px;
}
.operate::after {
content: '';
display: block;
clear: both;
}
.operate .btns {
height: 32px;
}
.module {
float: left;
width: 340px;
min-height: 320px;
margin-left: 16px;
padding: 16px 8px;
box-sizing: border-box;
border: 1px solid #e5e5e5;
}
.module .item {
margin-bottom: 4px;
}
.module .label {
width: 150px;
display: inline-block;
vertical-align: middle;
margin-right: 8px;
text-align: right;
}
.module input[type="text"],
.module select {
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
margin-left: 0;
width: 150px;
min-height: 20px;
}
.module .btn {
min-width: 80px;
min-height: 24px;
margin-top: 16px;
margin-left: 158px;
}
</style>
效果如下：
基本功能都已经实现，包括录像、对讲功能。
如果有帮助到你的话，能点个赞再走嘛，让我知道我写的东西有人看就好啦~O(∩_∩)O