Use eyeson js library additional helpers and utilities to minimize the work needed to setup your own video conferencing interface.


Collect and manage development, debug, and error messages in one place.

import { Logger } from 'eyeson';

Logger.error(msg); // output error
Logger.warn(msg);  // output warning
Logger.log(msg);   // output log
Logger.debug(msg); // output debug

Device Manager

Manage audio and video device settings.
Note: Always make sure to call storeConstraints after devices are changed, so that a following start_stream will actually use them.

import { DeviceManager } from 'eyeson';

const deviceManager = new DeviceManager();
deviceManager.onChange(event => { // changeHandler
  event.error; // if set it contains { name, message }, default null
  event.cameras; // available cameras
  event.microphones; // available microphones
  event.speakers; // available speakers
  event.sinkId; // available sinkId (audio output selection)
  event.stream; // stream to test devices with
  event.constraints; // selected media constraints
  event.options; // selected options
deviceManager.start(); // start checking device changes
deviceManager.setVideoInput(deviceId); // switch camera
deviceManager.setAudioInput(deviceId); // switch microphone
deviceManager.setAudioOutput(sinkId); // switch audio output, speakers
deviceManager.storeConstraints(); // store current selection
deviceManager.removeListener(changeHandler); // remove listeners if registered via onChange
deviceManager.updateWithOptions(options, isMobile); // options = { audio: true/false, video: true/false, eco: true/false }, isMobile defaults to false
deviceManager.stop(); // stop checking device changes

Feature Detector

Detect user agents capabilities in order to provide user friendly notifications, messages, and fallbacks instead of relying on browser identification techniques.

import { FeatureDetector } from 'eyeson';


The Feature Detector also provides lower level checks that are used in the library itself or to provide specific advises to an end user. You propably won’t need them but for the sake of completeness:



A collection of utilities to identify and adjust specific tracks within the stream. There are numerous methods, but the following come in handy to toggle audio.

import { StreamHelpers } from 'eyeson';

StreamHelpers.toggleAudio(stream, enabled); // enabled can be true or false

Sound Meter

Read volumne input level from a media stream.

import { SoundMeter } from 'eyeson';

const soundMeter = new SoundMeter();
  .connectToSource(stream) // bind stream, listen for audio
  .onUpdate(event => { // listen on updates
    event.error, // an error occurred, default: null
    event.value  // audio level between 0 and 100
soundMeter.stop(); // stop checking the stream for audio

YouTube API

import eyeson, { YoutubeApi } from 'eyeson';

const ytApi = new YoutubeApi(eyeson);
// TODO...

Connection Info

Display a connection quality indicator based on the provided data. More details at Techblog Connection Info.

eyeson.onEvent(event => {
    if (event.type === 'statistics_ready') {

function showStatistics(stats) {


Debounce Helper

Efficiently execute a function but not more often than the given wait time (in milliseconds) limits to. Use the immediate flag to indicate if the function should be executed before or after the wait time.

import { debounce } from 'eyeson';

debounce(func, wait, immediate); // debounce function

Use this method to enhance performance on several executions. Let’s say you want to act on a browser window resize, simply listening on the event may execute a lot. When wrapping your handler by debounce you may execute it only every 100ms, still providing a real-time-feeling for your user but with much better performance and smoother look and feel.