77 lines
2.9 KiB
HTML
77 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>video-orientation-canvas</title>
|
|
<script src="video-test.js"></script>
|
|
<script>
|
|
let redColor = new Uint8ClampedArray([208, 0, 0, 255]);
|
|
var context;
|
|
|
|
function arraysAreApproximatelyEqual(arrayString, expected, tolerance) {
|
|
try {
|
|
var observed = eval(arrayString);
|
|
} catch (ex) {
|
|
consoleWrite(ex);
|
|
return;
|
|
}
|
|
|
|
if (observed.length != expected.length) {
|
|
logResult(Failed, `EXPECTED (<em>${ arrayString }.length</em> == <em>${ expected.length }</em>, OBSERVED '<em>${ observed.length }</em>'`);
|
|
return;
|
|
}
|
|
|
|
for (var index in observed) {
|
|
if (Math.abs(observed[index] - expected[index]) <= tolerance)
|
|
continue;
|
|
logResult(Failed, `EXPECTED (<em>${ arrayString }</em> == <em>[${ expected }]</em>
|
|
with tolerance <em>${ tolerance }</em>, OBSERVED '<em>[${ observed }]</em>'`);
|
|
return;
|
|
}
|
|
|
|
logResult(true, `EXPECTED (<em>${ arrayString }</em> == <em>[${ expected }]</em> with tolerance <em>${ tolerance }</em>`)
|
|
}
|
|
|
|
window.addEventListener('load', async event => {
|
|
video1 = document.createElement('video');
|
|
video1.src = 'content/rotation-90.mp4';
|
|
await waitFor(video1, 'canplay', true);
|
|
|
|
let canvas1 = document.querySelector('#canvas1');
|
|
canvas1.width = video1.videoWidth;
|
|
canvas1.height = video1.videoHeight;
|
|
context = canvas1.getContext('2d');
|
|
context.drawImage(video1, 0, 0);
|
|
arraysAreApproximatelyEqual('context.getImageData(88, 115, 1, 1).data', redColor, 5);
|
|
|
|
video2 = document.createElement('video');
|
|
video2.src = 'content/rotation-180.mp4';
|
|
await waitFor(video2, 'canplay', true);
|
|
|
|
let canvas2 = document.querySelector('#canvas2');
|
|
canvas2.width = video2.videoWidth;
|
|
canvas2.height = video2.videoHeight;
|
|
context = canvas2.getContext('2d');
|
|
context.drawImage(video2, 0, 0);
|
|
arraysAreApproximatelyEqual('context.getImageData(237, 88, 1, 1).data', redColor, 5);
|
|
|
|
video3 = document.createElement('video');
|
|
video3.src = 'content/rotation-270.mp4';
|
|
await waitFor(video3, 'canplay', true);
|
|
|
|
let canvas3 = document.querySelector('#canvas3');
|
|
canvas3.width = video3.videoWidth;
|
|
canvas3.height = video3.videoHeight;
|
|
context = canvas3.getContext('2d');
|
|
context.drawImage(video3, 0, 0);
|
|
arraysAreApproximatelyEqual('context.getImageData(200, 237, 1, 1).data', redColor, 5);
|
|
|
|
endTest();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<canvas id=canvas1></canvas>
|
|
<canvas id=canvas2></canvas>
|
|
<canvas id=canvas3></canvas>
|
|
</body>
|
|
</html> |