farhadnowzari / easy-vue-camera

11 stars 11 forks source link

V-model not being altered with the recorded data #7

Open jonalxh opened 2 years ago

jonalxh commented 2 years ago

Hi, I'm currently trying to use your component in the following way.

"easy-js-camera": "^2.1.0",
"easy-vue-camera": "^1.0.5",
"nuxt": "^2.15.8",
"vue": "^2.6.14"

Template: <v-easy-camera v-model="video" ref="recorder" @input="log" @close="log"></v-easy-camera>

Script:

export default {
  components: {
      'v-easy-camera': () => import('easy-vue-camera'),
  },
  data() {
    started: false,
    video: null
  },
  methods: {
    toggleRecorder() {
      if (this.started) {
        this.$refs.recorder.stop()
      } else {
        this.$refs.recorder.start()
      }
    },
    log(evt) {
      console.log(evt) // Always prints undefined
    }
  }
}

As you can see, I use the toggleRecorder method to start/stop the video recorder, It works good, but when I stop the video the v-model is never populated with the video data, I've tried to listen to the @close and @input events but nothing is triggered.

Can you tell me please what am I doing bad? Thanks a lot

farhadnowzari commented 2 years ago

Hi @jonalxh

For the v-model to work, you need to call the snap method instead of the stop. Stop() will only stops the camera but snap will save the picture into the v-model