blob: 650325b5c47b275555755219a8fc9d354cacd137 [file] [log] [blame]
<!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>