test_mediarecorder_playback_can_repeat.html (2952B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test MediaRecorder Recording creates videos that can playback more than once</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="/tests/dom/canvas/test/captureStream_common.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 </head> 9 <body> 10 <pre id="test"> 11 <div id="content"> 12 <canvas id="video-src-canvas"></canvas> 13 <video id="recorded-video" loop></video> 14 </div> 15 <script class="testbody" type="text/javascript"> 16 17 (async function() { 18 try { 19 SimpleTest.waitForExplicitFinish(); 20 await startTest(); 21 } catch(e) { 22 ok(false, `Got error msg '${e}'`); 23 } finally { 24 SimpleTest.finish(); 25 } 26 })(); 27 28 async function startTest() { 29 let canvas = document.getElementById("video-src-canvas"); 30 31 let canvas_size = 100; 32 canvas.width = canvas.height = canvas_size; 33 let helper = new CaptureStreamTestHelper2D(canvas_size, canvas_size); 34 helper.drawColor(canvas, helper.red); 35 36 let stream = canvas.captureStream(); 37 let mediaRecorder = new MediaRecorder(stream); 38 is(mediaRecorder.stream, stream, 39 "Media recorder stream = canvas stream at the beginning of recording"); 40 new Promise(r => mediaRecorder.onerror = err => r(err)).then( 41 err => Promise.reject(`MediaRecorder: error unexpectedly fired. Code ${err.name}`)); 42 43 mediaRecorder.start(); 44 await new Promise(r => mediaRecorder.onstart = r); 45 info("Media recorder started"); 46 // Feed some more data into the recorder so the output has a non trivial duration. 47 // This avoids the case where we have only 1 frame in the output, which breaks 48 // looping (this is expected as a WebM with 1 video frame has no duration). 49 let counter = 0; 50 let draw = () => { 51 counter++; 52 helper.drawColor(canvas, helper.blue); 53 if(counter > 2) { 54 mediaRecorder.stop(); 55 return; 56 } 57 requestAnimationFrame(draw); 58 }; 59 requestAnimationFrame(draw); 60 61 // When recorder is stopped get recorded data. 62 const data = await new Promise(r => mediaRecorder.ondataavailable = ev => r(ev)); 63 info(`Media recorder get availiable data`); 64 const blob = data.data; 65 66 await new Promise(r => mediaRecorder.onstop = r); 67 info("Media recorder stopped"); 68 ok(blob, "Should have gotten a data blob"); 69 const video = document.getElementById("recorded-video"); 70 new Promise(r => video.onerror = err => r(err)).then( 71 err => Promise.reject(`Video: error unexpectedly fired. Code ${err.code}`)); 72 video.src = URL.createObjectURL(blob); 73 video.play(); 74 await new Promise(r => video.onplaying = r); 75 for (let idx = 0; idx < 2; idx++) { 76 await new Promise(r => video.onseeking = r); 77 ok(true, `waiting until video finishes seeking`); 78 await new Promise(r => video.onseeked = r); 79 ok(true, "video finished seeked"); 80 } 81 video.pause(); 82 } 83 84 </script> 85 </pre> 86 </body> 87 </html>