Question

所以我要构建的是一个用于查看本地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>

Answer 1

没有足够的声誉来发表评论；）

如果是同一个实例问题，请尝试设置取消键，例如：

<component :key="something1" :is="stream" />
<component :key="something2" :is="stream" />

像这里建议的：v-bind:key="question.id"

同一Vue组件在同一页面上两次复制组件视图

1 个答案: