<user-media>

A WebComponent wrapper for the getUserMedia API.

Get webcam video and microphone audio streams with a simple html tag!

Installation

Loading from CDN

Load the component from unpkg with a script tag:

<script type="module" src="https://unpkg.com/@popul-ar/user-media@latest"></script>

Installing from NPM

Install the module: npm install --save @popul-ar/user-media

Import the module: import '@popul-ar/user-media'

Examples

Using the component without any attributes will give you a muted video element with default webcam settings.

<user-media></user-media>

You can also specify other attributes depending on your needs.

<user-media width="720" height="1280" controls></user-media>

<user-media aspect-ratio="1.333" video-facing-mode="user"></user-media>

Documentation

See the <user-media> component API documentation for more details about attributes, events, and methods.

Demos

Basic webcam example: device selector with a few controls

Simplest usage: just the tag

Audio controls: audio streams and properties. ⚠️ Headphones recommended to prevent feedback loops ⚠️.

Advanced properties: zoom, contrast, exposure mode, etc...

Development

npm install: installs dependencies

npm start: starts a dev server and runs a watcher for compiling the component

npm run build: builds the component in production mode and generates docs

npm run publish: publishes the module on NPM

---