This commit is contained in:
2023-05-22 10:11:55 +08:00
parent 50f75ff394
commit 9bd8ee2899
2 changed files with 5 additions and 92 deletions

View File

@ -25,7 +25,7 @@
class="time-slider"
reverse
vertical
@update-value="getPlaybackProcess"></n-slider>
@update-value="setPlaybackProcess"></n-slider>
<div ref="rotateElementRef" :class="`modal`">
<video
ref="videoElementRef"
@ -223,10 +223,6 @@ const closePlayModal = async () => {
`${url.protocol}//${url.host}/api/v1/playback/stop?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&token=${tokenStore.token}`
);
// document.removeEventListener("touchstart", handleZoomStart)
// document.removeEventListener("touchend", handleZoomEnd)
// document.removeEventListener("touchmove", handleZooming)
// console.log('zoom event unbind')
};
// url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv",
@ -337,7 +333,7 @@ const playbackProcess = ref(0)
* @param value 秒
* @return {Promise<void>}
*/
const getPlaybackProcess = debounce(async (value) => {
const setPlaybackProcess = debounce(async (value) => {
if (!tokenStore.token) {
await tokenStore.fetchToken();
}
@ -347,20 +343,16 @@ const getPlaybackProcess = debounce(async (value) => {
`${url.protocol}//${url.host}/api/v1/playback/control?serial=${serial}&code=${serial}&streamid=${playbackStreamId.value}&command=play&range=${value}&token=${tokenStore.token}`
);
}, 500)
onUnmounted(() => {
console.log("destroy player here");
if (flvPlayer) {
flvDestroy();
}
// document.removeEventListener("touchstart", handleZoomStart)
// document.removeEventListener("touchend", handleZoomEnd)
// document.removeEventListener("touchmove", handleZooming)
});
const lastDistance = ref(0)
const scaleFactor = ref(1)
const zoomStatus = ref(0) // 0 stop, 1 zoomin, 2 zoomout
const isToday = ref(false)
const handleConfirmRange = (value) => {
@ -420,85 +412,6 @@ watch(playbackFlvUrl, async (url, oldUrl) => {
})
/*摄像头缩放操作*/
function handleZoomStart(event) {
console.log(event.touches.length)
if (event.touches.length === 2) {
// 计算两个手指的距离
let touch1 = event.touches[0];
let touch2 = event.touches[1];
lastDistance.value = Math.sqrt(
Math.pow(touch2.pageX - touch1.pageX, 2) +
Math.pow(touch2.pageY - touch1.pageY, 2)
);
// 防止整个网页被放大
event.preventDefault();
}
}
function handleZooming(event) {
console.log('zoom in')
if (event.touches.length === 2) {
// 计算两个手指的距离
let touch1 = event.touches[0];
let touch2 = event.touches[1];
let distance = Math.sqrt(
Math.pow(touch2.pageX - touch1.pageX, 2) +
Math.pow(touch2.pageY - touch1.pageY, 2)
);
if (distance - lastDistance.value > 0) {
/*如果距离增加则放大*/
zoomStatus.value = 1
} else if (lastDistance.value - distance > 0) {
/*如果距离减小则缩小*/
zoomStatus.value = 2
}
// 计算缩放比例
scaleFactor.value *= distance / lastDistance.value;
// 保存上一次的距离
lastDistance.value = distance;
console.log(scaleFactor.value)
console.log(lastDistance.value)
// 防止整个网页被放大
event.preventDefault();
}
}
function handleZoomEnd(event) {
zoomStatus.value = 0
if (event.touches.length < 2) {
// 重置缩放比例和距离
scaleFactor.value = 1;
lastDistance.value = 0;
}
}
// watch(zoomStatus, async (value, oldValue) => {
// if (!tokenStore.token) {
// await tokenStore.fetchToken();
// }
// const serial = source.value.split("/flv/hls/")[1].split("_")[0];
// const url = new URL(source.value);
// if (value === 0) {
// await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=stop&token=${tokenStore.token}`
// );
// } else if (value === 1) {
// oldValue !== 0 && await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=stop&token=${tokenStore.token}`
// );
// await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=zoomin&token=${tokenStore.token}`
// );
// } else if (value === 2) {
// oldValue !== 0 && await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=stop&token=${tokenStore.token}`
// );
// await axios.get(
// `${url.protocol}//${url.host}/api/v1/control/ptz?serial=${serial}&code=${serial}&command=zoomout&token=${tokenStore.token}`
// );
// }
// })
</script>
<style lang="scss" scoped>
@import "../assets/fonts/iconfont.css";

View File

@ -144,7 +144,7 @@ const loadProjectList = async () => {
// "CEDATE": 1703260800000,
// "PROFILE": "",
// "ACCDATE": 1703260800000,
// "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"
// "ID": "a0fb6df5-48e4-442f-8b9d-da5861c1bf41"q
// }]
// }
const resp = await axios.get(