| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Media Capture from Canvas Browser Test</title> |
| </head> |
| <body> |
| <div> Capture and playback from canvas elements.</div> |
| </body> |
| <script type="text/javascript" src="webrtc_test_utilities.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| const NUMBER_OF_EVENTS_TO_RECORD = 15; |
| const ON_DATA_AVAILABLE_THRESHOLD = 10; |
| |
| function checkForRedraw(canvas, drawCounter, drawFunction) { |
| if (++drawCounter <= NUMBER_OF_EVENTS_TO_RECORD) |
| requestAnimationFrame(function(){drawFunction(canvas, drawCounter)}) |
| } |
| |
| function draw2d(canvas, drawCounter) { |
| var ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'green'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| checkForRedraw(canvas, drawCounter, draw2d); |
| }; |
| |
| function drawWebGL(canvas, drawCounter) { |
| var gl = canvas.getContext('webgl'); |
| gl.clearColor(0, 1, 0, 1); |
| gl.clear(gl.COLOR_BUFFER_BIT); |
| checkForRedraw(canvas, drawCounter, drawWebGL); |
| }; |
| |
| function drawOffscreenCanvas(canvas, drawCounter) { |
| var ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'green'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| checkForRedraw(canvas, drawCounter, drawOffscreenCanvas); |
| }; |
| |
| function drawBitmapRenderer(canvas, drawCounter) { |
| var gl = canvas.getContext('bitmaprenderer'); |
| var offscreen = new OffscreenCanvas(canvas.width, canvas.height); |
| var ctx = offscreen.getContext('2d'); |
| ctx.fillStyle = 'green'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| gl.transferFromImageBitmap(offscreen.transferToImageBitmap()); |
| checkForRedraw(canvas, drawCounter, drawBitmapRenderer); |
| }; |
| |
| function testCanvasCapture(drawFunction) { |
| var canvas = document.createElement('canvas'); |
| canvas.width = canvas.height = 64; |
| |
| var stream = canvas.captureStream(); |
| assertTrue(stream, 'Error creating MediaStream'); |
| assertEquals(1, stream.getVideoTracks().length); |
| assertEquals(0, stream.getAudioTracks().length); |
| |
| var recorded_events = 0; |
| const recorder = new MediaRecorder(stream); |
| assertTrue(recorder, 'Error creating recorder out of the MediaStream'); |
| |
| recorder.ondataavailable = function(event) { |
| if (event.data.size > ON_DATA_AVAILABLE_THRESHOLD) { |
| if (++recorded_events == NUMBER_OF_EVENTS_TO_RECORD) |
| reportTestSuccess(); |
| } |
| }; |
| |
| recorder.start(0); |
| if (drawFunction.toString() == drawOffscreenCanvas.toString()) { |
| var offscreen = canvas.transferControlToOffscreen(); |
| drawFunction(offscreen, 0); |
| } else { |
| drawFunction(canvas, 0); |
| } |
| } |
| |
| </script> |
| </body> |
| </html> |
