0.1.25 • Published 4 years ago

vue-media-recorder v0.1.25

Weekly downloads
187
License
MIT
Repository
github
Last release
4 years ago

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

PropValueIsRequiredExample
uploadUrlThe server url to which the component will upload the video totrue'localhost:3000' / 'foo-bar.com'
recordBtnContentcontent for the video record buttonfalse'⬤'
stopBtnContentcontent for the stop recording buttonfalse'◼'
cancelBtnContentbutton for clearing the recorderd video contentfalse'ⅹ'
doneBtnContentbutton to confirm video is fine and handling its urlfalse'✓'

PhotoCapture Component Props

PropValueIsRequiredExample
capturedBtnContentcontent for the image capture buttonfalse'📷'
cancelBtnContentbutton for clearing the captured image contentfalse'ⅹ'
doneBtnContentbutton to confirm image is fine and handling its base64 formatfalse'✓'

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

0.1.25

4 years ago

0.1.24

4 years ago

0.1.22

4 years ago

0.1.23

4 years ago

0.1.21

4 years ago

0.1.20

4 years ago

0.1.19

4 years ago

0.1.18

4 years ago

0.1.17

4 years ago

0.1.16

4 years ago

0.1.15

4 years ago

0.1.14

4 years ago

0.1.13

4 years ago

0.1.12

4 years ago

0.1.11

4 years ago

0.1.10

4 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago