1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<title>Test Encode VideoFrame from CanvasImageSource.</title>
<img src="four-colors.png"/>
<svg width="320" height="240" xmlns="http://www.w3.org/2000/svg">
<image href="four-colors.png" height="320" width="240"/>
</svg>
<canvas id=""></canvas>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/webcodecs/utils.js"></script>
<script>
promise_test(() => {
return new Promise(resolve => onload = resolve);
}, "Wait for onload event to get access to image data");
promise_test(async t => {
const img = document.querySelector('img');
const frame = new VideoFrame(img, {timestamp: 0});
assert_equals(frame.codedWidth, img.width);
assert_equals(frame.codedHeight, img.height);
let outputs = 0;
const codecInit = getDefaultCodecInit(t);
codecInit.output = (chunk, metadata) => {
outputs += 1;
}
const encoder = new VideoEncoder(codecInit);
encoder.configure({
codec: 'vp8',
width: frame.codedWidth,
height: frame.codedHeight,
});
encoder.encode(frame);
frame.close();
await encoder.flush();
encoder.close();
assert_equals(outputs, 1, 'outputs');
}, 'Test encode ImageElement-constructed VideoFrame');
promise_test(async t => {
const svg = document.querySelector('svg');
const svgImage = document.querySelector('image');
const frame = new VideoFrame(svgImage, {timestamp: 0});
assert_equals(frame.codedWidth, svg.width.baseVal.value);
assert_equals(frame.codedHeight, svg.height.baseVal.value);
let outputs = 0;
const codecInit = getDefaultCodecInit(t);
codecInit.output = (chunk, metadata) => {
outputs += 1;
}
const encoder = new VideoEncoder(codecInit);
encoder.configure({
codec: 'vp8',
width: frame.codedWidth,
height: frame.codedHeight,
});
encoder.encode(frame);
frame.close();
await encoder.flush();
encoder.close();
assert_equals(outputs, 1, 'outputs');
}, 'Test encode SVGImageElement-constructed VideoFrame');
function drawFourColors(canvas) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFFF00'; // yellow
ctx.fillRect(0, 0, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = '#FF0000'; // red
ctx.fillRect(canvas.width / 2, 0, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = '#0000FF'; // blue
ctx.fillRect(0, canvas.height / 2, canvas.width / 2, canvas.height / 2);
ctx.fillStyle = '#00FF00'; // green
ctx.fillRect(canvas.width / 2, canvas.height / 2, canvas.width / 2,
canvas.height / 2);
}
promise_test(async t => {
const canvas = document.querySelector('canvas');
canvas.width = 320;
canvas.height = 240;
drawFourColors(canvas);
const frame = new VideoFrame(canvas, {timestamp: 0});
assert_equals(frame.codedWidth, canvas.width);
assert_equals(frame.codedHeight, canvas.height);
let outputs = 0;
const codecInit = getDefaultCodecInit(t);
codecInit.output = (chunk, metadata) => {
outputs += 1;
}
const encoder = new VideoEncoder(codecInit);
encoder.configure({
codec: 'vp8',
width: canvas.width,
height: canvas.height,
});
encoder.encode(frame);
frame.close();
await encoder.flush();
encoder.close();
assert_equals(outputs, 1, 'outputs');
}, 'Test encode canvas-element-constructed VideoFrame');
</script>
|
