W3C home > Mailing lists > Public > public-media-capture@w3.org > April 2012

Rendering on a <canvas>

From: Anant Narayanan <anant@mozilla.com>
Date: Mon, 30 Apr 2012 10:57:38 -0700
Message-ID: <4F9ED292.9040604@mozilla.com>
To: "public-media-capture@w3.org" <public-media-capture@w3.org>
Hi all,

As we try to resolve the <video> assignment issue, I'd like begin the 
<canvas> discussion in parallel.

I propose that we allow direct assignment of a MediaStream to a <canvas> 
object, like so:

let stream = [MediaStream obtained by some means]
let ctx = document.getElementById('canvas').getContext('2d');
ctx.stream = stream;

If we decide to go with the URL approach for <video> we can change this 
API to match. The key point though, is to allow a <canvas> to be a 
*direct* recipient of video data from a MediaStream.

It is possible to do this without explicit support from the getUserMedia 

let canvas, video; [DOM objects preset]
canvas.getContext('2d').drawImage(video, x, y, w, h, offsets...);

However, the developer will have to call drawImage on a DOM timer. It is 
much more efficient and cleaner for the MediaStream to manipulate the 
<canvas> directly.

It is a little weird to have a canvas in the DOM changing constantly (at 
the frame rate of the MediaStream), but I think the benefits outweigh 
the drawbacks.

Look forward to your feedback!

Received on Monday, 30 April 2012 17:57:52 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:24:35 UTC