| <!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> |
| </head> |
| <body> |
| <canvas id="canvas" width="200" height="200"> |
| </canvas> |
| <script> |
| var context; |
| |
| if (window.internals) |
| internals.setCustomPrivateRecorderCreator(); |
| |
| function createVideoStream() { |
| const canvas = document.getElementById("canvas"); |
| context = canvas.getContext('2d'); |
| return canvas.captureStream(); |
| } |
| |
| function drawSomethingOnCanvas() { |
| context.fillStyle = "red"; |
| context.fillRect(0, 0, 10, 10); |
| } |
| |
| async_test(t => { |
| const video = createVideoStream(); |
| const recorder = new MediaRecorder(video); |
| const reader = new FileReader(); |
| |
| recorder.ondataavailable = t.step_func(blobEvent => { |
| reader.readAsText(blobEvent.data); |
| reader.onloadend = t.step_func(() => { |
| assert_not_equals(reader.result.indexOf('Video'), -1, 'MediaRecorder successfully captured video buffers'); |
| assert_equals(reader.result.indexOf('Audio'), -1, 'MediaRecorder does not capture audio buffers for a video-only stream'); |
| t.done(); |
| }); |
| }); |
| recorder.start(); |
| assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully'); |
| drawSomethingOnCanvas(); |
| setTimeout(() => { |
| recorder.stop(); |
| }, 1000); |
| }, 'MediaRecorder will fire a dataavailable event which only contains video buffers for a video-only stream when stop() is called'); |
| |
| async_test(t => { |
| const ac = new AudioContext(); |
| const osc = ac.createOscillator(); |
| const dest = ac.createMediaStreamDestination(); |
| const audio = dest.stream; |
| osc.connect(dest); |
| const recorder = new MediaRecorder(audio); |
| const reader = new FileReader(); |
| |
| recorder.ondataavailable = t.step_func(blobEvent => { |
| reader.readAsText(blobEvent.data); |
| reader.onloadend = t.step_func(() => { |
| assert_not_equals(reader.result.indexOf('Audio'), -1, 'MediaRecorder successfully captured video buffers'); |
| assert_equals(reader.result.indexOf('Video'), -1, 'MediaRecorder does not capture audio buffers for a video-only stream'); |
| t.done(); |
| }); |
| }); |
| recorder.start(); |
| osc.start(); |
| assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully'); |
| setTimeout(() => { |
| recorder.stop(); |
| osc.stop(); |
| }, 1000); |
| }, 'MediaRecorder will fire a dataavailable event which only contains audio buffers for a audio-only stream when stop() is called'); |
| |
| 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); |
| const reader = new FileReader(); |
| |
| recorder.ondataavailable = t.step_func(blobEvent => { |
| reader.readAsText(blobEvent.data); |
| reader.onloadend = t.step_func(() => { |
| assert_not_equals(reader.result.indexOf('Audio'), -1, 'MediaRecorder successfully captured video buffers'); |
| assert_not_equals(reader.result.indexOf('Video'), -1, 'MediaRecorder does not capture audio buffers for a video-only stream'); |
| t.done(); |
| }); |
| }); |
| recorder.start(); |
| osc.start(); |
| drawSomethingOnCanvas(); |
| assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully'); |
| setTimeout(() => { |
| recorder.stop(); |
| osc.stop(); |
| }, 1000); |
| }, 'MediaRecorder will fire a dataavailable event which only contains both video and audio buffers when stop() is called'); |
| |
| </script> |
| </body> |
| </html> |
