2017-04-11 22:47:49 +00:00
|
|
|
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2017-06-22 15:29:14 +00:00
|
|
|
<canvas id="canvas1" width=320px height=240px></canvas>
|
|
|
|
|
<video id="video" autoplay></video>
|
|
|
|
|
<canvas id="canvas2" width=320px height=240px></canvas>
|
2017-04-11 22:47:49 +00:00
|
|
|
<script src="../resources/testharness.js"></script>
|
|
|
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
|
|
|
<script src ="routines.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
var color = "green";
|
2017-09-25 16:00:42 +00:00
|
|
|
|
|
|
|
|
function printCanvas()
|
2017-04-11 22:47:49 +00:00
|
|
|
{
|
|
|
|
|
var context = canvas1.getContext("2d");
|
|
|
|
|
context.fillStyle = color;
|
2017-09-25 16:00:42 +00:00
|
|
|
context.fillRect(0, 0, canvas1.width, canvas1.height);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function printRectangleEvery50ms()
|
|
|
|
|
{
|
|
|
|
|
printCanvas();
|
|
|
|
|
setTimeout(printRectangleEvery50ms, 50);
|
2017-04-11 22:47:49 +00:00
|
|
|
}
|
|
|
|
|
|
2017-09-25 16:00:42 +00:00
|
|
|
function testCanvas(testName, canvas, isSame, count)
|
2017-06-22 15:29:14 +00:00
|
|
|
{
|
2017-09-25 16:00:42 +00:00
|
|
|
var array1 = canvas.getContext("2d").getImageData(20, 20, 60, 60).data;
|
2017-06-22 15:29:14 +00:00
|
|
|
if (count === undefined)
|
|
|
|
|
count = 0;
|
|
|
|
|
canvas2.getContext("2d").drawImage(video, 0 ,0);
|
|
|
|
|
array2 = canvas2.getContext("2d").getImageData(20, 20, 60, 60).data;
|
|
|
|
|
var isEqual = true;
|
|
|
|
|
var index = 0;
|
|
|
|
|
for (index = 0; index < array1.length; ++index) {
|
|
|
|
|
// Rough comparison since we are compressing data.
|
|
|
|
|
// This test still catches errors since we are going from green to blue to red.
|
2017-09-25 16:00:42 +00:00
|
|
|
if (Math.abs(array1[index] - array2[index]) > 100) {
|
2017-06-22 15:29:14 +00:00
|
|
|
isEqual = false;
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (isEqual === isSame)
|
2017-09-25 16:00:42 +00:00
|
|
|
return Promise.resolve();
|
2017-06-22 15:29:14 +00:00
|
|
|
|
|
|
|
|
if (count === 20)
|
|
|
|
|
return Promise.reject(testName + " failed, expected " + JSON.stringify(array1) + " but got " + JSON.stringify(array2));
|
|
|
|
|
|
2017-06-25 18:06:06 +00:00
|
|
|
return waitFor(100).then(() => {
|
2017-09-25 16:00:42 +00:00
|
|
|
return testCanvas(testName, canvas, isSame, ++count);
|
2017-06-22 15:29:14 +00:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2017-04-11 22:47:49 +00:00
|
|
|
promise_test((test) => {
|
2017-09-25 16:00:42 +00:00
|
|
|
printRectangleEvery50ms();
|
2017-04-11 22:47:49 +00:00
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
createConnections((firstConnection) => {
|
|
|
|
|
var stream = canvas1.captureStream();
|
|
|
|
|
firstConnection.addTrack(stream.getVideoTracks()[0], stream);
|
|
|
|
|
}, (secondConnection) => {
|
|
|
|
|
secondConnection.ontrack = (trackEvent) => {
|
|
|
|
|
assert_true(trackEvent.track instanceof MediaStreamTrack);
|
|
|
|
|
assert_true(trackEvent.receiver instanceof RTCRtpReceiver);
|
|
|
|
|
assert_true(Array.isArray(trackEvent.streams), "Array.isArray() should return true");
|
|
|
|
|
assert_true(Object.isFrozen(trackEvent.streams), "Object.isFrozen() should return true");
|
|
|
|
|
resolve(trackEvent.streams[0]);
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
setTimeout(() => reject("Test timed out"), 5000);
|
|
|
|
|
}).then((stream) => {
|
|
|
|
|
video.srcObject = stream;
|
|
|
|
|
return video.play();
|
2017-06-16 20:24:09 +00:00
|
|
|
});
|
|
|
|
|
}, "Setting up the connection");
|
|
|
|
|
|
|
|
|
|
promise_test((test) => {
|
2017-09-25 16:00:42 +00:00
|
|
|
return testCanvas("test 1", canvas1, true);
|
2017-06-16 20:24:09 +00:00
|
|
|
}, "Checking canvas is green");
|
|
|
|
|
|
|
|
|
|
promise_test((test) => {
|
|
|
|
|
color = "red";
|
2017-09-25 16:00:42 +00:00
|
|
|
printCanvas()
|
|
|
|
|
return testCanvas("test 2", canvas1, true);
|
2017-06-16 20:24:09 +00:00
|
|
|
}, "Checking canvas is red");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
promise_test((test) => {
|
|
|
|
|
color = "green";
|
2017-09-25 16:00:42 +00:00
|
|
|
printCanvas();
|
|
|
|
|
return testCanvas("test 3", canvas1, true);
|
2017-06-16 20:24:09 +00:00
|
|
|
}, "Checking canvas is green again");
|
2017-06-22 15:29:14 +00:00
|
|
|
|
|
|
|
|
promise_test((test) => {
|
2017-06-25 18:06:06 +00:00
|
|
|
canvas1.width = 640;
|
|
|
|
|
canvas1.height = 480;
|
2017-09-25 16:00:42 +00:00
|
|
|
printCanvas();
|
2017-06-25 18:06:06 +00:00
|
|
|
return waitForVideoSize(video, 640, 480);
|
2017-06-22 15:29:14 +00:00
|
|
|
}, "Checking canvas size change");
|
2017-04-11 22:47:49 +00:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
</html>
|
