x-tag-camera

Provide a x-camera tag for easy acces to webcam on a capable browser


Keywords
Element, web-components, x-tag
Install
bower install x-tag-camera

Documentation

About x-camera

A X-Tag based Web Component to access a camera using getUserMedia.

Methods

play()

The play Method simply starts video streaming.

pause()

The pause Method stops streaming.

Attributes

videowidth

videowidth sets the width of <video>

videoheight

videoheight sets the height of <video>

Events

canplay will be fired when video is ready to play.

Example

<!-- basic -->
<x-camera></x-camera>

<!-- do not start streaming -->
<x-camera play="false"></x-camera>

<!-- set videoCanvas size to width/height (defaults to 480x320) -->
<x-camera videowidth="480" videoheight="320"></x-camera>

<!-- hide internal video element -->
<x-camera video="hidden"></x-camera>

The component asks for permission for the camera and renders the video. If you just want to access the Video Canvas you could get it as described below:

document.addEventListener('DOMComponentsLoaded', function(){
    var myVideo = document.querySelector('x-camera'); // Or use an id.
    var videoCanvas = myVideo.videoCanvas;
});

Just take a look at demo-canvas.html.

Download it

Use bower: bower install x-tag-camera

Dev Setup

Fork this repo, rename it, then clone it.

$ npm install	// install bower tasks
$ bower install	// install components
$ grunt build   // build
$ grunt bump-push  // bump the version number, tag it and push to origin master

Links

Yeoman X-Tag Generator

X-Tags Docs

Guide for creating X-Tag Components

Using X-Tag components in your applications