yangjun
/
hldy_yunwei_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

摄像头预览

This commit is contained in:
曹磊 2025-08-04 17:42:20 +08:00
parent 21c340d3b4
commit 25e3af8504
2 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -164,7 +164,7 @@
</div>
</div>
<script type="module" src="/src/main.ts"></script>
<script src="/static/tums-player/tums-player.umd.min.js"></script>
<script src="<%= basePublicPath %>/static/tums-player/tums-player.umd.min.js"></script>
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];

40
src/views/iot/tplink/camera/components/CameraPreviewForm.vue
View File

@ -4,7 +4,7 @@
<a-col :span="24">
<div id="video-container"></div>
</a-col>
<a-col :span="24">
<a-col :span="20">
<a-col :span="24" style="padding: 5px;">
<span style="margin-left: 5px;" v-show="!izPlaying">
<a-button preIcon="ant-design:play-circle-outlined" @click="play">播放</a-button>
@ -62,18 +62,24 @@
<a-button preIcon="ant-design:alert-outlined" @click="manualAlarm">报警</a-button>
</span>
</a-col>
<a-col :span="24">
<a-col :span="24" v-show="formData.ptz == '1' && formData.smartCode == '1' ">
<a-col :span="24" style="padding: 5px;display: flex;">
<span style="margin-left: 5px;">
变焦
</span>
<span style="margin-left: 5px;">
<!-- <a-button :disabled="formData.zoom<=1" preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>-->
<a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>
<!-- <a-button preIcon="ant-design:zoom-out-outlined" @click="zoomInOut('out')" title="缩小"></a-button>-->
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(9,1,1)" @mouseup="moveCtrl(9,0,1)" title="缩小">缩小</a-button>
</span>
<span style="margin-left: 5px;">
<!-- <a-button :disabled="formData.zoom>=4" preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>-->
<a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>
<!-- <a-button preIcon="ant-design:zoom-in-outlined" @click="zoomInOut('in')" title="放大"></a-button>-->
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(10,1,1)" @mouseup="moveCtrl(10,0,1)" title="放大">放大</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-out-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对近焦</a-button>
</span>
<span style="margin-left: 5px;">
<a-button preIcon="ant-design:zoom-in-outlined" @mousedown="moveCtrl(11,1,1)" @mouseup="moveCtrl(11,0,1)">对远焦</a-button>
</span>
<!-- <span style="margin-left: 5px;width: 60%">
<a-slider v-model:value="formData.zoom" :min="1.0" :max="4.0" :step="0.2" :marks="{1:1.0,2:2.0,3:3.0,4:4.0}" @afterChange="(value) => changeZoom(value)" />
@ -84,27 +90,27 @@
</a-col>
</a-col>
</a-col>
<!-- <a-col :span="4">
<table style="width: 102px">
<a-col :span="4" v-show="formData.ptz == '1'">
<table style="width: 96px;height:96px;margin: 5px 0px 5px 0px;">
<tbody>
<tr>
<td></td>
<td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1)" @mouseup="moveCtrl(1,0)"></a-button></td>
<td><a-button preIcon="ant-design:caret-up-outlined" @mousedown="moveCtrl(1,1,1)" @mouseup="moveCtrl(1,0,1)"></a-button></td>
<td></td>
</tr>
<tr>
<td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1)" @mouseup="moveCtrl(3,0)"></a-button></td>
<td><a-button preIcon="ant-design:caret-left-outlined" @mousedown="moveCtrl(3,1,1)" @mouseup="moveCtrl(3,0,1)"></a-button></td>
<td><a-button preIcon="ant-design:compress-outlined"></a-button></td>
<td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1)" @mouseup="moveCtrl(5,0)"></a-button></td>
<td><a-button preIcon="ant-design:caret-right-outlined" @mousedown="moveCtrl(5,1,1)" @mouseup="moveCtrl(5,0,1)"></a-button></td>
</tr>
<tr>
<td></td>
<td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1)" @mouseup="moveCtrl(7,0)"></a-button></td>
<td><a-button preIcon="ant-design:caret-down-outlined" @mousedown="moveCtrl(7,1,1)" @mouseup="moveCtrl(7,0,1)"></a-button></td>
<td></td>
</tr>
</tbody>
</table>
</a-col>-->
</a-col>
</a-row>
</a-spin>
</template>
@ -144,7 +150,7 @@
//预览通道参数
deviceIndex: '',//设备索引
streamType: 0,//码流类型 0 代表主码流，1 代码子码流
streamType: 1,//码流类型 0 代表主码流，1 代码子码流
//视频预览参数
url: '',//预览通道对应的URL
@ -155,6 +161,8 @@
flip_type: '',//画面镜像旋转： "off"//关闭 "left_and_right"//左右 "up_and_down"//上下 "center"//中心
zoom: 1, //变焦
sliderValue : 1,//滑动条的值
ptz : 0,//是否有云台
smartCode : 0,//是否可变焦
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
@ -195,6 +203,8 @@
Object.assign(formData, tmpData);
});
console.log(formData);
createPreview();
getSwitch();
}
@ -496,6 +506,8 @@
td button{
padding: 0;
margin: 0;
width: 30px !important;
height: 30px;
border-color:white;
}