| <!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); |
| } |
| } |
| } |
| |
| function checkForEmptyBlobCount() { |
| if (window.internals) |
| return internals.usingAppleInternalSDK(); |
| return true; |
| } |
| |
| async_test(t => { |
| const video = createVideoStream(); |
| const recorder = new MediaRecorder(video); |
| let nonEmptyBlobCount = 0; |
| recorder.ondataavailable = t.step_func(blobEvent => { |
| if (blobEvent.data.size <= 0 && checkForEmptyBlobCount()) |
| return; |
| if (++nonEmptyBlobCount <= 1) |
| return; |
| recorder.stop(); |
| clearTimeout(timeout); |
| clearInterval(interval); |
| t.done(); |
| }); |
| drawStartTime = Date.now(); |
| doRedImageDraw(); |
| |
| recorder.start(); |
| |
| let interval = setInterval(() => { |
| recorder.requestData(); |
| }, 500); |
| |
| let timeout = setTimeout(() => { |
| console.log("Got non empty blobs: " + nonEmptyBlobCount); |
| recorder.stop(); |
| assert_not_reached(); |
| }, 5000); |
| }, 'Verify MediaRecorder requestData returns data progressively'); |
| </script> |
| </body> |
| </html> |
