vue-media-recorder

0.1.25 • Public • Published

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

Package Sidebar

Install

npm i vue-media-recorder

Weekly Downloads

222

Version

0.1.25

License

MIT

Unpacked Size

895 kB

Total Files

43

Last publish

Collaborators

  • orbracha23
  • yovelbecker