https://github.com/proyecto26/record-audio-button-enterprise
🔴 A Web Component for Recording Audio with a swipe gesture inspired by WhatsApp (Enterprise) 💼
https://github.com/proyecto26/record-audio-button-enterprise
angular angular2 angularjs capacitor cordova ionic ionic-framework react reactjs stencil stencil-components stencil-js stenciljs stenciljs-components vanilla-javascript vanilla-js vue vuejs webcomponent webcomponents
Last synced: 2 months ago
JSON representation
🔴 A Web Component for Recording Audio with a swipe gesture inspired by WhatsApp (Enterprise) 💼
- Host: GitHub
- URL: https://github.com/proyecto26/record-audio-button-enterprise
- Owner: proyecto26
- Created: 2019-10-25T01:33:07.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-12T02:25:44.000Z (almost 5 years ago)
- Last Synced: 2024-10-29T22:37:28.097Z (6 months ago)
- Topics: angular, angular2, angularjs, capacitor, cordova, ionic, ionic-framework, react, reactjs, stencil, stencil-components, stencil-js, stenciljs, stenciljs-components, vanilla-javascript, vanilla-js, vue, vuejs, webcomponent, webcomponents
- Homepage: https://proyecto26.com/record-audio-button-enterprise
- Size: 1.98 MB
- Stars: 4
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Record Audio Button (Enterprise)
Web Component built with [Stencil.js](https://github.com/ionic-team/stencil) for *Recording Audio* from **Web** using [Web RTC](https://developer.mozilla.org/docs/Web/API/WebRTC_API) and **Mobile** using native plugins, with a swipe gesture using [Ionic Animations](https://ionicframework.com/docs/utilities/animations) inspired by **WhatsApp**:
```html
```
## Demo 🎮
Do you want to see this web component in action? Check our demo projects for Angular, React, Vue, VanillaJS, etc, yay! 🎉
## Usage 🎉
```html
```
## Getting Started 📖
### Packages
| Project | Package |
| ------- |:-----:|
| **Core** | [`@proyecto26/record-audio-button`](https://github.com/proyecto26/record-audio-button-enterprise)
| **React** | [`@proyecto26/record-audio-button-react`](https://github.com/proyecto26/record-audio-button-enterprise)
### Node Modules
- Run `npm install @proyecto26/record-audio-button --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install @proyecto26/record-audio-button --save`
- Add an import to the npm packages `import @proyecto26/record-audio-button;`
- Then you can use the element anywhere in your template, JSX, html etc
## Framework integrations 👨💻
### Angular
Using `record-audio-button` component within an Angular project:
#### Including the Custom Elements Schema
Including the `CUSTOM_ELEMENTS_SCHEMA` in the module allows the use of Web Components in the HTML files. Here is an example of adding it to `AppModule`:
```ts
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
```
The `CUSTOM_ELEMENTS_SCHEMA` needs to be included in any module that uses **record-audio-button**.
#### Calling defineCustomElements
**record-audio-button** component includes a function used to load itself in the application window object. That function is called `defineCustomElements()` and needs to be executed once during the bootstrapping of your application. One convenient place to add it is in the `main.ts` file as follows:
```tsx
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
defineRecordAudioButton(window);
```
[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/angular.md)
### React
- Specific Wrapper
When using a wrapper component, It's not necessary to access the reference directly to attach events, etc. More details [here](./react/README.md).
```tsx
import React from 'react';
import {
RecordAudioButton
} from '@proyecto26/record-audio-button';
const App = () => {
return (
);
};
export default App;
```
- Web Component
Other option is using the web component directly:
```tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader'
import App from './App';
ReactDOM.render(, document.getElementById('root'));
defineRecordAudioButton(window);
```
[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/react.md)
### Vue
In order to use the `record-audio-button` Web Component inside of a Vue application, it should be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the `main.js` file as follows:
```tsx
import Vue from 'vue';
import { defineCustomElements as defineRecordAudioButton } from '@proyecto26/record-audio-button/loader'
import App from './App.vue';
Vue.config.productionTip = false;
Vue.config.ignoredElements = [/ion-\w*/, /record-\w*/];
// Bind the custom element to the window object
defineRecordAudioButton(window);
new Vue({
render: h => h(App)
}).$mount('#app');
```
[_from stencil documentation_](https://github.com/ionic-team/stencil-site/blob/master/src/docs/framework-integration/vue.md)
## Credits 👍
- Icons made by `Good Ware` from www.flaticon.com
- Wallpaper made by `coolvector` from www.freepik.com
## Happy coding 💯
Made with ❤️
