| <!doctype html> |
| <html> |
| <head> |
| <title>MediaRecorder Dataavailable</title> |
| <link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#mediarecorder"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../common/canvas-tests.js"></script> |
| <link rel="stylesheet" href="../common/canvas-tests.css"> |
| </head> |
| <body> |
| <div> |
| <video id="player"> |
| </video> |
| </div> |
| <div> |
| <canvas id="canvas" width="200" height="200"> |
| </canvas> |
| <canvas id="frame" width="200" height="200"> |
| </canvas> |
| </div> |
| <script> |
| var context; |
| var drawStartTime; |
| |
| function createVideoStream() { |
| const canvas = document.getElementById("canvas"); |
| context = canvas.getContext('2d'); |
| return canvas.captureStream(); |
| } |
| |
| function doRedImageDraw() { |
| if (context) { |
| context.fillStyle = "#ff0000"; |
| context.fillRect(0, 0, 200, 200); |
| if (Date.now() - drawStartTime < 500) { |
| window.requestAnimationFrame(doRedImageDraw); |
| } else { |
| drawStartTime = Date.now(); |
| doGreenImageDraw(); |
| } |
| } |
| } |
| |
| function doGreenImageDraw() { |
| if (context) { |
| context.fillStyle = "#00ff00"; |
| context.fillRect(0, 0, 200, 200); |
| if (Date.now() - drawStartTime < 2000) { |
| window.requestAnimationFrame(doGreenImageDraw); |
| } |
| } |
| } |
| |
| async_test(t => { |
| const video = createVideoStream(); |
| const recorder = new MediaRecorder(video); |
| let mode = 0; |
| |
| recorder.ondataavailable = t.step_func(blobEvent => { |
| assert_true(blobEvent instanceof BlobEvent, 'the type of event should be BlobEvent'); |
| assert_equals(blobEvent.type, 'dataavailable', 'the event type should be dataavailable'); |
| assert_true(blobEvent.isTrusted, 'isTrusted should be true when the event is created by C++'); |
| assert_true(blobEvent.data instanceof Blob, 'the type of data should be Blob'); |
| assert_true(blobEvent.data.size > 0, 'the blob should contain some buffers'); |
| t.done(); |
| }); |
| drawStartTime = Date.now(); |
| doRedImageDraw(); |
| recorder.start(); |
| assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully'); |
| setTimeout(() => { |
| recorder.stop(); |
| }, 2000); |
| }, 'Verify MediaRecorder is working in GPUProcess'); |
| |
| </script> |
| </body> |
| </html> |
