| import { Fixture, SkipTestCase } from '../../common/framework/fixture.js'; |
| import { getResourcePath } from '../../common/framework/resources.js'; |
| import { keysOf } from '../../common/util/data_tables.js'; |
| import { timeout } from '../../common/util/timeout.js'; |
| import { ErrorWithExtra, assert, raceWithRejectOnTimeout } from '../../common/util/util.js'; |
| import { GPUTest } from '../gpu_test.js'; |
| import { RGBA, srgbToDisplayP3 } from '../util/color_space_conversion.js'; |
| |
| declare global { |
| interface HTMLMediaElement { |
| // Add captureStream() support for HTMLMediaElement from |
| // https://w3c.github.io/mediacapture-fromelement/#dom-htmlmediaelement-capturestream |
| captureStream(): MediaStream; |
| } |
| } |
| |
| // MAINTENANCE_TODO: Uses raw floats as expectation in external_texture related cases has some diffs. |
| // Remove this conversion utils and uses raw float data as expectation in external_textrue |
| // related cases when resolve this. |
| export function convertToUnorm8(expectation: Readonly<RGBA>): Uint8Array { |
| const rgba8Unorm = new Uint8ClampedArray(4); |
| rgba8Unorm[0] = Math.round(expectation.R * 255.0); |
| rgba8Unorm[1] = Math.round(expectation.G * 255.0); |
| rgba8Unorm[2] = Math.round(expectation.B * 255.0); |
| rgba8Unorm[3] = Math.round(expectation.A * 255.0); |
| |
| return new Uint8Array(rgba8Unorm.buffer); |
| } |
| |
| // MAINTENANCE_TODO: Add helper function for BT.601 and BT.709 to remove all magic numbers. |
| // Expectation values about converting video contents to sRGB color space. |
| // Source video color space affects expected values. |
| // The process to calculate these expected pixel values can be found: |
| // https://github.com/gpuweb/cts/pull/2242#issuecomment-1430382811 |
| // and https://github.com/gpuweb/cts/pull/2242#issuecomment-1463273434 |
| const kBt601PixelValue = { |
| srgb: { |
| red: { R: 0.972945567233341, G: 0.141794376683341, B: -0.0209589916711088, A: 1.0 }, |
| green: { R: 0.248234279433399, G: 0.984810378661784, B: -0.0564701319494314, A: 1.0 }, |
| blue: { R: 0.10159735826538, G: 0.135451122863674, B: 1.00262982899724, A: 1.0 }, |
| yellow: { R: 0.995470750775951, G: 0.992742114518355, B: -0.0701036235167653, A: 1.0 }, |
| }, |
| } as const; |
| |
| const kBt709PixelValue = { |
| srgb: { |
| red: { R: 1.0, G: 0.0, B: 0.0, A: 1.0 }, |
| green: { R: 0.0, G: 1.0, B: 0.0, A: 1.0 }, |
| blue: { R: 0.0, G: 0.0, B: 1.0, A: 1.0 }, |
| yellow: { R: 1.0, G: 1.0, B: 0.0, A: 1.0 }, |
| }, |
| } as const; |
| |
| function makeTable<Table extends { readonly [K: string]: {} }>({ |
| table, |
| }: { |
| table: Table; |
| }): { |
| readonly [F in keyof Table]: { |
| readonly [K in keyof Table[F]]: Table[F][K]; |
| }; |
| } { |
| return Object.fromEntries( |
| Object.entries(table).map(([k, row]) => [k, { ...row }]) |
| /* eslint-disable-next-line @typescript-eslint/no-explicit-any */ |
| ) as any; |
| } |
| |
| // Video expected pixel value table. Finding expected pixel value |
| // with video color space and dst color space. |
| export const kVideoExpectedColors = makeTable({ |
| table: { |
| bt601: { |
| 'display-p3': { |
| yellow: srgbToDisplayP3(kBt601PixelValue.srgb.yellow), |
| red: srgbToDisplayP3(kBt601PixelValue.srgb.red), |
| blue: srgbToDisplayP3(kBt601PixelValue.srgb.blue), |
| green: srgbToDisplayP3(kBt601PixelValue.srgb.green), |
| }, |
| srgb: { |
| yellow: kBt601PixelValue.srgb.yellow, |
| red: kBt601PixelValue.srgb.red, |
| blue: kBt601PixelValue.srgb.blue, |
| green: kBt601PixelValue.srgb.green, |
| }, |
| }, |
| bt709: { |
| 'display-p3': { |
| yellow: srgbToDisplayP3(kBt709PixelValue.srgb.yellow), |
| red: srgbToDisplayP3(kBt709PixelValue.srgb.red), |
| blue: srgbToDisplayP3(kBt709PixelValue.srgb.blue), |
| green: srgbToDisplayP3(kBt709PixelValue.srgb.green), |
| }, |
| srgb: { |
| yellow: kBt709PixelValue.srgb.yellow, |
| red: kBt709PixelValue.srgb.red, |
| blue: kBt709PixelValue.srgb.blue, |
| green: kBt709PixelValue.srgb.green, |
| }, |
| }, |
| }, |
| } as const); |
| |
| export const kImageExpectedColors = { |
| srgb: { |
| red: { R: 1.0, G: 0.0, B: 0.0, A: 1.0 }, |
| green: { R: 0.0, G: 1.0, B: 0.0, A: 1.0 }, |
| blue: { R: 0.0, G: 0.0, B: 1.0, A: 1.0 }, |
| yellow: { R: 1.0, G: 1.0, B: 0.0, A: 1.0 }, |
| }, |
| } as const; |
| |
| // MAINTENANCE_TODO: Add BT.2020 video in table. |
| // Video container and codec defines several transform ops to apply to raw decoded frame to display. |
| // Our test cases covers 'visible rect' and 'rotation'. |
| // 'visible rect' is associated with the |
| // video bitstream and should apply to the raw decoded frames before any transformation. |
| // 'rotation' is associated with the track or presentation and should transform |
| // the whole visible rect (e.g. 90-degree rotate makes visible rect of vertical video to horizontal) |
| // The order to apply these transformations is below: |
| |
| // [raw decoded frame] ----visible rect clipping ---->[visible frame] ---rotation ---> present |
| // ^ ^ |
| // | | |
| // coded size display size |
| // The table holds test videos meta infos, including mimeType to check browser compatibility |
| // video color space, raw frame content layout and the frame displayed layout. |
| export const kVideoInfo = makeTable({ |
| table: { |
| 'four-colors-vp8-bt601.webm': { |
| mimeType: 'video/webm; codecs=vp8', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-h264-bt601.mp4': { |
| mimeType: 'video/mp4; codecs=avc1.4d400c', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-vp9-bt601.webm': { |
| mimeType: 'video/webm; codecs=vp9', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-vp9-bt709.webm': { |
| mimeType: 'video/webm; codecs=vp9', |
| colorSpace: 'bt709', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| // video coded content has been rotate |
| 'four-colors-h264-bt601-rotate-90.mp4': { |
| mimeType: 'video/mp4; codecs=avc1.4d400c', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'red', |
| topRightColor: 'green', |
| bottomLeftColor: 'yellow', |
| bottomRightColor: 'blue', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-h264-bt601-rotate-180.mp4': { |
| mimeType: 'video/mp4; codecs=avc1.4d400c', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'green', |
| topRightColor: 'blue', |
| bottomLeftColor: 'red', |
| bottomRightColor: 'yellow', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-h264-bt601-rotate-270.mp4': { |
| mimeType: 'video/mp4; codecs=avc1.4d400c', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'blue', |
| topRightColor: 'yellow', |
| bottomLeftColor: 'green', |
| bottomRightColor: 'red', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-vp9-bt601-rotate-90.mp4': { |
| mimeType: 'video/mp4; codecs=vp09.00.10.08', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'red', |
| topRightColor: 'green', |
| bottomLeftColor: 'yellow', |
| bottomRightColor: 'blue', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-vp9-bt601-rotate-180.mp4': { |
| mimeType: 'video/mp4; codecs=vp09.00.10.08', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'green', |
| topRightColor: 'blue', |
| bottomLeftColor: 'red', |
| bottomRightColor: 'yellow', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-vp9-bt601-rotate-270.mp4': { |
| mimeType: 'video/mp4; codecs=vp09.00.10.08', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'blue', |
| topRightColor: 'yellow', |
| bottomLeftColor: 'green', |
| bottomRightColor: 'red', |
| }, |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| }, |
| 'four-colors-h264-bt601-hflip.mp4': { |
| mimeType: 'video/mp4; codecs=avc1.4d400c', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'red', |
| topRightColor: 'yellow', |
| bottomLeftColor: 'green', |
| bottomRightColor: 'blue', |
| }, |
| }, |
| 'four-colors-h264-bt601-vflip.mp4': { |
| mimeType: 'video/mp4; codecs=avc1.4d400c', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'blue', |
| topRightColor: 'green', |
| bottomLeftColor: 'yellow', |
| bottomRightColor: 'red', |
| }, |
| }, |
| 'four-colors-vp9-bt601-hflip.mp4': { |
| mimeType: 'video/mp4; codecs=vp09.00.10.08', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'red', |
| topRightColor: 'yellow', |
| bottomLeftColor: 'green', |
| bottomRightColor: 'blue', |
| }, |
| }, |
| 'four-colors-vp9-bt601-vflip.mp4': { |
| mimeType: 'video/mp4; codecs=vp09.00.10.08', |
| colorSpace: 'bt601', |
| coded: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| display: { |
| topLeftColor: 'blue', |
| topRightColor: 'green', |
| bottomLeftColor: 'yellow', |
| bottomRightColor: 'red', |
| }, |
| }, |
| }, |
| } as const); |
| |
| type VideoName = keyof typeof kVideoInfo; |
| export const kVideoNames: readonly VideoName[] = keysOf(kVideoInfo); |
| |
| export const kPredefinedColorSpace = ['display-p3', 'srgb'] as const; |
| |
| /** |
| * Starts playing a video and waits for it to be consumable. |
| * Returns a promise which resolves after `callback` (which may be async) completes. |
| * |
| * @param video An HTML5 Video element. |
| * @param callback Function to call when video is ready. |
| * |
| * Adapted from https://github.com/KhronosGroup/WebGL/blob/main/sdk/tests/js/webgl-test-utils.js |
| */ |
| export function startPlayingAndWaitForVideo( |
| video: HTMLVideoElement, |
| callback: () => unknown | Promise<unknown> |
| ): Promise<void> { |
| return raceWithRejectOnTimeout( |
| new Promise((resolve, reject) => { |
| const callbackAndResolve = () => |
| void (async () => { |
| try { |
| await callback(); |
| resolve(); |
| } catch (ex) { |
| reject(ex); |
| } |
| })(); |
| if (video.error) { |
| reject( |
| new ErrorWithExtra('Video.error: ' + video.error.message, () => ({ error: video.error })) |
| ); |
| return; |
| } |
| |
| video.addEventListener( |
| 'error', |
| event => |
| reject( |
| new ErrorWithExtra('Video received "error" event, message: ' + event.message, () => ({ |
| event, |
| })) |
| ), |
| true |
| ); |
| |
| if (video.requestVideoFrameCallback) { |
| video.requestVideoFrameCallback(() => { |
| callbackAndResolve(); |
| }); |
| } else { |
| // If requestVideoFrameCallback isn't available, check each frame if the video has advanced. |
| const timeWatcher = () => { |
| if (video.currentTime > 0) { |
| callbackAndResolve(); |
| } else { |
| requestAnimationFrame(timeWatcher); |
| } |
| }; |
| timeWatcher(); |
| } |
| |
| video.loop = true; |
| video.muted = true; |
| video.preload = 'auto'; |
| video.play().catch(reject); |
| }), |
| 2000, |
| 'Video never became ready' |
| ); |
| } |
| |
| /** |
| * Fire a `callback` when the script animation reaches a new frame. |
| * Returns a promise which resolves after `callback` (which may be async) completes. |
| */ |
| export function waitForNextTask(callback: () => unknown | Promise<unknown>): Promise<void> { |
| const { promise, callbackAndResolve } = callbackHelper(callback, 'wait for next task timed out'); |
| timeout(() => { |
| callbackAndResolve(); |
| }, 0); |
| |
| return promise; |
| } |
| |
| /** |
| * Fire a `callback` when the video reaches a new frame. |
| * Returns a promise which resolves after `callback` (which may be async) completes. |
| * |
| * MAINTENANCE_TODO: Find a way to implement this for browsers without requestVideoFrameCallback as |
| * well, similar to the timeWatcher path in startPlayingAndWaitForVideo. If that path is proven to |
| * work well, we can consider getting rid of the requestVideoFrameCallback path. |
| */ |
| export function waitForNextFrame( |
| video: HTMLVideoElement, |
| callback: () => unknown | Promise<unknown> |
| ): Promise<void> { |
| const { promise, callbackAndResolve } = callbackHelper(callback, 'waitForNextFrame timed out'); |
| |
| if ('requestVideoFrameCallback' in video) { |
| video.requestVideoFrameCallback(() => { |
| callbackAndResolve(); |
| }); |
| } else { |
| throw new SkipTestCase('waitForNextFrame currently requires requestVideoFrameCallback'); |
| } |
| |
| return promise; |
| } |
| |
| export async function getVideoFrameFromVideoElement( |
| test: Fixture, |
| video: HTMLVideoElement |
| ): Promise<VideoFrame> { |
| test.skipIf(video.captureStream === undefined, 'HTMLVideoElement.captureStream is not supported'); |
| |
| return raceWithRejectOnTimeout( |
| new Promise<VideoFrame>(resolve => { |
| const videoTrack: MediaStreamVideoTrack = video |
| .captureStream() |
| .getVideoTracks()[0] as MediaStreamVideoTrack; |
| const trackProcessor: MediaStreamTrackProcessor<VideoFrame> = new MediaStreamTrackProcessor({ |
| track: videoTrack, |
| }); |
| const transformer: TransformStream = new TransformStream({ |
| transform(videoFrame, _controller) { |
| videoTrack.stop(); |
| test.trackForCleanup(videoFrame); |
| resolve(videoFrame); |
| }, |
| flush(controller) { |
| controller.terminate(); |
| }, |
| }); |
| const trackGenerator: MediaStreamTrackGenerator<VideoFrame> = new MediaStreamTrackGenerator({ |
| kind: 'video', |
| }); |
| trackProcessor.readable |
| .pipeThrough(transformer) |
| .pipeTo(trackGenerator.writable) |
| .catch(() => {}); |
| }), |
| 2000, |
| 'Video never became ready' |
| ); |
| } |
| |
| /** |
| * Create HTMLVideoElement based on VideoName. Check whether video is playable in current |
| * browser environment. |
| * Returns a HTMLVideoElement. |
| * |
| * @param t: GPUTest that requires getting HTMLVideoElement |
| * @param videoName: Required video name |
| * |
| */ |
| export function getVideoElement(t: GPUTest, videoName: VideoName): HTMLVideoElement { |
| if (typeof HTMLVideoElement === 'undefined') { |
| t.skip('HTMLVideoElement not available'); |
| } |
| |
| const videoElement = document.createElement('video'); |
| const videoInfo = kVideoInfo[videoName]; |
| |
| if (videoElement.canPlayType(videoInfo.mimeType) === '') { |
| t.skip('Video codec is not supported'); |
| } |
| |
| const videoUrl = getResourcePath(videoName); |
| videoElement.src = videoUrl; |
| |
| t.trackForCleanup(videoElement); |
| |
| return videoElement; |
| } |
| |
| /** |
| * Helper for doing something inside of a (possibly async) callback (directly, not in a following |
| * microtask), and returning a promise when the callback is done. |
| * MAINTENANCE_TODO: Use this in startPlayingAndWaitForVideo (and make sure it works). |
| */ |
| function callbackHelper( |
| callback: () => unknown | Promise<unknown>, |
| timeoutMessage: string |
| ): { promise: Promise<void>; callbackAndResolve: () => void } { |
| let callbackAndResolve: () => void; |
| |
| const promiseWithoutTimeout = new Promise<void>((resolve, reject) => { |
| callbackAndResolve = () => |
| void (async () => { |
| try { |
| await callback(); // catches both exceptions and rejections |
| resolve(); |
| } catch (ex) { |
| reject(ex); |
| } |
| })(); |
| }); |
| const promise = raceWithRejectOnTimeout(promiseWithoutTimeout, 2000, timeoutMessage); |
| return { promise, callbackAndResolve: callbackAndResolve! }; |
| } |
| |
| /** |
| * Get a MediaStream from the default webcam via `getUserMedia()`. |
| */ |
| async function getStreamFromCamera( |
| test: Fixture, |
| videoTrackConstraints: MediaTrackConstraints | true |
| ): Promise<MediaStream> { |
| test.skipIf(typeof navigator === 'undefined', 'navigator does not exist in this environment'); |
| test.skipIf( |
| typeof navigator.mediaDevices === 'undefined' || |
| typeof navigator.mediaDevices.getUserMedia === 'undefined', |
| "Browser doesn't support capture frame from camera." |
| ); |
| |
| const stream = await navigator.mediaDevices.getUserMedia({ |
| audio: false, |
| video: videoTrackConstraints, |
| }); |
| test.trackForCleanup({ |
| close() { |
| for (const track of stream.getTracks()) { |
| track.stop(); |
| } |
| }, |
| }); |
| return stream; |
| } |
| |
| /** |
| * Chrome on macOS (at least) takes a while before it switches from blank frames |
| * to real frames. Wait up to 50 frames for something to show up on the camera. |
| */ |
| async function waitForNonBlankFrame({ |
| getSource, |
| waitForNextFrame, |
| }: { |
| getSource: () => HTMLVideoElement | VideoFrame; |
| waitForNextFrame: () => Promise<void>; |
| }) { |
| const cvs = document.createElement('canvas'); |
| [cvs.width, cvs.height] = [4, 4]; |
| const ctx = cvs.getContext('2d', { willReadFrequently: true })!; |
| let foundNonBlankFrame = false; |
| for (let i = 0; i < 50; ++i) { |
| ctx.drawImage(getSource(), 0, 0, cvs.width, cvs.height); |
| const pixels = new Uint32Array(ctx.getImageData(0, 0, cvs.width, cvs.height).data.buffer); |
| // Look only at RGB, ignore alpha. |
| if (pixels.some(p => (p & 0x00ffffff) !== 0)) { |
| foundNonBlankFrame = true; |
| break; |
| } |
| await waitForNextFrame(); |
| } |
| assert(foundNonBlankFrame, 'Failed to get a non-blank video frame'); |
| } |
| |
| /** |
| * Uses MediaStreamTrackProcessor to capture a VideoFrame from the camera. |
| * Skips the test if not supported. |
| * @param videoTrackConstraints - MediaTrackConstraints (e.g. width/height) to pass to |
| * `getUserMedia()`, or `true` if none. |
| */ |
| export async function getVideoFrameFromCamera( |
| test: Fixture, |
| videoTrackConstraints: MediaTrackConstraints | true |
| ): Promise<VideoFrame> { |
| test.skipIf( |
| typeof MediaStreamTrackProcessor === 'undefined', |
| 'MediaStreamTrackProcessor not supported' |
| ); |
| |
| const stream = await getStreamFromCamera(test, videoTrackConstraints); |
| const tracks = stream.getVideoTracks(); |
| assert(tracks.length > 0, 'no tracks found'); |
| const track = tracks[0] as MediaStreamVideoTrack; |
| |
| const trackProcessor = new MediaStreamTrackProcessor({ track }); |
| const reader = trackProcessor.readable.getReader(); |
| |
| const waitForNextFrame = async () => { |
| const result = await reader.read(); |
| assert(!result.done, "MediaStreamTrackProcessor: Couldn't get valid frame from stream."); |
| return result.value; |
| }; |
| let frame: VideoFrame = await waitForNextFrame(); |
| await waitForNonBlankFrame({ |
| getSource: () => frame, |
| async waitForNextFrame() { |
| frame.close(); |
| frame = await waitForNextFrame(); |
| }, |
| }); |
| |
| test.trackForCleanup(frame); |
| return frame; |
| } |
| |
| /** |
| * Create an HTMLVideoElement from the camera stream. Skips the test if not supported. |
| * @param videoTrackConstraints - MediaTrackConstraints (e.g. width/height) to pass to |
| * `getUserMedia()`, or `true` if none. |
| * @param paused - whether the video should be paused before returning. |
| */ |
| export async function getVideoElementFromCamera( |
| test: Fixture, |
| videoTrackConstraints: MediaTrackConstraints | true, |
| paused: boolean |
| ): Promise<HTMLVideoElement> { |
| const stream = await getStreamFromCamera(test, videoTrackConstraints); |
| |
| // Main thread |
| const video = document.createElement('video'); |
| video.loop = false; |
| video.muted = true; |
| video.setAttribute('playsinline', ''); |
| video.srcObject = stream; |
| await new Promise(resolve => { |
| video.onloadedmetadata = resolve; |
| }); |
| await startPlayingAndWaitForVideo(video, () => {}); |
| |
| await waitForNonBlankFrame({ |
| getSource: () => video, |
| waitForNextFrame: () => |
| new Promise(resolve => |
| video.requestVideoFrameCallback(() => { |
| resolve(); |
| }) |
| ), |
| }); |
| |
| if (paused) { |
| // Pause the video so we get consistent readbacks. |
| await new Promise(resolve => { |
| video.onpause = resolve; |
| video.pause(); |
| }); |
| } |
| |
| return video; |
| } |
| |
| const kFourColorsInfo = { |
| display: { |
| topLeftColor: 'yellow', |
| topRightColor: 'red', |
| bottomLeftColor: 'blue', |
| bottomRightColor: 'green', |
| }, |
| } as const; |
| |
| export const kEXIFImageInfo = makeTable({ |
| table: { |
| 'four-colors.jpg': kFourColorsInfo, |
| 'four-colors-rotate-90-cw.jpg': kFourColorsInfo, |
| 'four-colors-rotate-180-cw.jpg': kFourColorsInfo, |
| 'four-colors-rotate-270-cw.jpg': kFourColorsInfo, |
| }, |
| } as const); |
| |
| export const kImageInfo = makeTable({ |
| table: { |
| 'four-colors.jpg': kFourColorsInfo, |
| 'four-colors.png': kFourColorsInfo, |
| 'four-colors.bmp': kFourColorsInfo, |
| 'four-colors.webp': kFourColorsInfo, |
| 'four-colors.gif': kFourColorsInfo, |
| 'four-colors.avif': kFourColorsInfo, |
| 'four-colors.ico': kFourColorsInfo, |
| 'four-colors.svg': kFourColorsInfo, |
| }, |
| } as const); |
| |
| type ImageName = keyof typeof kImageInfo; |
| export const kImageNames: readonly ImageName[] = keysOf(kImageInfo); |
| |
| type EXIFImageName = keyof typeof kEXIFImageInfo; |
| export const kEXIFImageNames: readonly EXIFImageName[] = keysOf(kEXIFImageInfo); |
| |
| type ObjectTypeFromFile = (typeof kObjectTypeFromFiles)[number]; |
| export const kObjectTypeFromFiles = [ |
| 'ImageBitmap-from-Blob', |
| 'ImageBitmap-from-Image', |
| 'Image', |
| ] as const; |
| |
| /** |
| * Load image file(e.g. *.jpg) from ImageBitmap, blob or HTMLImageElement. And |
| * convert the result to valid source that GPUCopyExternalImageSource supported. |
| */ |
| export async function getSourceFromEXIFImageFile( |
| test: GPUTest, |
| exifImageName: EXIFImageName, |
| objectTypeFromFile: ObjectTypeFromFile |
| ): Promise<ImageBitmap | HTMLImageElement> { |
| const imageUrl = getResourcePath(exifImageName); |
| |
| switch (objectTypeFromFile) { |
| case 'ImageBitmap-from-Blob': { |
| // MAINTENANCE_TODO: resource folder path when using service worker is not correct. Return |
| // the correct path to load resource in correct place. |
| // The wrong path: /out/webgpu/webworker/web_platform/copyToTexture/resources |
| test.skipIf( |
| globalThis.constructor.name === 'ServiceWorkerGlobalScope', |
| 'Try to load image resource from serivce worker but the path is not correct.' |
| ); |
| test.skipIf( |
| typeof createImageBitmap === 'undefined', |
| 'createImageBitmap does not exist in this environment' |
| ); |
| // Load image file through fetch. |
| const response = await fetch(imageUrl); |
| return createImageBitmap(await response.blob()); |
| } |
| case 'ImageBitmap-from-Image': |
| case 'Image': { |
| // Skip test if HTMLImageElement is not available, e.g. in worker. |
| test.skipIf( |
| typeof HTMLImageElement === 'undefined', |
| 'Try to use HTMLImage do image file decoding but HTMLImageElement not available.' |
| ); |
| |
| // Load image file through HTMLImageElement. |
| const image = new Image(); |
| image.src = imageUrl; |
| await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout'); |
| if (objectTypeFromFile === 'Image') { |
| return image; |
| } |
| |
| return createImageBitmap(image); |
| } |
| } |
| } |
| |
| /** |
| * Create HTMLImageElement and load image file and waits for it to be loaded. |
| * Returns a promise which resolves after `callback` (which may be async) completes. |
| * |
| * @param imageName An valid imageName in kkImageInfo table . |
| * @param callback Function to call when HTMLImageElement is loaded. |
| * |
| */ |
| export function loadImageFileAndRun( |
| test: GPUTest, |
| imageName: ImageName, |
| callback: (image: HTMLImageElement) => unknown | Promise<unknown> |
| ): Promise<void> { |
| return raceWithRejectOnTimeout( |
| new Promise((resolve, reject) => { |
| const callbackAndResolve = (image: HTMLImageElement) => |
| void (async () => { |
| try { |
| await callback(image); |
| resolve(); |
| } catch (ex) { |
| reject(ex); |
| } |
| })(); |
| // Skip test if HTMLImageElement is not available, e.g. in worker. |
| test.skipIf( |
| typeof HTMLImageElement === 'undefined', |
| 'Try to use HTMLImage do image file decoding but HTMLImageElement not available.' |
| ); |
| const image = new Image(); |
| image.src = getResourcePath(imageName); |
| image.onload = () => { |
| callbackAndResolve(image); |
| }; |
| }), |
| 2000, |
| 'Video never became ready' |
| ); |
| } |
