| <!-- |
| Copyright (c) 2021 The Khronos Group Inc. |
| Use of this source code is governed by an MIT-style license that can be |
| found in the LICENSE.txt file. |
| --> |
| |
| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <title>Verifies rotation metadata tag is respected when uploading videos to WebGL textures.</title> |
| <link rel="stylesheet" href="../../../resources/js-test-style.css" /> |
| <script src="../../../js/js-test-pre.js"></script> |
| <script src="../../../js/webgl-test-utils.js"></script> |
| <script src="../../../js/tests/tex-image-and-sub-image-utils.js"></script> |
| </head> |
| |
| <body onload="run()"> |
| <canvas id="c" width="256" height="256"></canvas> |
| <div id="description"></div> |
| <div id="console"></div> |
| <script> |
| "use strict"; |
| description(); |
| let wtu = WebGLTestUtils; |
| let tiu = TexImageUtils; |
| let canvas = document.getElementById("c"); |
| let gl = wtu.create3DContext(canvas); |
| let program = tiu.setupTexturedQuad(gl, gl.RGBA); |
| const resourcePath = "../../../resources/"; |
| const mp4Tolerance = 10; |
| // Significantly higher tolerance needed for VP9 tests. http://crbug.com/1219015 . |
| const vp9Tolerance = 45; |
| |
| const expectedColors = { |
| top: { location: [0.5, 0.25], color: [255, 0, 0] }, |
| left: { location: [0.4, 0.5], color: [0, 0, 255] }, |
| right: { location: [0.6, 0.5], color: [255, 255, 0] }, |
| bottom: { location: [0.5, 0.75], color: [0, 255, 0] }, |
| } |
| |
| function output(str) { |
| debug(str); |
| bufferedLogToConsole(str); |
| } |
| |
| function checkPixels(tolerance) { |
| for (let place in expectedColors) { |
| let color = expectedColors[place]; |
| let loc = color.location; |
| let x = loc[0]; |
| let y = loc[1]; |
| output(" Checking " + place); |
| wtu.checkCanvasRect(gl, Math.floor(canvas.width * x), Math.floor(canvas.height * y), 1, 1, |
| color.color, "shouldBe " + color.color + " +/-" + tolerance, tolerance); |
| } |
| } |
| |
| function loadVideoElement(filename) { |
| return new Promise((resolve) => { |
| const video = document.createElement('video'); |
| video.crossOrigin = 'anonymous'; |
| video.src = resourcePath + filename; |
| wtu.startPlayingAndWaitForVideo(video, resolve); |
| }); |
| } |
| |
| async function testVideoElement(filename, isVP9) { |
| const video = await loadVideoElement(filename); |
| |
| output("----------------------------------------------------------------"); |
| output("Testing " + filename + " via HTMLVideoElement"); |
| |
| output(" Testing texImage2D"); |
| gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video); |
| wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); |
| const localTolerance = isVP9 ? vp9Tolerance : mp4Tolerance; |
| checkPixels(localTolerance); |
| |
| output(" Testing texSubImage2D"); |
| gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, video.videoWidth, video.videoHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); |
| gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, video); |
| wtu.clearAndDrawUnitQuad(gl, [0, 0, 0, 255]); |
| checkPixels(localTolerance); |
| } |
| |
| async function run() { |
| await (async () => { |
| const video = document.createElement('video'); |
| if (!video.canPlayType) { |
| testFailed("video.canPlayType required method missing"); |
| return; |
| } |
| |
| let supports_h264 = !!video.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/no/, ''); |
| let supports_vp9 = !!video.canPlayType('video/mp4; codecs="vp09.00.10.08"').replace(/no/, ''); |
| if (!supports_h264 && !supports_vp9) { |
| testFailed("No supported video types."); |
| return; |
| } |
| |
| let tex = gl.createTexture(); |
| // Bind the texture to the default texture unit 0 |
| gl.bindTexture(gl.TEXTURE_2D, tex); |
| // Set up texture parameters |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); |
| gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); |
| |
| // These files were created by converting exif-orientation-test.psd to mp4 |
| // files, rotating them using the transpose filter, and adding rotate metadata, all |
| // using the ffmpeg command-line tool. |
| // |
| // From sdk/tests/resources/ directory: |
| // |
| // 0: |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96 -pix_fmt yuv420p -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=0 video-rotation-0.mp4 |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96 -pix_fmt yuv420p -crf 0 -vcodec libvpx-vp9 -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=0 video-rotation-0.vp9.mp4 |
| // |
| // 90: |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96,transpose=2 -pix_fmt yuv420p -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=270 video-rotation-90.mp4 |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96,transpose=2 -pix_fmt yuv420p -crf 0 -vcodec libvpx-vp9 -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=270 video-rotation-90.vp9.mp4 |
| // |
| // 180: |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96,transpose=2,transpose=2 -pix_fmt yuv420p -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=180 video-rotation-180.mp4 |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96,transpose=2,transpose=2 -pix_fmt yuv420p -crf 0 -vcodec libvpx-vp9 -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=180 video-rotation-180.vp9.mp4 |
| // |
| // 270: |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96,transpose=1 -pix_fmt yuv420p -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=90 video-rotation-270.mp4 |
| // ffmpeg -noautorotate -i exif-orientation-originals\exif-orientation-test.psd -vf scale=128x96,transpose=1 -pix_fmt yuv420p -crf 0 -vcodec libvpx-vp9 -y temp.mp4 |
| // ffmpeg -i temp.mp4 -c copy -metadata:s:v:0 rotate=90 video-rotation-270.vp9.mp4 |
| |
| const filenames = [ |
| "video-rotation-0", |
| "video-rotation-90", |
| "video-rotation-180", |
| "video-rotation-270", |
| ]; |
| |
| if (supports_h264) { |
| for (let fn of filenames) |
| await testVideoElement(fn + ".mp4", false); |
| } |
| |
| if (supports_vp9) { |
| for (let fn of filenames) |
| await testVideoElement(fn + ".vp9.mp4", true); |
| } |
| })(); |
| |
| finishTest(); |
| } |
| |
| var successfullyParsed = true; |
| </script> |
| </body> |
| |
| </html> |
