Skip to content

Commit c302843

Browse files
author
Filippo Conti
committed
initial commit
0 parents  commit c302843

29 files changed

+11460
-0
lines changed

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not ie <= 8

‎.eslintrc.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'eslint:recommended'
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint'
16+
}
17+
}

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
/tests/e2e/videos/
6+
/tests/e2e/screenshots/
7+
8+
# local env files
9+
.env.local
10+
.env.*.local
11+
12+
# Log files
13+
npm-debug.log*
14+
yarn-debug.log*
15+
yarn-error.log*
16+
17+
# Editor directories and files
18+
.idea
19+
.vscode
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw*

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2018 Filippo Conti
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
# vue-record
2+
3+
> custom components for MediaRecorder API
4+
5+
## Installation
6+
7+
Download the project using your favourite package manager:
8+
9+
```
10+
npm install @codekraft-studio/vue-record
11+
yarn add @codekraft-studio/vue-record
12+
```
13+
14+
Load it inside your project and use it:
15+
16+
```js
17+
import Vue from 'vue'
18+
import VueRecord from '@codekraft-studio/vue-record'
19+
20+
Vue.use(VueRecord)
21+
```
22+
23+
Now you have access to the global defined components, here an example:
24+
25+
```html
26+
<vue-record-audio />
27+
<vue-record-video />
28+
```
29+
30+
## Usage
31+
32+
Use the components in your template with different modes and properties to customize the behavior and the recording output.
33+
34+
#### Modes
35+
36+
The are only two usage modes and can be selected with the __mode__ property:
37+
38+
* __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_.
39+
* __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_.
40+
41+
#### Events
42+
43+
* __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.
44+
* __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.
45+
46+
By default it's on __hold__ mode, so the recording start when the button is pressed and stops when the button is released.
47+
But you can change this behaviour using a different mode, the available modes are: `hold` and `press`.
48+
49+
---
50+
51+
## Examples
52+
53+
### Recording Audio
54+
55+
It's simple as adding the component and listening for the __result__ event:
56+
57+
```html
58+
<vue-record-audio @result="onResult" />
59+
```
60+
61+
```js
62+
export default {
63+
methods: {
64+
onResult (data) {
65+
console.log('The blob data:', data);
66+
console.log('Downloadable audio', window.URL.createObjectURL(data));
67+
}
68+
}
69+
}
70+
```
71+
72+
### Recording Video
73+
74+
It's simple as adding the component and listening for the __result__ event:
75+
76+
```html
77+
<vue-record-video @result="onResult" />
78+
```
79+
80+
```js
81+
export default {
82+
methods: {
83+
onResult (data) {
84+
console.log('The blob data:', data);
85+
console.log('Downloadable audio', window.URL.createObjectURL(data));
86+
}
87+
}
88+
}
89+
```
90+
91+
92+
93+
## Project setup
94+
95+
```
96+
yarn install
97+
```
98+
99+
### Compiles and hot-reloads for development
100+
101+
```
102+
yarn run serve
103+
```
104+
105+
### Compiles and minifies for production
106+
107+
```
108+
yarn run build
109+
```
110+
111+
### Run your tests
112+
113+
```
114+
yarn run test
115+
```
116+
117+
### Lints and fixes files
118+
119+
```
120+
yarn run lint
121+
```
122+
123+
### Run your end-to-end tests
124+
125+
```
126+
yarn run test:e2e
127+
```
128+
129+
### Run your unit tests
130+
131+
```
132+
yarn run test:unit
133+
```

‎babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

‎cypress.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"pluginsFile": "tests/e2e/plugins/index.js"
3+
}

‎jest.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
module.exports = {
2+
moduleFileExtensions: [
3+
'js',
4+
'jsx',
5+
'json',
6+
'vue'
7+
],
8+
transform: {
9+
'^.+\\.vue$': 'vue-jest',
10+
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
11+
'^.+\\.jsx?$': 'babel-jest'
12+
},
13+
moduleNameMapper: {
14+
'^@/(.*)$': '<rootDir>/src/$1'
15+
},
16+
snapshotSerializers: [
17+
'jest-serializer-vue'
18+
],
19+
testMatch: [
20+
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
21+
],
22+
testURL: 'http://localhost/'
23+
}

‎package.json

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "vue-record",
3+
"version": "0.0.1",
4+
"main": "dist/VueRecord.common.js",
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build --target lib --name VueRecord src/components/index.js",
8+
"build:demo": "vue-cli-service build --dest demo",
9+
"publish:demo": "git subtree push --prefix demo origin gh-pages",
10+
"lint": "vue-cli-service lint",
11+
"test:e2e": "vue-cli-service test:e2e",
12+
"test:unit": "vue-cli-service test:unit"
13+
},
14+
"dependencies": {
15+
"vue": "^2.5.17"
16+
},
17+
"devDependencies": {
18+
"@vue/cli-plugin-babel": "^3.1.1",
19+
"@vue/cli-plugin-e2e-cypress": "^3.1.2",
20+
"@vue/cli-plugin-eslint": "^3.1.5",
21+
"@vue/cli-plugin-unit-jest": "^3.1.1",
22+
"@vue/cli-service": "^3.1.4",
23+
"@vue/test-utils": "^1.0.0-beta.20",
24+
"babel-core": "7.0.0-bridge.0",
25+
"babel-eslint": "^10.0.1",
26+
"babel-jest": "^23.6.0",
27+
"eslint": "^5.8.0",
28+
"eslint-plugin-vue": "^5.0.0-0",
29+
"lint-staged": "^7.2.2",
30+
"node-sass": "^4.9.0",
31+
"sass-loader": "^7.0.1",
32+
"vue-template-compiler": "^2.5.17"
33+
},
34+
"gitHooks": {
35+
"pre-commit": "lint-staged"
36+
},
37+
"lint-staged": {
38+
"*.js": [
39+
"vue-cli-service lint",
40+
"git add"
41+
],
42+
"*.vue": [
43+
"vue-cli-service lint",
44+
"git add"
45+
]
46+
}
47+
}

‎postcss.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
}

‎public/favicon.ico

1.12 KB
Binary file not shown.

‎public/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>Vue Record</title>
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
10+
</head>
11+
<body>
12+
<noscript>
13+
<strong>We're sorry but vue-record doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14+
</noscript>
15+
<div id="app"></div>
16+
<!-- built files will be auto injected -->
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)