Vue-capture-media NPM

vue-capture-media

vue-capture-media makes it easy to capture media (Microphone, Camera, Video) in your Vue.js apps.

Installation

Use the package manager npm to install vue-capture-media.

npm install vue-capture-media

Usage

Using vue-capture-media is easy:

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

<script>
import {PhotoCapture, VideoCapture} from 'vue-capture-media'

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

VideoCapture Component Usage

For the VideoCaptrue component to work correctly, pass an uploadUrl prop for your server. Kindly see a sample server here:

VideoCapture Server Configuration

VideoCapture Component Props

Prop	Value	IsRequired	Example
uploadUrl	The server url to which the component will upload the video to	true	'localhost:3000' / 'foo-bar.com'
recordBtnContent	content for the video record button	false	'⬤'
stopBtnContent	content for the stop recording button	false	'◼'
cancelBtnContent	button for clearing the recorderd video content	false	'ⅹ'
doneBtnContent	button to confirm video is fine and handling its url	false	'✓'

PhotoCapture Component Props

Prop	Value	IsRequired	Example
capturedBtnContent	content for the image capture button	false	'📷'
cancelBtnContent	button for clearing the captured image content	false	'ⅹ'
doneBtnContent	button to confirm image is fine and handling its base64 format	false	'✓'