# vue-media-recorder

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

Latest version **0.1.25** (published 2019-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-media-recorder
pnpm add vue-media-recorder
yarn add vue-media-recorder
bun add vue-media-recorder
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.25 |
| Published | 2019-12-04 |
| First published | 2019-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 873.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Yovel Becker |
| Maintainers | orbracha23, yovelbecker |
| Keywords | vue, vueJS, html5, js, web-sockets, media-devices, media-recorder |

## Links

- npm: https://www.npmjs.com/package/vue-media-recorder
- Repository: https://github.com/YovelBecker/vue-media-recorder
- Homepage: https://github.com/YovelBecker/vue-media-recorder#readme
- Issues: https://github.com/YovelBecker/vue-media-recorder/issues
- npm.io page: https://npm.io/package/vue-media-recorder

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.3
- [register-service-worker](https://npm.io/package/register-service-worker.md) ^1.6.2

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.25 (latest) — 2019-12-04
- 0.1.24 — 2019-12-03
- 0.1.23 — 2019-12-02
- 0.1.22 — 2019-12-02
- 0.1.21 — 2019-11-26
- 0.1.20 — 2019-10-03
- 0.1.19 — 2019-10-02
- 0.1.18 — 2019-09-26
- 0.1.17 — 2019-09-26
- 0.1.16 — 2019-09-18
- 0.1.15 — 2019-09-15
- 0.1.14 — 2019-09-12
- 0.1.13 — 2019-09-11
- 0.1.12 — 2019-09-11
- 0.1.11 — 2019-09-05
- … 10 more at https://npm.io/package/vue-media-recorder/versions

## README

# 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](https://nodejs.org) to install vue-media-recorder.

```bash
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](https://github.com/vyaron/misterRecorder)


## 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](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/vue-media-recorder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._