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