Блог

У меня есть компонент, в котором можно делать скриншоты видео. Они хранятся в массиве и отображаются внутри компонента под видео на холсте.

Однако я хочу получить доступ к этому массиву скриншотов в другом компоненте (Gallery.vue) и отобразить там все скриншоты. Итак, как только нажата кнопка скриншота, соответствующий скриншот должен отображаться в другом компоненте.

Вот как выглядит мой компонент Stream.vue, который содержит видео и кнопку скриншота (эти компоненты работают нормально):

 <template>
    <div id="app">
        <div>
            <video ref="video" id="video" width="1024" height="576" autoplay></video>
        </div>
        <div>
            <button class="btn btn-dark btn-lg" style="margin-top: 5px; margin-bottom: 7px" id="snap" v-on:click="capture()">
                <i class="fa fa-camera"></i>
            </button>
        </div>
        <canvas ref="canvas" id="canvas" width="640" height="480"></canvas>
        <ul>
            <li v-for="c in captures" :key="c.id">
                <img v-bind:src="c" height="50" />
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "camera",
    data() {
        return {
            video: {},
            canvas: {},
            captures: [],
        };
    },
    mounted() {
        this.initVideo();
    },
    methods: {
        initVideo() {
            this.video = this.$refs.video;
            if (
                "mediaDevices" in navigator amp;amp;
                "getUserMedia" in navigator.mediaDevices
            ) {
                navigator.mediaDevices
                    .getUserMedia({video: true})
                    .then((stream) => {
                        const videoPlayer = document.querySelector("video");
                        videoPlayer.srcObject = stream;
                        videoPlayer.play();
                    });
            } else {
                alert("Livestream currently unavailable.");
            }
        },
        capture() {
            this.canvas = this.$refs.canvas;
            // this.canvas = document.querySelector("canvas");
            // this.canvas = document.getElementById("galleryCanvas");
            var context = this.canvas.getContext("2d");
            context.drawImage(this.video, 0, 0, 640, 480);
            this.captures.push(this.canvas.toDataURL("image/png"));
        },
    },
};
</script>
  

Компонент галереи, в котором фактически должны быть доступны и отображаться скриншоты, выглядит следующим образом:

 <template>
    <div class="gallery" id="mainDiv">
        <canvas ref="canvas" class="galleryCanvas" id="galleryCanvas" width="640" height="480" v-bind:captures="capture"></canvas>
        <ul>
            <li v-for="screenshot in captures" :key="screenshot.id">
                <img v-bind:src="screenshot" height="50" />
            </li>
        </ul>
        <!-- <div class="canvas" id="galleryCanvas"></div> -->
    </div>
</template>

<script>
export default {
    name: "gallery",

    props: {
        captures: Array,
    },
};
</script>
  

До сих пор я пробовал несколько вещей. Я попытался получить доступ к холсту компонента галереи через

 this.canvas = document.querySelector("canvas");
  

или по его идентификатору через

 this.canvas = document.getElementById("galleryCanvas");
  

но все это не сработало бы. Он просто отображает один снимок экрана в этом компоненте, и как только я нажимаю кнопку скриншота, он перезаписывает снимок экрана вместо отображения нового снимка экрана рядом со старым.

Это может показаться довольно простой проблемой, но я действительно борюсь с этим. Я действительно был бы признателен за любую помощь.

Заранее большое вам спасибо!