LayoutTests/webgl/resources/webgl_test_files/conformance/extensions/webgl-webcodecs-video-frame.html - WebKit - Git at Google

 <!--
 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">
   <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/out-of-bounds-test.js"></script>
   <script src="../../../../extensions/proposals/WEBGL_webcodecs_video_frame/webgl_webcodecs_video_frame.js"></script>
   <style>
     canvas {
       padding: 10px;
       background: gold;
     }

     button {
       background-color: #555555;
       border: none;
       color: white;
       padding: 15px 32px;
       width: 150px;
       text-align: center;
       display: block;
       font-size: 16px;
     }
   </style>
 </head>

 <body>
   <canvas id="src" width="640" height="480"></canvas>
   <canvas id="dst" width="640" height="480"></canvas>
   <p id="info"></p>
   <div id="description"></div>
   <div id="console"></div>
   <script>
     "use strict";
     description("Test of importing Videoframe from Webcodecs to Webgl");

     const kIsRunningTest = true;
     const kMaxFrame = 10;
     const kTestPixel = [255, 128, 0, 255];
     // Sum of pixel difference of R/G/B channel. Use to decide whether a
     // pixel is matched with another.
     const codec_string = "vp09.00.51.08.00";

     let wtu = WebGLTestUtils;
     let cnv = document.getElementById("src");
     let src_width = cnv.width;
     let src_height = cnv.height;
     let src_color = "rgba(" + kTestPixel[0].toString() + "," + kTestPixel[1].toString() + ","
       + kTestPixel[2].toString() + "," + kTestPixel[3].toString() + ")";
     let frame_counter = 0;
     let pixelCompareTolerance = 5;

     function getQueryVariable(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i = 0; i < vars.length; i++) {
         var pair = vars[i].split("=");
         if (pair[0] == variable) { return pair[1]; }
       }
       return false;
     }

     let th = parseInt(getQueryVariable('threshold'));
     if (!isNaN(th))
       pixelCompareTolerance = th;

     async function startDrawing() {
       let cnv = document.getElementById("src");
       var ctx = cnv.getContext('2d', { alpha: false });

       ctx.fillStyle = src_color;
       let drawOneFrame = function (time) {
         ctx.fillStyle = src_color;
         ctx.fillRect(0, 0, src_width, src_height);
         window.requestAnimationFrame(drawOneFrame);
       }
       window.requestAnimationFrame(drawOneFrame);
     }

     function captureAndEncode(processChunk) {
       let cnv = document.getElementById("src");
       let fps = 60;
       let pending_outputs = 0;
       let stream = cnv.captureStream(fps);
       let processor = new MediaStreamTrackProcessor(stream.getVideoTracks()[0]);

       const init = {
         output: (chunk) => {
           testPassed("Encode frame successfully.");
           pending_outputs--;
           processChunk(chunk);
         },
         error: (e) => {
           testFailed("Failed to encode frame.");
           finishTest();
           vtr.stop();
         }
       };

       const config = {
         codec: codec_string,
         width: cnv.width,
         height: cnv.height,
         bitrate: 10e6,
         framerate: fps,
       };

       let encoder = new VideoEncoder(init);
       encoder.configure(config);

       const frame_reader = processor.readable.getReader();
       frame_reader.read().then(function processFrame({done, value}) {
         if (done)
           return;

         if (pending_outputs > 30) {
           console.log("drop this frame");
           // Too many frames in flight, encoder is overwhelmed
           // let's drop this frame.
           value.close();
           frame_reader.read().then(processFrame);
           return;
         }

         if(frame_counter == kMaxFrame) {
           frame_reader.releaseLock();
           processor.readable.cancel();
           value.close();
           return;
         }

         frame_counter++;
         pending_outputs++;
         const insert_keyframe = (frame_counter % 150) == 0;
         encoder.encode(value, { keyFrame: insert_keyframe });

         frame_reader.read().then(processFrame);
       });
     }

     function startDecodingAndRendering(cnv, handleFrame) {
       const init = {
         output: handleFrame,
         error: (e) => {
           testFailed("Failed to decode frame.");
           finishTest();
         }
       };

       const config = {
         codec: codec_string,
         codedWidth: cnv.width,
         codedHeight: cnv.height,
         acceleration: "deny",

       };

       let decoder = new VideoDecoder(init);
       decoder.configure(config);
       return decoder;
     }

     function isFramePixelMatched(gl, th_per_pixel = pixelCompareTolerance) {
       WebGLTestUtils.checkCanvasRect(gl, 0, 0, src_width, src_width, kTestPixel, "should be orange", pixelCompareTolerance)
     }

     function main() {
       if (!("VideoEncoder" in window)) {
         testPassed("WebCodecs API is not supported.");
         finishTest();
         return;
       }
       let cnv = document.getElementById("dst");

       let webgl_webcodecs_test_context = {
         maxFrameTested: kMaxFrame,
         displayed_frame: 0,
         isFramePixelMatched: isFramePixelMatched,
         testFailed: testFailed,
         testPassed: testPassed,
         finishTest: finishTest
       };
       setTestMode(webgl_webcodecs_test_context);
       let handleFrame = requestWebGLVideoFrameHandler(cnv);
       if (handleFrame === null) {
         finishTest();
         return;
       }

       startDrawing();
       let decoder = startDecodingAndRendering(cnv, handleFrame);
       captureAndEncode((chunk) => {
         decoder.decode(chunk);
       });
     }

     document.body.onload = main;
   </script>

 </body>

 </html>
	<!--
	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">
	<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/out-of-bounds-test.js"></script>
	<script src="../../../../extensions/proposals/WEBGL_webcodecs_video_frame/webgl_webcodecs_video_frame.js"></script>
	<style>
	canvas {
	padding: 10px;
	background: gold;
	}

	button {
	background-color: #555555;
	border: none;
	color: white;
	padding: 15px 32px;
	width: 150px;
	text-align: center;
	display: block;
	font-size: 16px;
	}
	</style>
	</head>

	<body>
	<canvas id="src" width="640" height="480"></canvas>
	<canvas id="dst" width="640" height="480"></canvas>
	<p id="info"></p>
	<div id="description"></div>
	<div id="console"></div>
	<script>
	"use strict";
	description("Test of importing Videoframe from Webcodecs to Webgl");

	const kIsRunningTest = true;
	const kMaxFrame = 10;
	const kTestPixel = [255, 128, 0, 255];
	// Sum of pixel difference of R/G/B channel. Use to decide whether a
	// pixel is matched with another.
	const codec_string = "vp09.00.51.08.00";

	let wtu = WebGLTestUtils;
	let cnv = document.getElementById("src");
	let src_width = cnv.width;
	let src_height = cnv.height;
	let src_color = "rgba(" + kTestPixel[0].toString() + "," + kTestPixel[1].toString() + ","
	+ kTestPixel[2].toString() + "," + kTestPixel[3].toString() + ")";
	let frame_counter = 0;
	let pixelCompareTolerance = 5;

	function getQueryVariable(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i = 0; i < vars.length; i++) {
	var pair = vars[i].split("=");
	if (pair[0] == variable) { return pair[1]; }
	}
	return false;
	}

	let th = parseInt(getQueryVariable('threshold'));
	if (!isNaN(th))
	pixelCompareTolerance = th;

	async function startDrawing() {
	let cnv = document.getElementById("src");
	var ctx = cnv.getContext('2d', { alpha: false });

	ctx.fillStyle = src_color;
	let drawOneFrame = function (time) {
	ctx.fillStyle = src_color;
	ctx.fillRect(0, 0, src_width, src_height);
	window.requestAnimationFrame(drawOneFrame);
	}
	window.requestAnimationFrame(drawOneFrame);
	}

	function captureAndEncode(processChunk) {
	let cnv = document.getElementById("src");
	let fps = 60;
	let pending_outputs = 0;
	let stream = cnv.captureStream(fps);
	let processor = new MediaStreamTrackProcessor(stream.getVideoTracks()[0]);

	const init = {
	output: (chunk) => {
	testPassed("Encode frame successfully.");
	pending_outputs--;
	processChunk(chunk);
	},
	error: (e) => {
	testFailed("Failed to encode frame.");
	finishTest();
	vtr.stop();
	}
	};

	const config = {
	codec: codec_string,
	width: cnv.width,
	height: cnv.height,
	bitrate: 10e6,
	framerate: fps,
	};

	let encoder = new VideoEncoder(init);
	encoder.configure(config);

	const frame_reader = processor.readable.getReader();
	frame_reader.read().then(function processFrame({done, value}) {
	if (done)
	return;

	if (pending_outputs > 30) {
	console.log("drop this frame");
	// Too many frames in flight, encoder is overwhelmed
	// let's drop this frame.
	value.close();
	frame_reader.read().then(processFrame);
	return;
	}

	if(frame_counter == kMaxFrame) {
	frame_reader.releaseLock();
	processor.readable.cancel();
	value.close();
	return;
	}

	frame_counter++;
	pending_outputs++;
	const insert_keyframe = (frame_counter % 150) == 0;
	encoder.encode(value, { keyFrame: insert_keyframe });

	frame_reader.read().then(processFrame);
	});
	}

	function startDecodingAndRendering(cnv, handleFrame) {
	const init = {
	output: handleFrame,
	error: (e) => {
	testFailed("Failed to decode frame.");
	finishTest();
	}
	};

	const config = {
	codec: codec_string,
	codedWidth: cnv.width,
	codedHeight: cnv.height,
	acceleration: "deny",

	};

	let decoder = new VideoDecoder(init);
	decoder.configure(config);
	return decoder;
	}

	function isFramePixelMatched(gl, th_per_pixel = pixelCompareTolerance) {
	WebGLTestUtils.checkCanvasRect(gl, 0, 0, src_width, src_width, kTestPixel, "should be orange", pixelCompareTolerance)
	}

	function main() {
	if (!("VideoEncoder" in window)) {
	testPassed("WebCodecs API is not supported.");
	finishTest();
	return;
	}
	let cnv = document.getElementById("dst");

	let webgl_webcodecs_test_context = {
	maxFrameTested: kMaxFrame,
	displayed_frame: 0,
	isFramePixelMatched: isFramePixelMatched,
	testFailed: testFailed,
	testPassed: testPassed,
	finishTest: finishTest
	};
	setTestMode(webgl_webcodecs_test_context);
	let handleFrame = requestWebGLVideoFrameHandler(cnv);
	if (handleFrame === null) {
	finishTest();
	return;
	}

	startDrawing();
	let decoder = startDecodingAndRendering(cnv, handleFrame);
	captureAndEncode((chunk) => {
	decoder.decode(chunk);
	});
	}

	document.body.onload = main;
	</script>

	</body>

	</html>