Directory

← Back

app-media

Elements for accessing data from media input devices and visualizing that data for users

Author

Rating

Popularity

<100

Published on NPM Build status Published on webcomponents.org

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.

Browser support

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

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

Installation

Element:

npm install --save @polymer/app-media

Polyfills:

npm install --save webrtc-adapter
npm install --save image-capture

In an HTML file

<app-media-devices>
<html>
  <head>
    <script type="module">
      import '@polymer/app-media/app-media-devices.js';
    </script>
  </head>
  <body>
    <app-media-devices
        kind="audioinput"
        devices="{{microphones}}">
    </app-media-devices>
  </body>
</html>
<app-media-stream>
<html>
  <head>
    <script type="module">
      import '@polymer/polymer/lib/elements/dom-bind.js';
      import '@polymer/app-media/app-media-devices.js';
      import '@polymer/app-media/app-media-stream.js';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="audioinput"
            devices="{{microphone}}">
        </app-media-devices>
        <app-media-stream
            audio-device="[[microphone]]"
            stream="{{microphoneStream}}">
        </app-media-stream>
      </template>
    </dom-bind>
  </body>
</html>

<app-media-video>

<html>
  <head>
    <script type="module">
      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';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{cameraStream}}">
        </app-media-stream>
        <app-media-video
            source="[[cameraStream]]"
            autoplay>
        </app-media-video>
      </template>
    </dom-bind>
  </body>
</html>

<app-media-recorder>

<html>
  <head>
    <script type="module">
      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';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-devices
            kind="audioinput"
            devices="{{microphone}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            audio-device="[[microphone]]"
            stream="{{cameraAndMicrophoneStream}}">
        </app-media-stream>
        <app-media-recorder
            id="recorder"
            stream="[[cameraAndMicrophoneStream]]"
            data="{{recordedVideo}}"
            duration="3000">
        </app-media-recorder>
      </template>
    </dom-bind>
    <script>
      function createRecording() {
        recorder.start();
      }
    </script>
  </body>
</html>
<app-media-image-capture>
<html>
  <head>
    <script type="module">
      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';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{videoStream}}">
        </app-media-stream>
        <app-media-image-capture
            id="imageCapture"
            stream="[[videoStream]]"
            focus-mode="single-shot"
            red-eye-reduction
            last-photo="{{photo}}">
        </app-media-image-capture>
      </template>
    </dom-bind>
    <script>
      function takePhoto() {
        imageCapture.takePhoto();
      }
    </script>
  </body>
</html>

<app-media-audio>

<html>
  <head>
    <script type="module">
      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';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{videoStream}}">
        </app-media-stream>
        <app-media-audio
            stream="[[microphoneStream]]"
            analyser="{{microphoneAnalyzer}}">
        </app-media-audio>
      </template>
    </dom-bind>
  </body>
</html>

<app-media-waveform>

<html>
  <head>
    <script type="module">
      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';
    </script>
  </head>
  <body>
    <dom-bind>
      <template>
        <app-media-devices
            kind="videoinput"
            devices="{{camera}}">
        </app-media-devices>
        <app-media-stream
            video-device="[[camera]]"
            stream="{{videoStream}}">
        </app-media-stream>
        <app-media-audio
            stream="[[microphoneStream]]"
            analyser="{{microphoneAnalyzer}}">
        </app-media-audio>
        <app-media-waveform analyser="[[microphoneAnalyzer]]">
        </app-media-waveform>
      </template>
    </dom-bind>
  </body>
</html>

In a Polymer 3 element

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

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <app-media-devices
          kind="audioinput"
          devices="{{microphones}}">
      </app-media-devices>
    `;
  }
}
customElements.define('sample-element', SampleElement);
<app-media-stream>
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`
      <app-media-devices
          kind="audioinput"
          devices="{{microphone}}">
      </app-media-devices>
      <app-media-stream
          audio-device="[[microphone]]"
          stream="{{microphoneStream}}">
      </app-media-stream>
    `;
  }
}
customElements.define('sample-element', SampleElement);

<app-media-video>

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`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{cameraStream}}">
      </app-media-stream>
      <app-media-video
          source="[[cameraStream]]"
          autoplay>
      </app-media-video>
    `;
  }
}
customElements.define('sample-element', SampleElement);

<app-media-recorder>

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`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-devices
          kind="audioinput"
          devices="{{microphone}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          audio-device="[[microphone]]"
          stream="{{cameraAndMicrophoneStream}}">
      </app-media-stream>
      <app-media-recorder
          id="recorder"
          stream="[[cameraAndMicrophoneStream]]"
          data="{{recordedVideo}}"
          duration="3000">
      </app-media-recorder>
    `;
  }

  createRecording() {
    this.$.recorder.start();
  }
}
customElements.define('sample-element', SampleElement);
<app-media-image-capture>
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`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{videoStream}}">
      </app-media-stream>
      <app-media-image-capture
          id="imageCapture"
          stream="[[videoStream]]"
          focus-mode="single-shot"
          red-eye-reduction
          last-photo="{{photo}}">
      </app-media-image-capture>
    `;
  }

  takePhoto() {
    this.$.imageCapture.takePhoto();
  }
}
customElements.define('sample-element', SampleElement);

<app-media-audio>

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`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{videoStream}}">
      </app-media-stream>
      <app-media-audio
          stream="[[microphoneStream]]"
          analyser="{{microphoneAnalyzer}}">
      </app-media-audio>
    `;
  }
}
customElements.define('sample-element', SampleElement);

<app-media-waveform>

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`
      <app-media-devices
          kind="videoinput"
          devices="{{camera}}">
      </app-media-devices>
      <app-media-stream
          video-device="[[camera]]"
          stream="{{videoStream}}">
      </app-media-stream>
      <app-media-audio
          stream="[[microphoneStream]]"
          analyser="{{microphoneAnalyzer}}">
      </app-media-audio>
      <app-media-waveform analyser="[[microphoneAnalyzer]]">
      </app-media-waveform>
    `;
  }
}
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

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

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/polymer#^3.0.0
  • @polymer/iron-resizable-behavior#^3.0.0-pre.26
Released
2018-09-14
Maturity
IMPORTED
License
BSD 3-clause "New" or "Revised" License

Compatibility

Framework
Polymer 3.0+
Polymer 2.0+ in 0.10.1
Browser
Browser Independent

app-media - Vaadin Add-on Directory

Elements for accessing data from media input devices and visualizing that data for users app-media - Vaadin Add-on Directory
[![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 ```
License
View on GitHub
View on NPM

app-media version 0.1.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.2.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.3.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.4.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.5.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.5.1
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.5.2
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.6.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.6.1
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.6.2
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.7.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.7.1
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.7.2
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.8.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.8.1
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 0.9.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 3.0.0-pre.6
### Dependencies * @polymer/polymer#^3.0.0-pre.6 * @polymer/iron-resizable-behavior#^3.0.0-pre.6

app-media version 0.10.0
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 3.0.0-pre.7
### Dependencies * @polymer/polymer#^3.0.0-pre.7 * @polymer/iron-resizable-behavior#^3.0.0-pre.7

app-media version 3.0.0-pre.8
### Dependencies * @polymer/polymer#^3.0.0-pre.7 * @polymer/iron-resizable-behavior#^3.0.0-pre.7

app-media version 3.0.0-pre.10
### Dependencies * @polymer/polymer#^3.0.0-pre.10 * @polymer/iron-resizable-behavior#^3.0.0-pre.10

app-media version 3.0.0-pre.11
### Dependencies * @polymer/polymer#^3.0.0-pre.10 * @polymer/iron-resizable-behavior#^3.0.0-pre.10

app-media version 3.0.0-pre.12
### Dependencies * @polymer/polymer#3.0.0-pre.12 * @polymer/iron-resizable-behavior#3.0.0-pre.12

app-media version 3.0.0-pre.13
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.13

app-media version 3.0.0-pre.14
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.14

app-media version 3.0.0-pre.15
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.15

app-media version 3.0.0-pre.16
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.16

app-media version 3.0.0-pre.17
### Dependencies * @polymer/polymer#^3.0.0-pre.13 * @polymer/iron-resizable-behavior#^3.0.0-pre.17

app-media version 3.0.0-pre.18
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.18

app-media version 3.0.0-pre.19
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.19

app-media version 0.10.1
### Dependencies * polymer#Polymer/polymer#1.8.0 - 2 * iron-resizable-behavior#PolymerElements/iron-resizable-behavior#1.0.0 - 2

app-media version 3.0.0-pre.20
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.20

app-media version 3.0.0-pre.21
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.21

app-media version 3.0.0-pre.22
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.20

app-media version 3.0.0-pre.23
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.22

app-media version 3.0.0-pre.24
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.22

app-media version 3.0.0-pre.25
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.24

app-media version 3.0.0-pre.26
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.25

app-media version 3.0.0
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.26

app-media version 3.0.1
### Dependencies * @polymer/polymer#^3.0.0 * @polymer/iron-resizable-behavior#^3.0.0-pre.26

Online