Vue-media-recorder NPM

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