https://github.com/polymerelements/app-media
Elements for accessing data from media input devices and visualizing that data for users
https://github.com/polymerelements/app-media
audio camera media-capture microphone stream video visualization web-audio
Last synced: 4 months ago
JSON representation
Elements for accessing data from media input devices and visualizing that data for users
- Host: GitHub
- URL: https://github.com/polymerelements/app-media
- Owner: PolymerElements
- Created: 2017-01-08T23:52:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T14:02:54.000Z (almost 2 years ago)
- Last Synced: 2025-05-27T07:50:44.830Z (4 months ago)
- Topics: audio, camera, media-capture, microphone, stream, video, visualization, web-audio
- Language: JavaScript
- Homepage:
- Size: 334 KB
- Stars: 61
- Watchers: 18
- Forks: 12
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@polymer/app-media)
[](https://travis-ci.org/PolymerElements/app-media)
[](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
import '@polymer/app-media/app-media-devices.js';
```
##### ``
```html
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
```
#### ``
```html
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-video.js';
```
#### ``
```html
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-recorder.js';
function createRecording() {
recorder.start();
}
```
##### ``
```html
import '@polymer/polymer/lib/elements/dom-bind.js';
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';
function takePhoto() {
imageCapture.takePhoto();
}
```
#### ``
```html
import '@polymer/polymer/lib/elements/dom-bind.js';
import '@polymer/app-media/app-media-devices.js';
import '@polymer/app-media/app-media-stream.js';
import '@polymer/app-media/app-media-audio.js';
```
#### ``
```html
import '@polymer/polymer/lib/elements/dom-bind.js';
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';
```
### 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
```