vue-media-recorder

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

Installation

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

npm install vue-media-recorder

Usage

To use vue-media-recorder in your project all thats needed is to add the following code to your component.

<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>

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	'✓'

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT