{"id":20467039,"url":"https://github.com/codekraft-studio/vue-record","last_synced_at":"2025-04-13T09:11:10.259Z","repository":{"id":37732302,"uuid":"161494404","full_name":"codekraft-studio/vue-record","owner":"codekraft-studio","description":"VueJs components for MediaRecorder API","archived":false,"fork":false,"pushed_at":"2022-11-28T04:53:10.000Z","size":1297,"stargazers_count":97,"open_issues_count":22,"forks_count":57,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T00:54:14.516Z","etag":null,"topics":["mediarecorder","mediarecorder-api","vuejs","vuejs-components"],"latest_commit_sha":null,"homepage":"https://codekraft-studio.github.io/vue-record/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codekraft-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-12T13:45:03.000Z","updated_at":"2025-03-02T10:40:17.000Z","dependencies_parsed_at":"2022-09-15T14:14:01.009Z","dependency_job_id":null,"html_url":"https://github.com/codekraft-studio/vue-record","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-record","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-record/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-record/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-record/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codekraft-studio","download_url":"https://codeload.github.com/codekraft-studio/vue-record/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688565,"owners_count":21145766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mediarecorder","mediarecorder-api","vuejs","vuejs-components"],"created_at":"2024-11-15T13:26:51.388Z","updated_at":"2025-04-13T09:11:10.236Z","avatar_url":"https://github.com/codekraft-studio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-record\n\n\u003e custom components for MediaRecorder API\n\n[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![License][license-image]][license-url]\n\nCheckout the [demo](https://codekraft-studio.github.io/vue-record/) to see it in action.\n\n## Installation\n\nDownload the project using your favourite package manager:\n\n```\nnpm install @codekraft-studio/vue-record\n```\n\nLoad it inside your project and use it:\n\n```js\nimport Vue from 'vue'\nimport VueRecord from '@codekraft-studio/vue-record'\n\nVue.use(VueRecord)\n```\n\nNow you have access to the global defined components, here an example:\n\n```html\n\u003cVueRecordAudio /\u003e\n\u003cVueRecordVideo /\u003e\n```\n\n## Usage\n\nUse the components in your template with different modes and properties to customize the behavior and the recording output.\n\nBoth of the provided components can be used as the following pseudo code example:\n\n```html\n\u003cComponent :mode=\"recMode\" @stream=\"onStream\" @result=\"onResult\" /\u003e\n```\n\n#### Modes\n\nThe are only two usage modes and can be selected with the __mode__ property:\n\n* __hold__: Hold is the default mode and it means the recording start when the button is clicked or pressed and stops when is released, basically it _record only when holding the button_.\n* __press__: Press will start the recording once the button is pressed and it will stop the recording when the button is pressed again, so it will _record until stopped_.\n\n#### Events\n\n* __stream__: The stream event is emitted when the user media device stream is captured and contains the original [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) object.\n* __result__: The result event is emitted once a recording has been completed and contains the [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) data of the recording.\n\nBy default it's on __hold__ mode, so the recording start when the button is pressed and stops when the button is released.\nBut you can change this behaviour using a different mode, the available modes are: `hold` and `press`.\n\n---\n\n## Examples\n\n### Recording Audio\n\nIt's simple as adding the component and listening for the __result__ event:\n\n```html\n\u003cvue-record-audio @result=\"onResult\" /\u003e\n```\n\n```js\nexport default {\n  methods: {\n    onResult (data) {\n      console.log('The blob data:', data);\n      console.log('Downloadable audio', window.URL.createObjectURL(data));\n    }\n  }\n}\n```\n\n\u003e We're using [this polyfill](https://github.com/kbumsik/opus-media-recorder) for Safari.\n\n### Recording Video\n\nIt's simple as adding the component and listening for the __result__ event:\n\n```html\n\u003cvue-record-video @result=\"onResult\" /\u003e\n```\n\n```js\nexport default {\n  methods: {\n    onResult (data) {\n      console.log('The blob data:', data);\n      console.log('Downloadable video', window.URL.createObjectURL(data));\n    }\n  }\n}\n```\n\n\u003e It doesn't work on Safari, we should consider [this polyfill](https://github.com/CameraKit/webm-media-recorder).\n\n---\n\n## License\n\nReleased with [MIT License](./LICENSE) © [codekraft-studio](https://github.com/codekraft-studio)\n\n\n[npm-image]: https://badge.fury.io/js/%40codekraft-studio%2Fvue-record.svg\n[npm-url]: https://npmjs.org/package/@codekraft-studio/vue-record\n\n[daviddm-image]: https://david-dm.org/codekraft-studio/vue-record.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/codekraft-studio/vue-record\n\n[license-url]: https://github.com/codekraft-studio/vue-record/blob/master/LICENSE\n[license-image]: https://img.shields.io/badge/license-MIT-blue.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fvue-record","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodekraft-studio%2Fvue-record","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fvue-record/lists"}