| <!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 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 = () => { |
| 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 = () => { |
| resContext.drawImage(player, 0, 0); |
| if (!mode) { |
| _assertPixelApprox(resFrame, 25, 25, 255, 0, 0, 255, "25, 25", "255, 0, 0, 255", 20); |
| _assertPixelApprox(resFrame, 50, 50, 255, 0, 0, 255, "50, 50", "255, 0, 0, 255", 20); |
| mode = 1; |
| player.currentTime = player.duration - 0.05; |
| } else { |
| _assertPixelApprox(resFrame, 20, 20, 0, 255, 0, 255, "20, 20", "0, 255, 0, 255", 20); |
| _assertPixelApprox(resFrame, 199, 199, 0, 255, 0, 255, "199, 199", "0, 255, 0, 255", 20); |
| 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> |
