84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="camera-list">
|
||
|
|
<camera
|
||
|
|
v-for="(item, index) in cameraList"
|
||
|
|
:key="index"
|
||
|
|
:name="item.name"
|
||
|
|
:source="item.source"
|
||
|
|
></camera>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted, ref } from "vue";
|
||
|
|
import camera from "./camera.vue";
|
||
|
|
|
||
|
|
const cameraList = ref([
|
||
|
|
{
|
||
|
|
name: "CAMERA01",
|
||
|
|
source:
|
||
|
|
"http://101.34.251.155:10000/sms/34020000002020000001/flv/hls/34020000001320000001_34020000001320000002.flv",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "CAMERA02",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "CAMERA03",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "CAMERA04",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "CAMERA06",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: "CAMERA07",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
// const videoElementRef = ref();
|
||
|
|
// const playBtnRef = ref();
|
||
|
|
// let flvPlayer = flvjs.createPlayer({
|
||
|
|
// type: "flv",
|
||
|
|
// url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
|
||
|
|
// // url: "http://localhost:8000/lycoris_recoil.flv",
|
||
|
|
// });
|
||
|
|
|
||
|
|
// const flvPlayerEventHandler = (e) => {
|
||
|
|
// console.log(e);
|
||
|
|
// };
|
||
|
|
// onMounted(() => {
|
||
|
|
// if (flvjs.isSupported()) {
|
||
|
|
// flvPlayer.attachMediaElement(videoElementRef.value);
|
||
|
|
// flvPlayer.load();
|
||
|
|
// flvPlayer.on("ERROR", flvPlayerEventHandler);
|
||
|
|
// // flvPlayer.play();
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.nav-bar {
|
||
|
|
top: 0;
|
||
|
|
width: 750px;
|
||
|
|
z-index: 9999;
|
||
|
|
height: 88px;
|
||
|
|
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 32px;
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
.camera-list {
|
||
|
|
// margin-top: 108px;
|
||
|
|
padding: 0px 20px 0px;
|
||
|
|
}
|
||
|
|
</style>
|