lundi 31 mai 2021

Un-drawing an image in vuejs

I'm new to vuejs and I've been trying to figure out how to take selfie pictures. Presently I have a video and canvas component within a div that yields a camera stream. The stream stops and a picture is shown when the snap button is clicked.

I wish to add functionality that allows me to click the retake button and have the live video feed of myself come back and the old picture be discarded from the canvas. I have tried to use key binding of the variable retake to re-render the video and canvas components upon the call of the retakePicture method, but this does not seem to work.

The code snippets for video, canvas, snap, and retake are below: -

<video v-show="showVideo" :key="retake" id="video" ref="video" autoplay class="feed">
</video>
<canvas v-show="!showVideo" :key="retake" id="canvas" ref="canvas" class="canvas">
</canvas>

<button class="snap" v-if="!showVideo" :key="retake" v-on:click="retakePicture">
<p><span class="justify-content: top">Retake</span></p></button>

<button class="snap" v-if="showVideo" :key="retake" v-on:click="takePicture">
<p><span class="justify-content: top">Snap</span></p></button>

Below are the functions takePicture and retakePicture, keep in mind showVideo is initialised to true when the page is first rendered. Besides these there's a standard init() method that initialises the video stream using the navigator.mediaDevices.getUserMedia(...) function.

        takePicture() {
            console.log("TAKE PICTURE");
            let context = this.$refs.canvas.getContext('2d');
            this.$refs.canvas.setAttribute('width', this.$refs.video.offsetWidth * 1.005)
            this.$refs.canvas.setAttribute('height', this.$refs.video.offsetHeight)
            context.drawImage(this.video, 0, 0, this.video.videoWidth, this.video.videoHeight)
            this.showVideo = false;
        },

        retakePicture(){
            this.$refs.canvas.getContext('2d').clearRect(0, 0, this.video.offsetWidth, this.video.offsetHeight)
            this.retake = !this.retake
            console.log("retake")
            this.showVideo = true
        }

Screen before picture is taken (ie snap is clicked) Screen after picture is taken (ie after snap is clicked)




Aucun commentaire:

Enregistrer un commentaire