@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 for detailed usage._

See: Documentation,
Demo.

$3

The following emerging platform APIs are used by this collection of elements:

- Media Capture and Streams
- MediaStream Recording
- Web Audio API
- MediaStream Image Capture

Some additional browser support is enabled by
WebRTC polyfill and
MediaStream ImageCapture API 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

$3

Element:
``
npm install --save @polymer/app-media
`

Polyfills:
`
npm install --save webrtc-adapter
npm install --save image-capture
`

$3

#####

`html





kind="audioinput"
devices="{{microphones}}">



`

#####

`html










`

####

`html










`

####

`html











`

#####

`html











`

####

`html










`

####

`html










`

$3

#####

`js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/app-media/app-media-devices.js';

class SampleElement extends PolymerElement {
static get template() {
return html
kind="audioinput"
devices="{{microphones}}">

;
}
}
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
kind="audioinput"
devices="{{microphone}}">

audio-device="[[microphone]]"
stream="{{microphoneStream}}">

;
}
}
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
kind="videoinput"
devices="{{camera}}">

video-device="[[camera]]"
stream="{{cameraStream}}">

source="[[cameraStream]]"
autoplay>

;
}
}
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
kind="videoinput"
devices="{{camera}}">

kind="audioinput"
devices="{{microphone}}">

video-device="[[camera]]"
audio-device="[[microphone]]"
stream="{{cameraAndMicrophoneStream}}">

id="recorder"
stream="[[cameraAndMicrophoneStream]]"
data="{{recordedVideo}}"
duration="3000">

;
}

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
kind="videoinput"
devices="{{camera}}">

video-device="[[camera]]"
stream="{{videoStream}}">

id="imageCapture"
stream="[[videoStream]]"
focus-mode="single-shot"
red-eye-reduction
last-photo="{{photo}}">

;
}

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
kind="videoinput"
devices="{{camera}}">

video-device="[[camera]]"
stream="{{videoStream}}">

stream="[[microphoneStream]]"
analyser="{{microphoneAnalyzer}}">

;
}
}
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
kind="videoinput"
devices="{{camera}}">

video-device="[[camera]]"
stream="{{videoStream}}">

stream="[[microphoneStream]]"
analyser="{{microphoneAnalyzer}}">



;
}
}
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:

$3

`sh
git clone https://github.com/PolymerElements/app-media
cd app-media
npm install
npm install -g polymer-cli
`

$3

`sh
polymer serve --npm
open http://127.0.0.1:/demo/
`

$3

`sh
polymer test --npm
``