Vue.js Take Photo and Video From Webcam Using vue-media-recorder Library Full Tutorial 2020

npm i vue-media-recorder

<template>
    <div>
        <PhotoCapture v-model="imageBase64" />
        <VideoCapture uploadUrl="<example-server-address.com>" v-model="videoUrl" />
    </div>
</template>

<script>
import 'vue-media-recorder/src/assets/scss/main.scss'
import {PhotoCapture, VideoCapture} from 'vue-media-recorder'

export default {
    data(){
        return {
            imageBase64: null,
            videoUrl: null,
        }
    },
    components:{
        PhotoCapture,
        VideoCapture
    }
}
</script>

<div>

<VideoCapture uploadUrl="<example-server-address.com>" v-model="videoUrl" />

</div>

</template>

import 'vue-media-recorder/src/assets/scss/main.scss'

import {PhotoCapture, VideoCapture} from 'vue-media-recorder'

export default {

data(){

return {

imageBase64: null,

videoUrl: null,

}

components:{

PhotoCapture,

VideoCapture

}

</script>

Related posts:

You Might Also Like

Vue.js Images Async Lazy Loading in Carousel and Lists Using Vue2-image-loader Library in Javascript Full Project For Beginners

Vue.js Dynamic JSON Data File Generator With Live Preview From Form Field Values and Download as JSON Blob File in Browser Using Javascript Full Project For Beginners

Vue.js Faker.js Example to Generate Bulk Fake User Name,Email & Phone Number Data in Browser Using HTML5 & Javascript Full Project For Beginners

Leave a Reply Cancel reply