Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@polymer/app-media

Package Overview
Dependencies
Maintainers
11
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@polymer/app-media

Elements for accessing data from media input devices

  • 3.0.1
  • latest
  • Source
  • npm
  • Socket score
Version published
Maintainers
11
Created
Source

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
ElementChromeSafari 11FirefoxEdgeIE 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

Keywords

FAQs

Package last updated on 14 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries

Research

Security News

Malicious npm Packages Inject SSH Backdoors via Typosquatted Libraries

Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.

By Kirill Boychenko  -  Nov 22, 2024
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc