| <!DOCTYPE html> |
| <html> |
| <header> |
| <script src='/resources/testharness.js'></script> |
| <script src='/resources/testharnessreport.js'></script> |
| </header> |
| <body> |
| <script> |
| |
| function makeVideoFrame(width, height, timestamp, duration) { |
| let canvas = new OffscreenCanvas(width, height); |
| let ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'rgba(50, 100, 150, 255)'; |
| ctx.fillRect(0, 0, width, height); |
| return new VideoFrame(canvas, { timestamp, duration }); |
| } |
| |
| promise_test(async () => { |
| const config = { codec: 'avc1.42001E' }; |
| config.width = 320; |
| config.height = 200; |
| config.bitrate = 1000000; |
| config.framerate = 30; |
| |
| let resolve, reject; |
| const promise = new Promise((res, rej) => { |
| resolve = res; |
| reject = rej; |
| }); |
| |
| let results = []; |
| const encoderInit = { |
| output(chunk, metadata) { |
| results.push(chunk); |
| if (results.length === 3) |
| resolve(); |
| }, |
| error(e) { |
| reject(e.message); |
| } |
| }; |
| |
| const encoder = new VideoEncoder(encoderInit); |
| encoder.configure(config); |
| |
| const w = config.width; |
| const h = config.height; |
| |
| const frame1 = makeVideoFrame(w, h, -10, 1); |
| encoder.encode(frame1); |
| frame1.close(); |
| |
| const frame2 = makeVideoFrame(w, h, -10, 2); |
| encoder.encode(frame2); |
| frame2.close(); |
| |
| const frame3 = makeVideoFrame(w, h, -10, undefined); |
| encoder.encode(frame3); |
| frame3.close(); |
| |
| await encoder.flush(); |
| encoder.close(); |
| |
| await promise; |
| |
| assert_equals(results.length, 3); |
| assert_equals(results[0].timestamp, -10, "frame1 timestamp"); |
| assert_equals(results[0].duration, 1); |
| assert_equals(results[1].timestamp, -10, "frame2 timestamp"); |
| assert_equals(results[1].duration, 2); |
| assert_equals(results[2].timestamp, -10, "frame3 timestamp"); |
| assert_equals(results[2].duration, null); |
| }, "H.264 encoder with frames having the same timestamp"); |
| </script> |
| </body> |
| </html> |
