blob: 39ad495a3ef55280e2e6a13dc242a3328265e9f0 [file] [log] [blame]
<html>
<head>
<title>drawing &lt;video&gt; to &lt;canvas&gt;</title>
<script src=video-test.js></script>
<script>
var ctx;
var results = {
current: 0,
values: [
{ time:0, r:255, g:255, b:0 },
{ time:2, r:8, g:0, b:226 },
{ time:4, r:0, g:24, b:197 },
{ time:6, r:0, g:46, b:166 },
{ time:8, r:0, g:66, b:136 },
{ time:10, r:0, g:85, b:112 },
]
};
var width;
var height;
function testPixel()
{
var expected = results.values[results.current];
if (expected.time)
ctx.drawImage(video, 0, 0, width, height);
var frame = ctx.getImageData(0, 0, width, height);
r = frame.data[4 * 2 * width + 16 + 0];
g = frame.data[4 * 2 * width + 16 + 1];
b = frame.data[4 * 2 * width + 16 + 2];
testExpected("r", expected.r);
testExpected("g", expected.g);
testExpected("b", expected.b);
if (++results.current >= results.values.length)
endTest();
else
setTimeout(testFrame, 0);
}
function testFrame()
{
video.pause();
consoleWrite("");
var expected = results.values[results.current];
if (expected.time)
run("video.currentTime = " + expected.time);
setTimeout(testPixel, 100);
}
function loadedmetadata()
{
width = video.videoWidth / 2;
height = video.videoHeight / 2;
ctx = canvas.getContext("2d");
ctx.fillStyle = 'yellow';
ctx.fillRect(0, 0, width, height);
testFrame();
}
function start()
{
findMediaElement();
canvas = document.getElementsByTagName('canvas')[0];
waitForEvent('loadedmetadata', loadedmetadata);
run("video.src = 'content/counting.mp4'");
}
</script>
</head>
<body onload="start()" >
<div>
<video controls="true"></video>
<canvas width="160" height="120" ></canvas>
</div>
<p>Test &lt;video&gt; as a source for &lt;canvas&gt;.</p>
</body>
</html>