OS.js Webcam application example (localhost or https only)

index.js

//
// NOTE: THIS ONLY WORKS ON "localhost" OR A HOST WITH "https:"
//
import osjs from 'osjs';
import {name as applicationName} from './metadata.json';

const createVideoElement = () => {
  const video = document.createElement('video');
  video.style.width = '100%';
  video.style.height = '100%';
  video.style.backgroundColor = '#000000';
  video.autoplay = true;
  return video;
};

const register = (core, args, options, metadata) => {
  const proc = core.make('osjs/application', {args, options, metadata});

  const video = createVideoElement();

  const errorDialog = message => core
    .make('osjs/dialog', 'alert', {
      title: 'An error occured while opening device',
      message
    }, () => {});

  const requestCamera = () => {
    if (!navigator || !navigator.mediaDevices) {
      errorDialog('No media device support (or not loaded via https)');
    } else {
      navigator
        .mediaDevices
        .getUserMedia({video: true})
        .then(stream => (video.srcObject = stream))
        .catch(errorDialog);
    }
  };

  proc.createWindow({
    id: 'WebcamTestWindow',
    title: metadata.title.en_EN,
    position: 'center',
    dimension: {width: 640, height: 640}
  })
    .on('destroy', () => proc.destroy())
    .on('render', requestCamera)
    .render($content => $content.appendChild(video));

  return proc;
};

osjs.register(applicationName, register);