A module wrapping WebRTC's getUserMedia.
A WebRTC's getUserMedia wrapper.
Make sure to have a look at the demo.
Include the library in your HTML file:
ifnavigatorgetMediaconsole.log'getUserMedia is available, go ahead';elseconsole.error'No luck';
gumHelperstartVideoStreamingiferr// Error!// This can fail for many reasons, even if the user doesn't accept the// prompt for using the webcam (we set a timeout for detecting this, configure it// with the options parameter-explained a bit below)else// Success!// stream: the video stream// videoElement: an HTML5 <video> element// width, height: the original dimensions of the video stream// You can append the video element to the current DOM,// if you want to show the unprocessed stream:documentbodyappendChildvideoElement;// (or you could just keep a reference and use it later)timeout: 20000 ;
In your rendering function, check whether a new frame is available in the video stream:
ifvideoElementreadyState === videoElementHAVE_ENOUGH_DATA// There is! You can copy the video to a canvas to get the pixel data, for example:canvasContextdrawImagevideoElement 0 0;
gumHelper can be configured by passing in an
options object when starting the stream. E.g.
For now only an option is available:
- timeout: how long will gumHelper wait before giving up when starting the stream. In milliseconds. Default is to wait forever.
You can use this library 'node style', with browserify too. Just install to
npm install gumhelper, and then you can just do:
var gumHelper = require('gumhelper');// Use the gumHelper object as normal
Then to generate a bundle with browserify:
Install browserify in case it's not installed yet:
npm install browserify -g
then just do something like:
browserify ./yourscript.js -o ./yourscript-bundle.js
yourscript-bundle.js in your HTML file.
Have a look at the demo in the
startVideoStreaming. Please refer to the Passing options section for more details.
- Changed timeout default value to wait forever for the stream to start. If you need to set a timeout, you will need to do it explicitly now.
- Made the library package manager agnostic: you can use it with require, node/browserify or just plain JS includes. You don't need to use browserify to build the demo anymore!
- The library now uses node-style callbacks: send one function with err as first parameter, and everything else afterwards. If the call was successfull, err will be null. Otherwise, it will contain an Error object; check its
messageproperty for more information.