app-media - Vaadin Add-on Directory
Elements for accessing data from media input devices and visualizing that data for users[![Published on NPM](https://img.shields.io/npm/v/@polymer/app-media.svg)](https://www.npmjs.com/package/@polymer/app-media)
[![Build status](https://travis-ci.org/PolymerElements/app-media.svg?branch=master)](https://travis-ci.org/PolymerElements/app-media)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/app-media)
## App Media Elements
Elements for accessing data from media input devices, such as cameras and
microphones, and visualizing that data for users.
_See [the full explainer](./explainer.md) for detailed usage._
See: [Documentation](https://www.webcomponents.org/element/@polymer/app-media),
[Demo](https://www.webcomponents.org/element/@polymer/app-media/demo/demo/index.html).
### Browser support
The following emerging platform APIs are used by this collection of elements:
- [Media Capture and Streams](https://www.w3.org/TR/mediacapture-streams/)
- [MediaStream Recording](https://www.w3.org/TR/mediastream-recording/)
- [Web Audio API](https://www.w3.org/TR/webaudio/)
- [MediaStream Image Capture](https://w3c.github.io/mediacapture-image/)
Some additional browser support is enabled by
[WebRTC polyfill](https://github.com/webrtc/adapter) and
[MediaStream ImageCapture API polyfill](https://github.com/GoogleChromeLabs/imagecapture-polyfill).
The following table documents browser support for the elements in this collection with
these polyfills in use
- ✅ Stable native implementation
- � Partial fidelity with polyfill
- � Not supported at all
Element | Chrome | Safari 11 | Firefox | Edge | IE 11
--------------------------|--------|-----------|---------|-------|------
`app-media-video` | ✅ | ✅ | ✅ | ✅ | ✅
`app-media-audio` | ✅ | ✅ | ✅ | ✅ | �
`app-media-waveform` | ✅ | ✅ | ✅ | ✅ | �
`app-media-devices` | ✅ | ✅ | ✅ | ✅ | �
`app-media-stream` | ✅ | ✅ | ✅ | ✅ | �
`app-media-recorder` | ✅ | � | ✅ | � | �
`app-media-image-capture` | ✅ | � | � | � | �
## Usage
### Installation
Element:
```
npm install --save @polymer/app-media
```
Polyfills:
```
npm install --save webrtc-adapter
npm install --save image-capture
```
### In an HTML file
##### ``
```html
```
##### ``
```html
```
#### ``
```html
```
#### ``
```html
```
##### ``
```html
```
#### ``
```html
```
#### ``
```html
```
### In a Polymer 3 element
##### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
}
customElements.define('sample-element', SampleElement);
```
##### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
}
customElements.define('sample-element', SampleElement);
```
#### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-video.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
}
customElements.define('sample-element', SampleElement);
```
#### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-recorder.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
createRecording() {
this.$.recorder.start();
}
}
customElements.define('sample-element', SampleElement);
```
##### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-image-capture.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
takePhoto() {
this.$.imageCapture.takePhoto();
}
}
customElements.define('sample-element', SampleElement);
```
#### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-audio.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
}
customElements.define('sample-element', SampleElement);
```
#### ``
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-audio.js';
import '@polymer/app-media/app-media-waveform.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/app-media
cd app-media
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```