Resolution of snapshot about vue-web-cam HOT 7 CLOSED

The webcam resolution can be passed as a constraint with the getUserMedia call. I have submitted a pull request #29

from vue-web-cam.

@PrimozRome @medvesekg Thank you. I've tagged and released it as v1.4.4.

from vue-web-cam.

@PrimozRome I think it's based on the size of the canvas. Did you try making the canvas bigger?

from vue-web-cam.

Well don't think so, because my canvas is smaller then 640x480 which is the resolution of image I get....

And I would not like to make canvas of the video object bigger as I have it now...

It would be cool if output resolution was somehow set up as props?

from vue-web-cam.

@PrimozRome How do you even set the output resolution? We capture the image using:

this.getCanvas().toDataURL(this.screenshotFormat);

and looking at the API on mozilla i don't see any way to configure it.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

Any idea how this is done?

from vue-web-cam.

@VinceG I am using components actions to capture the image. I have a button and I call this on click event

takeSnapshot() {
  this.snapshot = this.$refs.webCam.capture()
},

In your component you are setting the canvas size like this. Isn't it possible to have canvas width and height like parameters, instead of the size of video element?

    getCanvas() {
      let video = this.$refs.video;
      if (!this.ctx) {
        let canvas = document.createElement("canvas");
        canvas.height = video.videoHeight;
        canvas.width = video.videoWidth;
        this.canvas = canvas;
        this.ctx = canvas.getContext("2d");
      }
      const { ctx, canvas } = this;
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      return canvas;
    }

from vue-web-cam.

@VinceG what about this https://webrtc.github.io/samples/src/content/getusermedia/resolution/

from vue-web-cam.