85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>drawing <video> to <canvas></title>
|
|
<script src=../http/tests/media/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></video>
|
|
<canvas width="160" height="120" ></canvas>
|
|
</div>
|
|
|
|
<p>Test <video> as a source for <canvas>.</p>
|
|
|
|
</body>
|
|
</html> |