PolymerElements / App Media
Elements for accessing data from media input devices and visualizing that data for users
Stars: ✭ 60
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to App Media
Homebridge Camera Ffmpeg
Homebridge Plugin Providing FFmpeg-based Camera Support
Stars: ✭ 726 (+1110%)
Mutual labels: stream, camera, audio
Foggycam
📹 A tool to locally capture your own Nest camera stream.
Stars: ✭ 391 (+551.67%)
Mutual labels: stream, camera
Rtmppublisher
Rtmp client on Android. Live Video Streaming.
Stars: ✭ 515 (+758.33%)
Mutual labels: camera, audio
Screenity
The most powerful screen recorder & annotation tool for Chrome 🎥
Stars: ✭ 6,229 (+10281.67%)
Mutual labels: camera, audio
Spectro
🎶 Real-time audio spectrogram generator for the web
Stars: ✭ 383 (+538.33%)
Mutual labels: microphone, audio
Musig
A shazam like tool to store songs fingerprints and retrieve them
Stars: ✭ 388 (+546.67%)
Mutual labels: microphone, audio
Wavesurfer.js
Navigable waveform built on Web Audio and Canvas
Stars: ✭ 5,905 (+9741.67%)
Mutual labels: audio, web-audio
Standardized Audio Context
A cross-browser wrapper for the Web Audio API which aims to closely follow the standard.
Stars: ✭ 300 (+400%)
Mutual labels: audio, web-audio
Daw
GridSound (0.33.0) wants to be an open source online digital audio workstation following the new WebAudio API 🎛🎹🎵✨
Stars: ✭ 804 (+1240%)
Mutual labels: audio, web-audio
Mems mic breakout Admp401
SparkFun MEMS Microphone Breakout - INMP401 (ADMP401)
Stars: ✭ 10 (-83.33%)
Mutual labels: microphone, audio
Howler.js
Javascript audio library for the modern web.
Stars: ✭ 19,425 (+32275%)
Mutual labels: audio, web-audio
Jzz
MIDI library for Node.js and web-browsers
Stars: ✭ 325 (+441.67%)
Mutual labels: audio, web-audio
Play stdin.sh
A set of lightweight scripts to stream audio between two *nix machines. Perfect for use with a Raspberry Pi
Stars: ✭ 56 (-6.67%)
Mutual labels: stream, audio
Clubber
Application of music theory in audio reactive visualizations
Stars: ✭ 325 (+441.67%)
Mutual labels: audio, web-audio
Libjitsi
Advanced Java media library for secure real-time audio/video communication.
Stars: ✭ 536 (+793.33%)
Mutual labels: stream, audio
Sonorous
Sonorous streamlines working with web audio, enabling easy audio integration into web apps and games.
Stars: ✭ 47 (-21.67%)
Mutual labels: audio, web-audio
Facebook Live Reactions
The easiest way to create interactive Facebook live streams. Displays reaction count and live shoutouts :)
Stars: ✭ 284 (+373.33%)
Mutual labels: stream, audio
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].