Draw video frames to a canvas and analyse / modify pixel data
This is a small helper module that allows you to substitute a video element with a canvas element. This can be useful when you want to do pixel manipulation of the rendered images, or in situations when a video element does not behave as you expect.
This was primarily written to work with the rtc-media library so here's an example of how it works there:
var media = require'rtc-media';var fakevid = require'rtc-canvas';mediarenderfakeviddocumentbody;
media().render call will create a
<video> element in
the specified target container. In this case, however,
intercepts the request and creates it's own fake video element that is
passed back to the render call.
A processing pipeline has been included to assist with manipulating the canvas on the fly. Adding a processor to the pipeline is simply a matter of adding a pipeline processor available on the returned fake video:
// add a processorcanvaspipelineadd// examine the pixel data// if we've modified the pixel data and want to write that back// to the canvas then we must return a truthy valuereturn true;;
A more complete example is shown below:
var media = require'rtc-media';var fakevideo = require'rtc-canvas';var vid;var channels = imageDatadata;var rgb = ;var rgbAvg;var alpha;var ii;// check that we have channels is divisible by four (just as a safety)if channelslength % 4 !== 0return;// iterate through the data// NOTE: decrementing loops are fast but you need to know that you will// hit 0 using this logic otherwise it will run forever (only 0 is falsy)for ii = channelslength; ii -= 4;// get the rgb tuplergb = channelsii channelsii + 1 channelsii + 2;// get the alpha valuealpha = channelsii + 3;// calculate the rgb averagergbAvg = rgb0 + rgb1 + rgb2 / 3;// update the values to the rgb averagechannelsii = channelsii + 1 = channelsii + 2 = rgbAvg;return true;// capture mediamediarendervid = fakevideodocumentbody;// handle draw events on the fake videovidpipelineaddhandleDraw;
In addition to providing the opportunity to analyse and modify pixel data
rtc-canvas module also provides the a custom
frame event for
detecting when a new frame has been drawn to the canvas.
A simple example can be found below:
var media = require'rtc-media';var fakevid = require'rtc-canvas';var canvas = fakeviddocumentbody;// capture the media and render to the fake canvasmediarendercanvas;// listen from frames in the canvascanvasaddEventListener'frame'console.log'captured frame at ' + evtdetailtick;;
By default rtc-canvas will draw at 25fps but this can be modified to capture at a lower frame rate for slower devices, or increased if you have a machine with plenty of grunt.
Create a fake video element for the specified target element.
fps- the redraw rate of the fake video (default = 25)
Copyright 2013 National ICT Australia Limited (NICTA)
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.