// META: global=window,dedicatedworker
// META: script=/webcodecs/videoFrame-utils.js
// META: script=/webcodecs/video-encoder-utils.js
const smpte170m = {
matrix: 'smpte170m',
primaries: 'smpte170m',
transfer: 'smpte170m',
fullRange: false
};
const bt709 = {
matrix: 'bt709',
primaries: 'bt709',
transfer: 'bt709',
fullRange: false
};
function compareColors(actual, expected, tolerance, msg) {
let channel = ['R', 'G', 'B', 'A'];
for (let i = 0; i < 4; i++) {
assert_approx_equals(
actual[i], expected[i], tolerance,
`${msg} ${channel[i]}: actual: ${actual[i]} expected: ${expected[i]}`);
}
}
function rgb2yuv(r, g, b) {
let y = r * .299000 + g * .587000 + b * .114000
let u = r * -.168736 + g * -.331264 + b * .500000 + 128
let v = r * .500000 + g * -.418688 + b * -.081312 + 128
y = Math.round(y);
u = Math.round(u);
v = Math.round(v);
return {
y, u, v
}
}
function makeI420Frames(colorSpace) {
const kYellow = {r: 0xFF, g: 0xFF, b: 0x00};
const kRed = {r: 0xFF, g: 0x00, b: 0x00};
const kBlue = {r: 0x00, g: 0x00, b: 0xFF};
const kGreen = {r: 0x00, g: 0xFF, b: 0x00};
const kPink = {r: 0xFF, g: 0x78, b: 0xFF};
const kMagenta = {r: 0xFF, g: 0x00, b: 0xFF};
const kBlack = {r: 0x00, g: 0x00, b: 0x00};
const kWhite = {r: 0xFF, g: 0xFF, b: 0xFF};
const result = [];
const init = {format: 'I420', timestamp: 0, codedWidth: 4, codedHeight: 4};
const colors =
[kYellow, kRed, kBlue, kGreen, kMagenta, kBlack, kWhite, kPink];
const data = new Uint8Array(24);
init.colorSpace = colorSpace;
for (let color of colors) {
color = rgb2yuv(color.r, color.g, color.b);
data.fill(color.y, 0, 16);
data.fill(color.u, 16, 20);
data.fill(color.v, 20, 24);
result.push(new VideoFrame(data, init));
}
return result;
}
function makeRGBXFrames(colorSpace) {
const kYellow = 0xFFFF00;
const kRed = 0xFF0000;
const kBlue = 0x0000FF;
const kGreen = 0x00FF00;
const kBlack = 0x000000;
const kWhite = 0xFFFFFF;
const result = [];
const init = {format: 'RGBX', timestamp: 0, codedWidth: 4, codedHeight: 4};
const colors = [kYellow, kRed, kBlue, kGreen, kBlack, kWhite];
const data = new Uint32Array(16);
init.colorSpace = colorSpace;
for (let color of colors) {
data.fill(color, 0, 16);
result.push(new VideoFrame(data, init));
}
return result;
}
async function testFrame(frame, colorSpace, pixelFormat) {
const width = frame.visibleRect.width;
const height = frame.visibleRect.height;
let frame_message = 'Frame: ' + JSON.stringify({
format: frame.format,
width: width,
height: height,
matrix: frame.colorSpace?.matrix,
primaries: frame.colorSpace?.primaries,
transfer: frame.colorSpace?.transfer,
});
const cnv = new OffscreenCanvas(width, height);
const ctx =
cnv.getContext('2d', {colorSpace: colorSpace, willReadFrequently: true});
// Read VideoFrame pixels via copyTo()
let imageData = ctx.createImageData(width, height);
let copy_to_buf = imageData.data.buffer;
let layout = null;
try {
const options = {
rect: {x: 0, y: 0, width: width, height: height},
format: pixelFormat,
colorSpace: colorSpace
};
assert_equals(frame.allocationSize(options), copy_to_buf.byteLength);
layout = await frame.copyTo(copy_to_buf, options);
} catch (e) {
assert_unreached(`copyTo() failure: ${e}`);
return;
}
if (layout.length != 1) {
assert_unreached('Conversion to RGB is not supported by the browser');
return;
}
// Read VideoFrame pixels via drawImage()
ctx.drawImage(frame, 0, 0, width, height, 0, 0, width, height);
imageData = ctx.getImageData(0, 0, width, height, {colorSpace: colorSpace});
let get_image_buf = imageData.data.buffer;
// Compare!
const tolerance = 1;
for (let i = 0; i < copy_to_buf.byteLength; i += 4) {
if (pixelFormat.startsWith('BGR')) {
// getImageData() always gives us RGB, we need to swap bytes before
// comparing them with BGR.
new Uint8Array(get_image_buf, i, 3).reverse();
}
compareColors(
new Uint8Array(copy_to_buf, i, 4), new Uint8Array(get_image_buf, i, 4),
tolerance, frame_message + ` Mismatch at offset ${i}`);
}
}
function test_4x4_I420_frames() {
for (let colorSpace of ['srgb', 'display-p3']) {
for (let pixelFormat of ['RGBA', 'RGBX', 'BGRA', 'BGRX']) {
for (let frameColorSpace of [null, smpte170m, bt709]) {
const frameColorSpaceName = frameColorSpace? frameColorSpace.primaries : "null";
promise_test(async t => {
for (let frame of makeI420Frames(frameColorSpace)) {
await testFrame(frame, colorSpace, pixelFormat);
frame.close();
}
}, `Convert 4x4 ${frameColorSpaceName} I420 frames to ${pixelFormat} / ${colorSpace}`);
}
}
}
}
test_4x4_I420_frames();
function test_4x4_RGB_frames() {
for (let colorSpace of ['srgb', 'display-p3']) {
for (let pixelFormat of ['RGBA', 'RGBX', 'BGRA', 'BGRX']) {
for (let frameColorSpace of [null, smpte170m, bt709]) {
const frameColorSpaceName = frameColorSpace? frameColorSpace.primaries : "null";
promise_test(async t => {
for (let frame of makeRGBXFrames(frameColorSpace)) {
await testFrame(frame, colorSpace, pixelFormat);
frame.close();
}
}, `Convert 4x4 ${frameColorSpaceName} RGBX frames to ${pixelFormat} / ${colorSpace}`);
}
}
}
}
test_4x4_RGB_frames();
function test_4color_canvas_frames() {
for (let colorSpace of ['srgb', 'display-p3']) {
for (let pixelFormat of ['RGBA', 'RGBX', 'BGRA', 'BGRX']) {
promise_test(async t => {
const frame = createFrame(32, 16);
await testFrame(frame, colorSpace, pixelFormat);
frame.close();
}, `Convert 4-color canvas frame to ${pixelFormat} / ${colorSpace}`);
}
}
}
test_4color_canvas_frames();
promise_test(async t => {
let pixelFormat = 'RGBA'
const init = {format: 'RGBA', timestamp: 0, codedWidth: 4, codedHeight: 4};
const src_data = new Uint32Array(init.codedWidth * init.codedHeight);
src_data.fill(0xFFFFFFFF);
const offset = 5;
const stride = 40;
const dst_data = new Uint8Array(offset + stride * init.codedHeight);
const options = {
format: pixelFormat,
layout: [
{offset: offset, stride: stride},
]
};
const frame = new VideoFrame(src_data, init);
await frame.copyTo(dst_data, options)
assert_false(dst_data.slice(0, offset).some(e => e != 0), 'offset');
for (let row = 0; row < init.codedHeight; ++row) {
let width = init.codedWidth * 4;
const row_data =
dst_data.slice(offset + stride * row, offset + stride * row + width);
const margin_data = dst_data.slice(
offset + stride * row + width, offset + stride * (row + 1));
assert_false(
row_data.some(e => e != 0xFF),
`unexpected data in row ${row} [${row_data}]`);
assert_false(
margin_data.some(e => e != 0),
`unexpected margin in row ${row} [${margin_data}]`);
}
frame.close();
}, `copyTo() with layout`);
function test_unsupported_pixel_formats() {
const kUnsupportedFormats = [
'I420', 'I420P10', 'I420P12', 'I420A', 'I422', 'I422A', 'I444', 'I444A',
'NV12'
];
for (let pixelFormat of kUnsupportedFormats) {
promise_test(async t => {
const init =
{format: 'RGBX', timestamp: 0, codedWidth: 4, codedHeight: 4};
const data = new Uint32Array(16);
const options = {format: pixelFormat};
const frame = new VideoFrame(data, init);
assert_throws_dom(
'NotSupportedError', () => frame.allocationSize(options));
await promise_rejects_dom(
t, 'NotSupportedError', frame.copyTo(data, options))
frame.close();
}, `Unsupported format ${pixelFormat}`);
}
}
test_unsupported_pixel_formats();
Codebase Browser
chromium