Elements for accessing data from media input devices and visualizing that data for users
Clone or download
e111077 Merge pull request #61 from j0000el/patch-2
Fix polymer 2 bug in app-media-image-capture
Latest commit 79e90d8 Oct 9, 2018

README.md

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