Security News
The Changelog Podcast: Practical Steps to Stay Safe on npm
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
By Sarah Gooding - Oct 31, 2025
🚀 DAY 5 OF LAUNCH WEEK: Introducing Socket Firewall Enterprise.Learn more →
@polymer/app-media
Advanced tools
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
FAQs
Elements for accessing data from media input devices
The npm package @polymer/app-media receives a total of 5 weekly downloads. As such, @polymer/app-media popularity was classified as not popular.
We found that @polymer/app-media demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Package last updated on 14 Sep 2018
Did you know?
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.
Related posts
Security News
Security Community Slams MIT-linked Report Claiming AI Powers 80% of Ransomware
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.
By Sarah Gooding - Oct 30, 2025
Security News
Ruby Core Team Assumes Stewardship of RubyGems and Bundler, Former Maintainers Offer to Transfer All Rights to Matz
Ruby's creator Matz assumes control of RubyGems and Bundler repositories while former maintainers agree to step back and transfer all rights to end the dispute.
By Sarah Gooding - Oct 29, 2025