Unreviewed, add myself to some watch lists.
[WebKit-https.git] / LayoutTests / http / wpt / mediarecorder / MediaRecorder-AV-video-only-dataavailable.html
1 <!doctype html>
2 <html>
3 <head>
4     <title>MediaRecorder can successfully record the video for a video-only stream</title>
5     <link rel="help" href="https://w3c.github.io/mediacapture-record/MediaRecorder.html#mediarecorder">
6     <script src="/resources/testharness.js"></script>
7     <script src="/resources/testharnessreport.js"></script>
8     <script src="../common/canvas-tests.js"></script>
9     <link rel="stylesheet" href="../common/canvas-tests.css">
10 </head>
11 <body>
12 <div>
13     <video id="player" controls=true>
14     </video>
15 </div>
16 <div>
17     <canvas id="canvas" width="200" height="200">
18     </canvas>
19     <canvas id="frame" width="200" height="200" style="visibility:visible; display:block">
20     </canvas>
21 </div>
22 <script>
23     var context;
24     var drawStartTime;
25
26     function createVideoStream() {
27         const canvas = document.getElementById("canvas");
28         context = canvas.getContext('2d');
29         return canvas.captureStream();
30     }
31
32     function doRedImageDraw() {
33         if (context) {
34             context.fillStyle = "#ff0000";
35             context.fillRect(0, 0, 200, 200);
36             if (Date.now() - drawStartTime < 2000) {
37                 window.requestAnimationFrame(doRedImageDraw);
38             } else {
39                 drawStartTime = Date.now();
40                 doGreenImageDraw();
41             }
42         }
43     }
44
45     function doGreenImageDraw() {
46         if (context) {
47             context.fillStyle = "#00ff00";
48             context.fillRect(0, 0, 200, 200);
49             if (Date.now() - drawStartTime < 10000) {
50                 window.requestAnimationFrame(doGreenImageDraw);
51             }
52         }
53     }
54
55     const video = createVideoStream();
56     const recorder = new MediaRecorder(video);
57     let mode = 0;
58     recorder.ondataavailable = (blobEvent) => {
59         assert_true(blobEvent instanceof BlobEvent, 'the type of event should be BlobEvent');
60         assert_equals(blobEvent.type, 'dataavailable', 'the event type should be dataavailable');
61         assert_true(blobEvent.isTrusted, 'isTrusted should be true when the event is created by C++');
62         assert_true(blobEvent.data instanceof Blob, 'the type of data should be Blob');
63         assert_true(blobEvent.data.size > 0, 'the blob should contain some buffers');
64         player.src = window.URL.createObjectURL(blobEvent.data);
65         const resFrame = document.getElementById("frame");
66         const resContext = resFrame.getContext('2d');
67         player.oncanplay = () => {
68             assert_greater_than(player.duration, 0.1, 'the duration should be greater than 100ms');
69             player.play();
70         };
71         player.onplay = () => {
72             if (mode === 2)
73                 return;
74             player.pause();
75             player.currentTime = 1;
76         };
77         player.onseeked = () => {
78             resContext.drawImage(player, 0, 0);
79             if (!mode) {
80                 _assertPixelApprox(resFrame, 20, 20, 255, 0, 0, 255, "20,2 0", "255, 0, 0, 255", 50);
81                 _assertPixelApprox(resFrame, 50, 50, 255, 0, 0, 255, "50, 50", "255, 0, 0, 255", 50);
82                 mode = 1;
83                 player.currentTime = 3;
84             } else if (mode === 1){
85                 _assertPixelApprox(resFrame, 21, 21, 0, 255, 0, 255, "21, 21", "0, 255, 0, 255", 50);
86                 _assertPixelApprox(resFrame, 51, 51, 0, 255, 0, 255, "51, 51", "0, 255, 0, 255", 50);
87                 mode = 2;
88                 done();
89             }
90         };
91         player.load();
92     };
93     recorder.start();
94     assert_equals(recorder.state, 'recording', 'MediaRecorder has been started successfully');
95     drawStartTime = Date.now();
96     doRedImageDraw();
97     setTimeout(() => {
98         recorder.stop();
99     }, 4000);
100
101 </script>
102 </body>
103 </html>