Итак, я создаю приложение для просмотра потоков локальных IP-камер. У меня есть компонент, который передает потоки MJPEG по сети, а затем отображает их в компоненте MJPG.vue. Это работает очень хорошо, и, как я ожидаю.
Проблема, с которой я сталкиваюсь, заключается в том, что, оказавшись внутри MJPG.vue, пользователь может щелкнуть потоковое изображение, чтобы перейти в дополнительный режим «воспроизведения», который позволит им получить доступ к записанным данным. Поэтому мне нужно повторно использовать один и тот же компонент MJPG.vue в представлении воспроизведения. Второй экземпляр компонента MJPG.vue работает неправильно и в какой-то момент является точной копией первого экземпляра. Если я приостанавливаю воспроизведение первого компонента, второй экземпляр компонента приостанавливается. Если я приостанавливаю второй экземпляр, первый в фоновом режиме приостанавливается.
Вот запутанная часть. Если я вручную жестко закодирую РАЗЛИЧНЫЙ поток с камеры во втором экземпляре компонента, оба эти компонента будут транслироваться независимо друг от друга и работать как положено. Похоже, что Vue повторно использует один и тот же экземпляр дважды, а каждый экземпляр компонента является его собственным.
MJPG.vue
<template>
<img ref="img" :src="img.src" style="border:1px solid white" height=500 width=500 />
</template>
<script>
export default {
props: {
camera: {
type: Object,
required: true
},
aspectRatio: {
type: Number
}
},
computed: {
isPlay() {
return this.$store.state.DVR.isPlay;
},
.......
},
watch: {
isPlay(n) {
n ? this.play() : this.pause();
},
img(n, o) {
if (o.src !== '') {
// Old img has a real blob url, revoke it to clean up memory.
URL.revokeObjectURL(o.src); // Must be done for garbage collection, or else memory leaks will form.
}
if (n.error === 204) {
// Image didnt get sent back from the API/Error or problem with image?
this.errorCount++;
} else {
this.errorCount = 0;
this.setImgSize();
this.imageBuffer.src = n.src; // Buffer image is so we can determine the real size of the frame received.
}
},
layoutChanged() {
this.$nextTick(function() {
this.getWrapperSize();
this.setImgSize();
});
},
errorCount() {
// There seems to be some problems with the stream, it could be down. We need to calculate how long to keep checking for images.
if (this.errorCount * this.framerate >= this.timeout * 1000) {
this.pause();
this.streamDown();
}
}
},
data() {
return {
isLoading: true, // If the stream is loading or not.
display: false, // Used in v-if to show the img to the user.
img: '', // The src attribute of the image blob(blob:url) the user will see.
timeout: 15, // Seconds until stream connection error timeout.
errorCount: 0, // Stream error counter.
isDown: false, // If the stream is believed to be down.
backgroundWorker: null, // Background worker that handles the setTimeout lag issues.
backgroundWorkerGW: null, // Background worker that handles the setTimeout lag issues.
imageBuffer: new Image(), // Buffer image to collect received image sizes.
imgHeight: 0, // Height of the image the user will see.
imgWidth: 0, // Width of the image the user will see.
imgRatio: null, // Then aspect ratio of the imageBuffer, used to calculate image size for its container.
wrapperHeight: 0, // Wrapper div height.
wrapperWidth: 0, // Wrapper div width.
showOverflowOnActual: false, // Should the scrollbars be displayed on the image? Used for Actual image size setting.
framerate: 0 // The framerate that the API is getting new images.
};
},
mounted() {
// Do some stream setup here...
},
methods: {
// Streaming functions here...
}
</script>
<style scoped>
.....
</style>