blob: 12cadf5a796298961668e9564439c0e9001ff686 [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>
</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 ac = new AudioContext();
const osc = ac.createOscillator();
const dest = ac.createMediaStreamDestination();
const audio = dest.stream;
osc.connect(dest);
const video = createVideoStream();
assert_equals(video.getAudioTracks().length, 0, "video mediastream starts with no audio track");
assert_equals(audio.getAudioTracks().length, 1, "audio mediastream starts with one audio track");
video.addTrack(audio.getAudioTracks()[0]);
assert_equals(video.getAudioTracks().length, 1, "video mediastream starts with one audio track");
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');
player.src = window.URL.createObjectURL(blobEvent.data);
const resFrame = document.getElementById("frame");
const resContext = resFrame.getContext('2d');
player.oncanplay = t.step_func(() => {
assert_greater_than(player.duration, 0.1, 'the duration should be greater than 100ms');
player.play();
});
player.onplay = () => {
player.pause();
player.currentTime = 0.05;
};
player.onseeked = t.step_func(() => {
resContext.drawImage(player, 0, 0);
if (!mode) {
_assertPixelApprox(resFrame, 25, 25, 255, 0, 0, 255, "25, 25", "255, 0, 0, 255", 50);
_assertPixelApprox(resFrame, 50, 50, 255, 0, 0, 255, "50, 50", "255, 0, 0, 255", 50);
mode = 1;
player.currentTime = Math.min(1.5, player.duration - 0.05);
} else {
_assertPixelApprox(resFrame, 20, 20, 0, 255, 0, 255, "20, 20", "0, 255, 0, 255", 50);
_assertPixelApprox(resFrame, 199, 199, 0, 255, 0, 255, "199, 199", "0, 255, 0, 255", 50);
t.done();
}
});
player.load();
});
drawStartTime = Date.now();
doRedImageDraw();
recorder.start();
assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully');
setTimeout(() => {
recorder.stop();
}, 2000);
}, 'MediaRecorder can successfully record the video for a audio-video stream');
</script>
</body>
</html>