105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<video ref="videoPlayer" autoplay playsinline></video>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import axios from "axios";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
videoPlayer: null,
|
|||
|
|
source: null, // 用于存储axios的CancelToken.source对象，以便后续取消请求
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.videoPlayer = this.$refs.videoPlayer;
|
|||
|
|
this.startVideoStream();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
startVideoStream() {
|
|||
|
|
//let url = "https://gep.ljsea.top/device/video_feed?" +"&device_id=" +localStorage.getItem("realvp_device_id") +"&token=" +localStorage.getItem("token"); //视频地址
|
|||
|
|
|
|||
|
|
const deviceId = localStorage.getItem("realvp_device_id"); // 替换为实际存储设备id的方式和键名
|
|||
|
|
const token = localStorage.getItem("token"); // 替换为实际存储token的方式和键名
|
|||
|
|
const url = `https://gep.ljsea.top/device/video_feed?device_id=${deviceId}&token=${token}`;
|
|||
|
|
this.source = axios.CancelToken.source();
|
|||
|
|
axios
|
|||
|
|
.get(url, {
|
|||
|
|
responseType: "arraybuffer",
|
|||
|
|
cancelToken: this.source.token,
|
|||
|
|
})
|
|||
|
|
.then((response) => {
|
|||
|
|
console.log("获取视频流成功");
|
|||
|
|
const reader = response.data
|
|||
|
|
.pipeThrough(new window.TextDecoderStream())
|
|||
|
|
.getReader();
|
|||
|
|
const processData = () => {
|
|||
|
|
reader.read().then(({ done, value }) => {
|
|||
|
|
if (done) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const dataString = new window.TextDecoder().decode(value);
|
|||
|
|
const parts = dataString.split("\r\n");
|
|||
|
|
|
|||
|
|
// 检查是否包含关键的视频流格式标识
|
|||
|
|
const hasFrameMarker = parts.some((part) =>
|
|||
|
|
part.startsWith("--frame")
|
|||
|
|
);
|
|||
|
|
const hasContentTypeMarker = parts.some(
|
|||
|
|
(part) => part === "Content-Type: image/jpeg"
|
|||
|
|
);
|
|||
|
|
if (!hasFrameMarker || !hasContentTypeMarker) {
|
|||
|
|
console.error("视频流数据格式不符合预期，无法解析");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
parts.forEach((part) => {
|
|||
|
|
if (part.startsWith("--frame")) {
|
|||
|
|
const imageData = [];
|
|||
|
|
let isImageData = false;
|
|||
|
|
parts.forEach((subPart) => {
|
|||
|
|
if (isImageData) {
|
|||
|
|
imageData.push(subPart);
|
|||
|
|
}
|
|||
|
|
if (subPart === "Content-Type: image/jpeg") {
|
|||
|
|
isImageData = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
const imageBlob = new Blob(imageData, { type: "image/jpeg" });
|
|||
|
|
const objectURL = URL.createObjectURL(imageBlob);
|
|||
|
|
this.videoPlayer.src = objectURL;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
processData();
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
processData();
|
|||
|
|
})
|
|||
|
|
.catch((error) => {
|
|||
|
|
if (axios.isCancel(error)) {
|
|||
|
|
console.log("请求已取消");
|
|||
|
|
} else {
|
|||
|
|
console.error("获取视频流出错:", error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
beforeUnmount() {
|
|||
|
|
if (this.source) {
|
|||
|
|
this.source.cancel("组件即将销毁，取消视频流请求");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
video {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
</style>
|