cxc/monitor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
quantulr
2023-12-05 09:38:06 +08:00
parent 9bd8ee2899
commit 419adbcbe3
8 changed files with 562 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -13,6 +13,7 @@
"axios": "^1.1.3", "axios": "^1.1.3",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"flv.js": "^1.6.2", "flv.js": "^1.6.2",
"jszip": "^3.10.1",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"modern-normalize": "^1.1.0", "modern-normalize": "^1.1.0",
"pinia": "^2.0.33", "pinia": "^2.0.33",

5
public/index.html
View File

@ -7,6 +7,11 @@
<meta content="width=device-width,initial-scale=1.0" name="viewport"/> <meta content="width=device-width,initial-scale=1.0" name="viewport"/>
<link href="<%= BASE_URL %>favicon.ico" rel="icon"/> <link href="<%= BASE_URL %>favicon.ico" rel="icon"/>
<!-- <title><%= htmlWebpackPlugin.options.title %></title> --> <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<script>
console.log(navigator.userAgent)
</script>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
<script> <script>
var sid = '<#sid>'; var sid = '<#sid>';
</script> </script>

32
src/App.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<CameraList/> <CameraList/>
<!-- <n-config-provider :date-locale="dateZhCN" :locale="zhCN">--> <!-- <n-config-provider :date-locale="dateZhCN" :locale="zhCN">-->
<!-- <CameraItem--> <!-- <CameraItem-->
<!-- name="测试球机视频"--> <!-- name="测试球机视频"-->
@ -14,30 +14,28 @@
<script> <script>
// import {NConfigProvider, zhCN,dateZhCN} from 'naive-ui' // import {NConfigProvider, zhCN,dateZhCN} from 'naive-ui'
import CameraList from "./components/CameraList.vue"; import CameraList from "./components/CameraList.vue";
import CameraItem from "@/components/CameraItem.vue";
import {useTokenStore} from "@/store/token"; import {useTokenStore} from "@/store/token";
// import List from "./infinite-list-vue.umd.cjs"; // import List from "./infinite-list-vue.umd.cjs";
export default { export default {
name: "App", name: "App",
computed: { computed: {},
zhCN() { components: {
return zhCN CameraList,
} },
}, created() {
components: { console.log("created")
CameraItem, },
CameraList, mounted() {
}, console.log("mounted")
mounted() { const tokenStore = useTokenStore();
const tokenStore = useTokenStore(); tokenStore.fetchToken();
tokenStore.fetchToken(); },
},
}; };
</script> </script>
<style> <style>
#app { #app {
background-color: #f6f6f6; background-color: #f6f6f6;
//width: 100vw; //height: 100vh; //width: 100vw; //height: 100vh;
} }
</style> </style>

691
src/components/CameraItem.vue
View File

@ -1,155 +1,166 @@
<template> <template>
<div ref="cameraItemRef" class="camera-item"> <div ref="cameraItemRef" class="camera-item">
<div class="camera-name"> <div class="camera-name">
{{ props.name }} {{ props.name }}
</div> </div>
<!-- <n-image :src="previewImage" class="video-cover" object-fit="contain"></n-image>--> <!-- <n-image :src="previewImage" class="video-cover" object-fit="contain"></n-image>-->
<img :src="previewImage" alt="预览图" class="video-cover"/> <img :src="previewImage" alt="预览图" class="video-cover"/>
<!-- <video--> <!-- <video-->
<!-- v-show="false"--> <!-- v-show="false"-->
<!-- ref="previewVideoRef"--> <!-- ref="previewVideoRef"-->
<!-- :class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"--> <!-- :class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"-->
<!-- ></video>--> <!-- ></video>-->
<div class="overlay" @click="openPlayModal"> <div class="overlay" @click="openPlayModal">
<span class="iconfont icon-bofang_o" style="font-size: 60px"></span> <span class="iconfont icon-bofang_o" style="font-size: 60px"></span>
</div> </div>
<div v-if="showModal" class="modal-overlay" @click="closePlayModal"> <div v-if="showModal" class="modal-overlay" @click="closePlayModal">
<span <span
v-if="isFullscreen && !playbackFlvUrl" v-if="isFullscreen && !playbackFlvUrl"
class="quit-fullscreen iconfont icon-quxiaoquanping_o" class="quit-fullscreen iconfont icon-quxiaoquanping_o"
@click.stop="exitFullscreen" @click.stop="exitFullscreen"
></span> ></span>
<n-slider v-if="isFullscreen && playbackFlvUrl" v-model="playbackProcess" :format-tooltip="formatSeconds" <n-slider v-if="isFullscreen && playbackFlvUrl" v-model:value="playbackProcess" :format-tooltip="formatSeconds"
:marks="sliderMarks" :marks="sliderMarks"
:max="isToday? getNowSeconds()-600 :86399" :min="0" :step="300" :max="isToday? getNowSeconds()-600 :86399" :min="0" :step="300"
class="time-slider" class="time-slider"
reverse reverse
vertical vertical
@update-value="setPlaybackProcess"></n-slider> @update-value="setPlaybackProcess"></n-slider>
<div ref="rotateElementRef" :class="`modal`"> <div ref="rotateElementRef" :class="`modal`">
<video <video
ref="videoElementRef" ref="videoElementRef"
:class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`" :class="`camera-player ${isFullscreen ? 'fullscreen-video' : ''}`"
></video> ></video>
<div <div
:class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`" :class="`video-overlay ${isFullscreen ? 'fullscreen-video' : ''}`"
@click.stop="switchPlayStatus" @click.stop="switchPlayStatus"
> >
<n-popover v-if="isFullscreen" :show="showPopover" <n-popover v-if="isFullscreen" :show="showPopover"
:show-arrow="false" :show-arrow="false"
:style="`transform-origin: center;transform: rotate(90deg);`" :style="`transform-origin: center;transform: rotate(90deg);`"
placement="left" trigger="manual"> placement="left" trigger="manual">
<template #trigger> <template #trigger>
<n-icon class="history-time-range" color="#fff" @click="showPopover =true"> <n-icon class="history-time-range" color="#fff" @click="showPopover =true">
<calendar-outline/> <calendar-outline/>
</n-icon> </n-icon>
</template> </template>
<div> <div>
<n-config-provider :date-locale="dateZhCN" :locale="zhCN"> <n-config-provider :date-locale="dateZhCN" :locale="zhCN">
<n-date-picker v-model="playbackDate" format="yyyy-MM-dd HH:mm:ss" panel type="date" <!-- v-model="playbackDate"-->
@update-formatted-value="handleConfirmRange"/> <n-date-picker v-model:value="playbackDate" format="yyyy-MM-dd HH:mm:ss" panel type="date"
</n-config-provider> @update-formatted-value="handleConfirmRange"/>
</n-config-provider>
</div> </div>
</n-popover> </n-popover>
<n-icon v-if="playbackFlvUrl" class="exit-playback" color="#fff" <n-icon v-if="playbackFlvUrl" class="exit-playback" color="#fff"
@click="playbackFlvUrl=null"> @click="playbackFlvUrl=null">
<log-out-outline/> <log-out-outline/>
</n-icon> </n-icon>
<div <!-- -->
v-if="isFullscreen && !playbackFlvUrl &&props.name.includes('球机')" <div class="snapshot" v-if="isFullscreen">
class="arrow-control" <n-icon v-if="!snapshotDownloading" color="#18a058" @click="handleClickGetSnapshot">
> <camera-outline/>
<div </n-icon>
:class="`up iconfont icon-up ${pressed.up ? 'pressed' : ''}`" <n-spin v-else size="medium"/>
@touchend="moveCamera('stop')" </div>
@touchstart="moveCamera('up')" <!--right-bottom 控制转动-->
@contextmenu.prevent <div
></div> v-if="isFullscreen && !playbackFlvUrl &&props.name.includes('球机')"
<div class="arrow-control"
:class="`down iconfont icon-down ${ >
<div
:class="`up iconfont icon-up ${pressed.up ? 'pressed' : ''}`"
@touchend="moveCamera('stop')"
@touchstart="moveCamera('up')"
@contextmenu.prevent
></div>
<div
:class="`down iconfont icon-down ${
pressed.down ? 'pressed' : '' pressed.down ? 'pressed' : ''
}`" }`"
@touchend="moveCamera('stop')" @touchend="moveCamera('stop')"
@touchstart="moveCamera('down')" @touchstart="moveCamera('down')"
@contextmenu.prevent @contextmenu.prevent
></div> ></div>
<div <div
:class="`left iconfont icon-left ${ :class="`left iconfont icon-left ${
pressed.left ? 'pressed' : '' pressed.left ? 'pressed' : ''
}`" }`"
@touchend="moveCamera('stop')" @touchend="moveCamera('stop')"
@touchstart="moveCamera('left')" @touchstart="moveCamera('left')"
@contextmenu.prevent @contextmenu.prevent
></div> ></div>
<div <div
:class="`right iconfont icon-right ${ :class="`right iconfont icon-right ${
pressed.right ? 'pressed' : '' pressed.right ? 'pressed' : ''
}`" }`"
@touchend="moveCamera('stop')" @touchend="moveCamera('stop')"
@touchstart="moveCamera('right')" @touchstart="moveCamera('right')"
@contextmenu.prevent @contextmenu.prevent
></div> ></div>
</div> </div>
<div <div
v-if="!isFullscreen" v-if="!isFullscreen"
class="iconfont icon-quanping_o fullscreen" class="iconfont icon-quanping_o fullscreen"
@click.stop="videoFullscreen" @click.stop="videoFullscreen"
></div> ></div>
<div class="close-button iconfont icon-close" @click="closePlayModal"> <div class="close-button iconfont icon-close" @click="closePlayModal">
</div> </div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script name="camera" setup> <script name="camera" setup>
import {nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch} from "vue"; import {nextTick, onMounted, onUnmounted, reactive, ref, toRefs, watch} from "vue";
import {dateZhCN, NConfigProvider, NDatePicker, NIcon, NPopover, NSlider, zhCN} from 'naive-ui' import {dateZhCN, NConfigProvider, NDatePicker, NIcon, NPopover, NSlider, NSpin, zhCN} from 'naive-ui'
import {CalendarOutline, LogOutOutline} from '@vicons/ionicons5' import {CalendarOutline, LogOutOutline, CameraOutline} from '@vicons/ionicons5'
import flvjs from "flv.js"; import flvjs from "flv.js";
import axios from "axios"; import axios from "axios";
import {useTokenStore} from "@/store/token"; import {useTokenStore} from "@/store/token";
import {debounce} from "lodash-es"; import {debounce} from "lodash-es";
import JSZip from 'jszip'
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const props = defineProps({ const props = defineProps({
name: { name: {
type: String, type: String,
}, },
source: { source: {
type: String, type: String,
default: null, default: null
}, // FIXME
// default: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv",
},
}); });
const {source} = toRefs(props); const {source} = toRefs(props);
const sliderMarks = { const sliderMarks = {
0: '00:00', 0: '00:00',
// 3600: '01:00', // 3600: '01:00',
7200: '02:00', 7200: '02:00',
// 10800: '03:00', // 10800: '03:00',
14400: '04:00', 14400: '04:00',
// 18000: '05:00', // 18000: '05:00',
21600: '06:00', 21600: '06:00',
// 25200: '07:00', // 25200: '07:00',
28800: '08:00', 28800: '08:00',
// 32400: '09:00', // 32400: '09:00',
36000: '10:00', 36000: '10:00',
// 39600: '11:00', // 39600: '11:00',
43200: '12:00', 43200: '12:00',
// 46800: '13:00', // 46800: '13:00',
50400: '14:00', 50400: '14:00',
// 54000: '15:00', // 54000: '15:00',
57600: '16:00', 57600: '16:00',
// 61200: '17:00', // 61200: '17:00',
64800: '18:00', 64800: '18:00',
// 68400: '19:00', // 68400: '19:00',
72000: '20:00', 72000: '20:00',
// 75600: '21:00', // 75600: '21:00',
79200: '22:00', 79200: '22:00',
// 82800: '23:00', // 82800: '23:00',
} }
const playbackDate = ref(null) const playbackDate = ref(null)
@ -163,93 +174,96 @@ const showPopover = ref(false)
let flvPlayer; let flvPlayer;
const tokenStore = useTokenStore(); const tokenStore = useTokenStore();
onMounted(async () => { onMounted(async () => {
if (!tokenStore.token) { if (!tokenStore.token) {
await tokenStore.fetchToken(); await tokenStore.fetchToken();
} }
const serial = source.value.split("/flv/hls/")[1].split("_")[0]; const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value); const url = new URL(source.value);
previewImage.value = `${url.protocol}//${url.host}/api/v1/device/channelsnap?serial=${serial}&token=${tokenStore.token}`; previewImage.value = `${url.protocol}//${url.host}/api/v1/device/channelsnap?serial=${serial}&token=${tokenStore.token}`;
}); });
const openPlayModal = () => { const openPlayModal = () => {
showModal.value = true; showModal.value = true;
nextTick(() => { nextTick(() => {
flvPlayer = flvjs.createPlayer({ flvPlayer = flvjs.createPlayer({
type: "flv", type: "flv",
url: props.source, url: props.source,
});
if (flvjs.isSupported()) {
flvPlayer.attachMediaElement(videoElementRef.value);
flvPlayer.load();
flvPlayer.on("ERROR", flvPlayerEventHandler);
flvPlayer.play();
}
}); });
// document.addEventListener("touchstart", handleZoomStart) if (flvjs.isSupported()) {
// document.addEventListener("touchend", handleZoomEnd) flvPlayer.attachMediaElement(videoElementRef.value);
// document.addEventListener("touchmove", handleZooming) flvPlayer.load();
// console.log('zoom event bind') flvPlayer.on("ERROR", flvPlayerEventHandler);
flvPlayer.play();
}
});
// document.addEventListener("touchstart", handleZoomStart)
// document.addEventListener("touchend", handleZoomEnd)
// document.addEventListener("touchmove", handleZooming)
// console.log('zoom event bind')
}; };
const getNowSeconds = () => { const getNowSeconds = () => {
// 获取今天的日期 // 获取今天的日期
const today = new Date(); const today = new Date();
// 将日期设置为零点 // 将日期设置为零点
today.setHours(0, 0, 0, 0); today.setHours(0, 0, 0, 0);
// 获取当前时间戳并计算与今天零点的时间差 // 获取当前时间戳并计算与今天零点的时间差
const now = new Date(); const now = new Date();
const diff = now.getTime() - today.getTime(); const diff = now.getTime() - today.getTime();
const seconds = Math.floor(diff / 1000); const seconds = Math.floor(diff / 1000);
return seconds return seconds
} }
const closePlayModal = async () => { const closePlayModal = async () => {
if (flvPlayer) { if (flvPlayer) {
flvDestroy(); flvDestroy();
} }
showModal.value = false; showModal.value = false;
/*关闭视频时,如果存在回放,则调用停止接口*/
if (!playbackStreamId.value) {
return
}
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
axios.get(
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
/*关闭视频时,如果存在回放,则调用停止接口*/
if (!playbackStreamId.value) {
return
}
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
playbackDate.value = null
playbackFlvUrl.value = null
playbackProcess.value = 0
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
axios.get(
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
exitFullscreen()
}; };
// url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv", // url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
const flvPlayerEventHandler = (e) => { const flvPlayerEventHandler = (e) => {
console.log(e); console.log(e);
}; };
// 切换播放状态 // 切换播放状态
const switchPlayStatus = () => { const switchPlayStatus = () => {
if (!videoElementRef.value) return; if (!videoElementRef.value) return;
if (videoElementRef.value.paused) { if (videoElementRef.value.paused) {
flvPlayer.play(); flvPlayer.play();
} else { } else {
// flvPlayer.pause(); // flvPlayer.pause();
} }
}; };
const scale = ref(0) const scale = ref(0)
/* 进入全屏 */ /* 进入全屏 */
const videoFullscreen = () => { const videoFullscreen = () => {
const _scale = screen.availWidth / videoElementRef.value.offsetHeight; const _scale = screen.availWidth / videoElementRef.value.offsetHeight;
scale.value = _scale scale.value = _scale
videoElementRef.value.style.setProperty("--scale", _scale); videoElementRef.value.style.setProperty("--scale", _scale);
videoElementRef.value.parentNode.style.setProperty("--scale", _scale); videoElementRef.value.parentNode.style.setProperty("--scale", _scale);
isFullscreen.value = true; isFullscreen.value = true;
/*进入全屏时,绑定双指缩放事件*/ /*进入全屏时,绑定双指缩放事件*/
}; };
/** /**
@ -258,25 +272,25 @@ const videoFullscreen = () => {
* @return {string} * @return {string}
*/ */
function formatSeconds(seconds) { function formatSeconds(seconds) {
const hours = Math.floor(seconds / 3600); const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds - hours * 3600) / 60); const minutes = Math.floor((seconds - hours * 3600) / 60);
const formattedHours = hours.toString().padStart(2, '0'); const formattedHours = hours.toString().padStart(2, '0');
const formattedMinutes = minutes.toString().padStart(2, '0'); const formattedMinutes = minutes.toString().padStart(2, '0');
return `${formattedHours}:${formattedMinutes}`; return `${formattedHours}:${formattedMinutes}`;
} }
/* 退出全屏 */ /* 退出全屏 */
const exitFullscreen = () => { const exitFullscreen = () => {
isFullscreen.value = false; isFullscreen.value = false;
}; };
/*方向按钮是否按下*/ /*方向按钮是否按下*/
const pressed = reactive({ const pressed = reactive({
left: false, left: false,
right: false, right: false,
up: false, up: false,
down: false, down: false,
}); });
/** /**
@ -285,45 +299,45 @@ const pressed = reactive({
* @return {Promise<void>} * @return {Promise<void>}
*/ */
const moveCamera = async (arrow) => { const moveCamera = async (arrow) => {
// event.preventDefault() // event.preventDefault()
if (!tokenStore.token) { if (!tokenStore.token) {
await tokenStore.fetchToken(); await tokenStore.fetchToken();
} }
const serial = source.value.split("/flv/hls/")[1].split("_")[0]; const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value); const url = new URL(source.value);
await axios.get( await axios.get(
`${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${tokenStore.token}` `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=${arrow}&token=${tokenStore.token}`
); );
if (arrow === "stop") { if (arrow === "stop") {
pressed.left = false; pressed.left = false;
pressed.right = false; pressed.right = false;
pressed.up = false; pressed.up = false;
pressed.down = false; pressed.down = false;
} else { } else {
pressed[arrow] = true; pressed[arrow] = true;
} }
}; };
function flvDestroy() { function flvDestroy() {
flvPlayer.off("ERROR", flvPlayerEventHandler); flvPlayer.off("ERROR", flvPlayerEventHandler);
flvPlayer.pause(); flvPlayer.pause();
flvPlayer.unload(); flvPlayer.unload();
flvPlayer.detachMediaElement(); flvPlayer.detachMediaElement();
flvPlayer.destroy(); flvPlayer.destroy();
flvPlayer = null; flvPlayer = null;
} }
function flvCreate(url) { function flvCreate(url) {
flvPlayer = flvjs.createPlayer({ flvPlayer = flvjs.createPlayer({
type: "flv", type: "flv",
url: url, url: url,
}); });
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
flvPlayer.attachMediaElement(videoElementRef.value); flvPlayer.attachMediaElement(videoElementRef.value);
flvPlayer.load(); flvPlayer.load();
flvPlayer.on("ERROR", flvPlayerEventHandler); flvPlayer.on("ERROR", flvPlayerEventHandler);
flvPlayer.play(); flvPlayer.play();
} }
} }
const playbackProcess = ref(0) const playbackProcess = ref(0)
@ -334,37 +348,138 @@ const playbackProcess = ref(0)
* @return {Promise<void>} * @return {Promise<void>}
*/ */
const setPlaybackProcess = debounce(async (value) => { const setPlaybackProcess = debounce(async (value) => {
if (!tokenStore.token) { if (!tokenStore.token) {
await tokenStore.fetchToken(); await tokenStore.fetchToken();
} }
const serial = source.value.split("/flv/hls/")[1].split("_")[0]; const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value); const url = new URL(source.value);
axios.get( axios.get(
`${url.protocol}//${url.host}/api/v1/playback/control?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&command=play&range=${value}&token=${tokenStore.token}` `${url.protocol}//${url.host}/api/v1/playback/control?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&command=play&range=${value}&token=${tokenStore.token}`
); );
}, 500) }, 500)
onUnmounted(() => { onUnmounted(() => {
console.log("destroy player here"); console.log("destroy player here");
if (flvPlayer) { if (flvPlayer) {
flvDestroy(); flvDestroy();
} }
}); });
const formatTime = (_date) => {
// _date.setSeconds(_date.getSeconds() + playbackProcess.value)
const year = _date.getFullYear()
const month = (_date.getMonth() + 1).toString().padStart(2, '0')
const day = _date.getDate().toString().padStart(2, '0')
const hour = _date.getHours().toString().padStart(2, '0')
const minute = _date.getMinutes().toString().padStart(2, '0')
const second = _date.getSeconds().toString().padStart(2, '0')
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
/**
* 保存文件
* @param blob
* @param filename
* @returns {Promise<unknown>}
*/
const saveAs = (blob, filename) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
const a = document.createElement("a");
const zip = new JSZip()
zip.file(filename, blob)
zip.generateAsync({type: "blob"}).then((content) => {
reader.readAsDataURL(content);
})
reader.addEventListener("load", () => {
a.href = reader.result;
a.click();
resolve();
});
reader.addEventListener("error", reject);
});
const snapshotDownloading = ref(false)
const handleClickGetSnapshot = async () => {
snapshotDownloading.value = true
try {
await getCameraSnapshot()
} catch (e) {
console.log(e)
}
snapshotDownloading.value = false
}
/**
* 获取摄像头快照
* @returns {Promise<void>}
*/
const getCameraSnapshot = async () => {
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
let stime = null;
let filename;
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value);
if (playbackFlvUrl.value) {
const _date = new Date(playbackDate.value);
_date.setSeconds(_date.getSeconds() + playbackProcess.value)
const year = _date.getFullYear()
const month = (_date.getMonth() + 1).toString().padStart(2, '0')
const day = _date.getDate().toString().padStart(2, '0')
const hour = _date.getHours().toString().padStart(2, '0')
const minute = _date.getMinutes().toString().padStart(2, '0')
const second = _date.getSeconds().toString().padStart(2, '0')
stime = `${year}${month}${day}${hour}${minute}${second}`
filename = `${serial}_${year}-${month}-${day}-${hour}-${minute}-${second}.jpg`
} else {
filename = `${serial}_${formatTime(new Date()).replace(' ', '-').replace(':', "-")}.jpg`
}
// 如果正在播放回放,则先停止回放
if (playbackFlvUrl.value) {
await axios.get(
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
playbackStreamId.value = null
}
try {
if (stime === null) {
stime = 'now'
}
const snapshot = await axios.get(
`${url.protocol}//${url.host}/api/v1/device/channelsnap?serial=${serial}&code=${serial}&stime=${stime}&format=jpeg&w=-1&h=-1&token=${tokenStore.token}`,
{
responseType: "blob",
}
);
await saveAs(snapshot.data, filename)
} catch (e) {
console.log(e)
}
if (playbackFlvUrl.value) {
const startDate = new Date(playbackDate.value)
startDate.setSeconds(startDate.getSeconds() + playbackProcess.value)
const starttime = formatTime(startDate)
await startPlayHistory(starttime)
setPlaybackProcess(playbackProcess.value)
}
}
const isToday = ref(false) const isToday = ref(false)
const handleConfirmRange = (value) => { const handleConfirmRange = (value) => {
console.log(value) console.log(value)
if (value) { if (value) {
showPopover.value = false showPopover.value = false
startPlayHistory(value) startPlayHistory(value)
} }
const _date = new Date(value) const _date = new Date(value)
const now = new Date() const now = new Date()
isToday.value = _date.getDate() === now.getDate() isToday.value = _date.getDate() === now.getDate()
console.log(playbackDate.value)
} }
const playbackFlvUrl = ref(null)/*回放视频url*/ const playbackFlvUrl = ref(null)/*回放视频url*/
const playbackStreamId = ref(null)/*回放id*/ const playbackStreamId = ref(null)/*回放id*/
@ -375,41 +490,41 @@ const playbackStreamId = ref(null)/*回放id*/
* @return {Promise<void>} * @return {Promise<void>}
*/ */
const startPlayHistory = async (value) => { const startPlayHistory = async (value) => {
const starttime = value.replace(' ', 'T') const starttime = value.replace(' ', 'T')
if (!tokenStore.token) { if (!tokenStore.token) {
await tokenStore.fetchToken(); await tokenStore.fetchToken();
} }
const serial = source.value.split("/flv/hls/")[1].split("_")[0]; const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const url = new URL(source.value); const url = new URL(source.value);
const resp = await axios.get( const endTime = starttime.split('T')[0] + 'T23:59:59'
`${url.protocol}//${url.host}/api/v1/playback/start?serial=${serial}&code=${serial}&starttime=${starttime}&endtime=${starttime.replace('00:00:00', '23:59:59')}&token=${tokenStore.token}` const resp = await axios.get(
); `${url.protocol}//${url.host}/api/v1/playback/start?serial=${serial}&code=${serial}&starttime=${starttime.split('T')[0] + 'T00:00:00'}&endtime=${endTime}&token=${tokenStore.token}`
playbackStreamId.value = resp.data.StreamID );
playbackFlvUrl.value = resp.data.FLV playbackStreamId.value = resp.data.StreamID
playbackFlvUrl.value = resp.data.FLV
} }
/*监听回放url,销毁原播放器,如果有值则播放回放,没有则播放原视频*/ /*监听回放url,销毁原播放器,如果有值则播放回放,没有则播放原视频*/
watch(playbackFlvUrl, async (url, oldUrl) => { watch(playbackFlvUrl, async (url, oldUrl) => {
flvDestroy() flvDestroy()
if (url) { if (url !== null) {
flvCreate(url) flvCreate(url)
} else { } else {
flvCreate(props.source) flvCreate(props.source)
}
if (oldUrl && url === null) {
if (!playbackStreamId.value) {
return
} }
if (oldUrl) { if (!tokenStore.token) {
if (!playbackStreamId.value) { await tokenStore.fetchToken();
return
}
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const _url = new URL(source.value);
axios.get(
`${_url.protocol}//${_url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
} }
const serial = source.value.split("/flv/hls/")[1].split("_")[0];
const _url = new URL(source.value);
axios.get(
`${_url.protocol}//${_url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
}
}) })
</script> </script>
@ -531,11 +646,19 @@ watch(playbackFlvUrl, async (url, oldUrl) => {
left: 0; left: 0;
top: 0; top: 0;
.snapshot {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
display: flex;
}
.close-button { .close-button {
position: absolute; position: absolute;
top: 6px; top: 6px;
right: 6px; right: 6px;
color: #fff; color: #e7f5ee;
font-size: 48px; font-size: 48px;
border-radius: 50%; border-radius: 50%;
} }
@ -623,16 +746,16 @@ watch(playbackFlvUrl, async (url, oldUrl) => {
</style> </style>
<style> <style>
.n-slider { .n-slider {
background-color: rgb(209 213 219); background-color: rgb(209 213 219);
} }
.n-slider-mark { .n-slider-mark {
transform: translateY(calc(-50% + var(--n-dot-height) / 2)) rotate(90deg) !important; transform: translateY(calc(-50% + var(--n-dot-height) / 2)) rotate(90deg) !important;
color: springgreen; color: springgreen;
} }
.n-slider-handle-indicator { .n-slider-handle-indicator {
transform-origin: center; transform-origin: center;
transform: rotate(90deg); transform: rotate(90deg);
} }
</style> </style>

179
src/components/CameraList.vue
View File

@ -95,58 +95,55 @@ const queryParams = reactive({
// const activeIndex = ref(0); // const activeIndex = ref(0);
const loadProjectList = async () => { const loadProjectList = async () => {
// const resp = await axios.get(`http://localhost:3000/project-list`); // const resp = await axios.get(`http://localhost:3000/project-list`);
// TODO:test // FIXME:test
// const resp = await axios.get( /*const resp = {
// "/api/portal/r/jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=b9e99f78-2f6e-4d1c-aea9-4364f4191d30" data: [{
// ); "SUPERVISORID": "",
// const resp = { "MAP": "40.763291,111.971932",
// data: [{ "PROID": "HT6YXM-202303232023030010",
// "SUPERVISORID": "", "PROTYPE": "",
// "MAP": "40.763291,111.971932", "UPDATEDATE": 1679559863000,
// "PROID": "HT6YXM-202303232023030010", "SUPERVISOR": "",
// "PROTYPE": "", "DESIGNERID": "",
// "UPDATEDATE": 1679559863000, "STCV": 800000,
// "SUPERVISOR": "", "PROOWNER": "六院本部/资产运营部/",
// "DESIGNERID": "", "SURVEY": "",
// "STCV": 800000, "UPDATEUSER": "13088880001",
// "PROOWNER": "六院本部/资产运营部/", "SURVEYID": "",
// "SURVEY": "", "APPENDIX": "",
// "UPDATEUSER": "13088880001", "PROCOST": 800000,
// "SURVEYID": "", "PRICELEADERID": "13088880004",
// "APPENDIX": "", "PRODEPTLEADERID": "13088880003",
// "PROCOST": 800000, "PROLEADERID": "13088880002",
// "PRICELEADERID": "13088880004", "PROLEADER": "建设单位项目管理人员",
// "PRODEPTLEADERID": "13088880003", "CONTRACTOR": "",
// "PROLEADERID": "13088880002", "FLOORAREA": 2000,
// "PROLEADER": "建设单位项目管理人员", "CREATEUSER": "13088880001",
// "CONTRACTOR": "", "ISEND": 0,
// "FLOORAREA": 2000, "RSTATUS": "1",
// "CREATEUSER": "13088880001", "LEADERID": "13088880007",
// "ISEND": 0, "PRICELEADER": "工程造价主管部门领导",
// "RSTATUS": "1", "PROSTATUS": "1",
// "LEADERID": "13088880007", "CBDATE": 1677600000000,
// "PRICELEADER": "工程造价主管部门领导", "CONTRACTORID": "",
// "PROSTATUS": "1", "LEADER": "主要领导",
// "CBDATE": 1677600000000, "PRODEPTLEADER": "建设单位项目管理部门领导",
// "CONTRACTORID": "", "PRONAME": "A区科创园",
// "LEADER": "主要领导", "ASSETLEADER": "固定资产投资主管领导",
// "PRODEPTLEADER": "建设单位项目管理部门领导", "BINDID": "47856a34-afa4-4a9b-ae28-ba450a4ab798",
// "PRONAME": "A区科创园", "ORGID": "d8ee92f8-c80f-4741-b92c-cbc60c91d754",
// "ASSETLEADER": "固定资产投资主管领导", "PROADDRESS": "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村",
// "BINDID": "47856a34-afa4-4a9b-ae28-ba450a4ab798", "DESIGNER": "",
// "ORGID": "d8ee92f8-c80f-4741-b92c-cbc60c91d754", "PROCESSDEFID": "obj_a48ef53d7a2f4492bf440174e32bef3a",
// "PROADDRESS": "内蒙古自治区呼和浩特市赛罕区黄合少镇南地村", "PROPIC": "",
// "DESIGNER": "", "CREATEDATE": 1679559863000,
// "PROCESSDEFID": "obj_a48ef53d7a2f4492bf440174e32bef3a", "ASSETLEADERID": "13088880005",
// "PROPIC": "", "CEDATE": 1703260800000,
// "CREATEDATE": 1679559863000, "PROFILE": "",
// "ASSETLEADERID": "13088880005", "ACCDATE": 1703260800000,
// "CEDATE": 1703260800000, "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"
// "PROFILE": "", }]
// "ACCDATE": 1703260800000, }*/
// "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"q
// }]
// }
const resp = await axios.get( const resp = await axios.get(
"./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid "./jd?cmd=com.awspaas.user.apps.cmp_screen_getProjectList&sid=" + sid
); );
@ -164,54 +161,48 @@ const projectClicked = () => {
const loadCameraList = async () => { const loadCameraList = async () => {
cameraLoading.value = true; cameraLoading.value = true;
// TODO:test // FIXME:test
// const resp = await axios(`/api/portal/r/jd`, { /*const resp = {
// params: queryParams, data: {
// }); "code": 0,
// const resp = { "rows": [{
// data: { "address": "A区-科创园南门内",
// "code": 0, // "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv",
// "rows": [{ flvUrl: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv",
// "address": "A区-科创园南门内", "id": "2e627e9a-afe8-4065-9196-423467396401",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000009_34020000001320000009.flv", "projectId": "HT6YXM-202303232023030010",
// "id": "2e627e9a-afe8-4065-9196-423467396401", "projectName": "A区科创园"
// "projectId": "HT6YXM-202303232023030010", }, {
// "projectName": "A区科创园" "address": "A区科创园东门内",
// }, { "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv",
// "address": "A区科创园东门内", "id": "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000008_34020000001320000008.flv", "projectId": "HT6YXM-202303232023030010",
// "id": "7ff7ba05-05e4-48e6-a43a-a0983ff1aa2b", "projectName": "A区科创园"
// "projectId": "HT6YXM-202303232023030010", }, {
// "projectName": "A区科创园" "address": "A区科创园东塔吊东北角球机",
// }, { "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv",
// "address": "A区科创园东塔吊东北角球机", "id": "e410e322-cceb-40b9-899b-4f3d2e8215eb",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000010_34020000001320000010.flv", "projectId": "HT6YXM-202303232023030010",
// "id": "e410e322-cceb-40b9-899b-4f3d2e8215eb", "projectName": "A区科创园"
// "projectId": "HT6YXM-202303232023030010", }, {
// "projectName": "A区科创园" "address": "A区科创园东塔吊西南角球机",
// }, { "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv",
// "address": "A区科创园东塔吊西南角球机", "id": "ff3e0079-068c-49f0-b1fe-3fa8544d91f2",
// "flvUrl": "http://106.74.152.123:10000/sms/34020000002020000001/flv/hls/34020000001320000011_34020000001320000011.flv", "projectId": "HT6YXM-202303232023030010",
// "id": "ff3e0079-068c-49f0-b1fe-3fa8544d91f2", "projectName": "A区科创园"
// "projectId": "HT6YXM-202303232023030010", }],
// "projectName": "A区科创园" "total": 4
// }], }
// "total": 4 }*/
// } const resp = await axios.get("./jd", {
// } params: queryParams,
const resp = await axios.get("./jd", { });
params: queryParams,
});
cameraList.value = resp.data.rows; cameraList.value = resp.data.rows;
total.value = resp.data.total; total.value = resp.data.total;
cameraLoading.value = false; cameraLoading.value = false;
}; };
const loadImageList = async () => { const loadImageList = async () => {
// const resp = await axios.get(
// `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
// ); // 摄像头列表为空时,获取图片列表
// TODO:test
const resp = await axios.get( const resp = await axios.get(
`./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}` `./jd?cmd=com.awspaas.user.apps.cmp_photo_list&sid=${sid}&proId=${queryParams.query}`
); // 摄像头列表为空时,获取图片列表 ); // 摄像头列表为空时,获取图片列表

4
src/main.js
View File

@ -8,6 +8,7 @@ import "./assets/fonts/iconfont.css";
import { createPinia } from "pinia"; import { createPinia } from "pinia";
// const Home = { template: "<div>Home</div>" }; // const Home = { template: "<div>Home</div>" };
// const About = { template: "<div>About</div>" }; // const About = { template: "<div>About</div>" };
console.log('load end')
const pinia = createPinia(); const pinia = createPinia();
// 2. 定义一些路由 // 2. 定义一些路由
// 每个路由都需要映射到一个组件。 // 每个路由都需要映射到一个组件。
@ -25,5 +26,6 @@ const pinia = createPinia();
// history: createWebHashHistory(), // history: createWebHashHistory(),
// routes, // `routes: routes` 的缩写 // routes, // `routes: routes` 的缩写
// }); // });
console.log('create pinia')
createApp(App).use(pinia).mount("#app"); createApp(App).use(pinia).mount("#app");
console.log('create app')

1
vue.config.js
View File

@ -20,6 +20,7 @@ module.exports = defineConfig({
} }
}, },
}, },
// FIXME
publicPath: "./", publicPath: "./",
assetsDir: "../apps/com.awspaas.user.apps.cmp/monitor", assetsDir: "../apps/com.awspaas.user.apps.cmp/monitor",
}); });

45
yarn.lock
View File

@ -3888,6 +3888,11 @@ ignore@^5.2.0:
resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a" resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ== integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
immediate@~3.0.5:
version "3.0.6"
resolved "https://registry.npmmirror.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
immutable@^4.0.0: immutable@^4.0.0:
version "4.1.0" version "4.1.0"
resolved "https://registry.npmmirror.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef" resolved "https://registry.npmmirror.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
@ -4173,6 +4178,16 @@ jsonfile@^6.0.1:
optionalDependencies: optionalDependencies:
graceful-fs "^4.1.6" graceful-fs "^4.1.6"
jszip@^3.10.1:
version "3.10.1"
resolved "https://registry.npmmirror.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
dependencies:
lie "~3.3.0"
pako "~1.0.2"
readable-stream "~2.3.6"
setimmediate "^1.0.5"
kind-of@^6.0.2: kind-of@^6.0.2:
version "6.0.3" version "6.0.3"
resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd" resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@ -4206,6 +4221,13 @@ levn@^0.4.1:
prelude-ls "^1.2.1" prelude-ls "^1.2.1"
type-check "~0.4.0" type-check "~0.4.0"
lie@~3.3.0:
version "3.3.0"
resolved "https://registry.npmmirror.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
dependencies:
immediate "~3.0.5"
lilconfig@^2.0.3: lilconfig@^2.0.3:
version "2.0.6" version "2.0.6"
resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4" resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
@ -4779,6 +4801,11 @@ p-try@^2.0.0:
resolved "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" resolved "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
pako@~1.0.2:
version "1.0.11"
resolved "https://registry.npmmirror.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
param-case@^3.0.4: param-case@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5" resolved "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
@ -5357,6 +5384,19 @@ readable-stream@^3.0.6, readable-stream@^3.4.0:
string_decoder "^1.1.1" string_decoder "^1.1.1"
util-deprecate "^1.0.1" util-deprecate "^1.0.1"
readable-stream@~2.3.6:
version "2.3.8"
resolved "https://registry.npmmirror.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
dependencies:
core-util-is "~1.0.0"
inherits "~2.0.3"
isarray "~1.0.0"
process-nextick-args "~2.0.0"
safe-buffer "~5.1.1"
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
readdirp@~3.6.0: readdirp@~3.6.0:
version "3.6.0" version "3.6.0"
resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@ -5657,6 +5697,11 @@ serve-static@1.15.0:
parseurl "~1.3.3" parseurl "~1.3.3"
send "0.18.0" send "0.18.0"
setimmediate@^1.0.5:
version "1.0.5"
resolved "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
setprototypeof@1.1.0: setprototypeof@1.1.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656" resolved "https://registry.npmmirror.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"