I'm working with BootstrapVue and want to have a integrated camera-function in my project. Taking a picture works well and is handled in function takePicture().

Now I need following - after taking my picture I want to be able to click on my button upload photo and convert my taken picture to base64.

I've tried to find a solution in different forums but nothing really helped me out - so I would be very pleased if you can help me out! Thanks in advance!

Following is standing in my template:

<div>
  <video class="mb-3" ref="video" id="video" width="100%" height="100%" autoplay />
  <canvas class="mb-3" id="responsive-canvas"></canvas>
  <div class="col-md-12">
    <b-button class="mb-2" variant="block success" @click="takePicture()">Make photo</b-button>
  </div>
  <div class="col-md-12">
    <b-button class="mb-2" variant="block success" @click="uploadPicture()">upload photo</b-button>
  </div>
</div>

my script:

export default {
  data() {
    return {
      video: {play: null, onplay: null, srcObject: null},
      canvas: {},
    };
  },

  mounted() {
    this.video = this.$refs.video;
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
        this.video.srcObject = stream;
        this.video.play();
        this.video.onplay = function () {};
        this.video.play();
      });
    }

    var canvas = document.getElementById("responsive-canvas");
    var heightRatio = 0.75;
    canvas.height = canvas.width * heightRatio;
  },

  methods: {
    uploadPicture() {
      //need code here
    },

    takePicture() {
      const picture = document.querySelector("canvas");
      const ctx = picture.getContext("2d");
      ctx.imageSmoothingEnabled = true;
      ctx.imageSmoothingQuality = "high";
      ctx.drawImage(document.querySelector("video"), 0, 0, picture.width, picture.height);

      this.takenPicture = ctx.drawImage(document.querySelector("video"), 0, 0, picture.width, picture.height);
    },
  },
};