You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.9 KiB
Plaintext
63 lines
1.9 KiB
Plaintext
<template>
|
|
<a-row type="flex-container" :gutter="30">
|
|
<a-col >
|
|
时间：<a-date-picker
|
|
v-model="date"
|
|
format="YYYY-MM-DD"
|
|
placeholder="请选择时间"
|
|
@change="cameraRecord"
|
|
/>
|
|
</a-col>
|
|
<label for="name">摄像机:</label>
|
|
<select v-model="selectedCamera">
|
|
<option v-for="(url, camera) in cameras" :key="url.camera" >{{ camera }}</option>
|
|
<li v-for="item in cameras" :key="item.video">{{ camera.video }}</li>
|
|
</select>
|
|
<div id="hikvideo">
|
|
<video id='video' controls autoplay muted width="50%" height="50%" style="object-fit: fill"></video>
|
|
</div>
|
|
</a-row>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "hikvideo",
|
|
data() {
|
|
return {
|
|
webRtcServer: null,
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
date: '',
|
|
cameras: null,
|
|
selectedCamera: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.loadCameras();
|
|
this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");
|
|
this.webRtcServer.connect(key);
|
|
},
|
|
//销毁视频流
|
|
beforeDestroy() {
|
|
this.webRtcServer.disconnect()
|
|
this.webRtcServer = null
|
|
},
|
|
methods: {
|
|
loadCameras() {
|
|
fetch('./config.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.cameras = data.urls;
|
|
console.log('这是一条来自Vue组件的日志信息222222222222');
|
|
//console.log(this.cameras);
|
|
console.log(key);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching JSON file:', error);
|
|
});
|
|
}
|
|
},
|
|
};
|
|
</script> |