test_cloneElementVisually_mediastream.html (2122B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test cloneElementVisually</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script type="application/javascript" src="https://example.com:443/tests/dom/media/test/cloneElementVisually_helpers.js"></script> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 9 </head> 10 <body> 11 <div id="content"> 12 <h1>Original</h1> 13 <video id="original"></video> 14 <h1>MediaStream</h1> 15 <video id="streamTarget"></video> 16 <h1>Clone</h1> 17 </div> 18 <div id="results"> 19 <h1>Results</h1> 20 <canvas id="left"></canvas> 21 <canvas id="right"></canvas> 22 </div> 23 24 <script type="application/javascript"> 25 26 /* import-globals-from cloneElementVisually_helpers.js */ 27 28 /** 29 * Test that we can clone a video that is playing a MediaStream. 30 */ 31 add_task(async () => { 32 await setup(); 33 34 let originalVideo = document.getElementById("original"); 35 let stream = originalVideo.mozCaptureStream(); 36 let streamTarget = document.getElementById("streamTarget"); 37 originalVideo.setAttribute("loop", true); 38 let playingPromise = waitForEventOnce(originalVideo, "playing"); 39 await originalVideo.play(); 40 await playingPromise; 41 42 streamTarget.srcObject = stream; 43 playingPromise = waitForEventOnce(streamTarget, "playing"); 44 await streamTarget.play(); 45 await playingPromise 46 47 await withNewClone(originalVideo, async clone => { 48 await SpecialPowers.wrap(streamTarget).cloneElementVisually(clone); 49 50 originalVideo.loop = false; 51 originalVideo.currentTime = originalVideo.duration - 0.1; 52 await waitForEventOnce(streamTarget, "ended"); 53 54 ok(await assertVideosMatch(originalVideo, streamTarget), 55 "Should match Original video"); 56 ok(await assertVideosMatch(streamTarget, clone), 57 "Should match MediaStream"); 58 }); 59 60 // Capturing a stream from a video "taints" it which prevents testing 61 // shutdown decoder behaviour. To avoid interfering with future tests, 62 // we replace the video. 63 let newVideo = originalVideo.cloneNode(); 64 originalVideo.parentNode.replaceChild(newVideo, originalVideo); 65 }); 66 67 </script> 68 69 </body> 70 </html>