MediaStream-MediaElement-firstframe.https.html (4290B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Assigning a MediaStream to a media element and not playing it results in rendering a first frame</title> 5 </head> 6 <body> 7 <p class="instructions">When prompted, accept to share your video stream.</p> 8 <h1 class="instructions">Description</h1> 9 <p class="instructions">This test checks that a HTMLMediaElement with an 10 assigned MediaStream with a video track fires the appropriate events to reach 11 the "canplay" event and readyState HAVE_ENOUGH_DATA even when not playing or 12 autoplaying.</p> 13 <video id="vid"></video> 14 <script src=/resources/testharness.js></script> 15 <script src=/resources/testharnessreport.js></script> 16 <script src=/resources/testdriver.js></script> 17 <script src=/resources/testdriver-vendor.js></script> 18 <script src=permission-helper.js></script> 19 <script> 20 'use strict'; 21 const vid = document.getElementById("vid"); 22 23 promise_test(async t => { 24 const wait = ms => new Promise(r => t.step_timeout(r, ms)); 25 const timeout = (promise, time, msg) => Promise.race([ 26 promise, 27 wait(time).then(() => Promise.reject(new Error(msg))) 28 ]); 29 await setMediaPermission("granted", ["camera"]); 30 const stream = await navigator.mediaDevices.getUserMedia({video: true}); 31 t.add_cleanup(() => stream.getTracks().forEach(track => track.stop())); 32 vid.srcObject = stream; 33 34 await timeout(new Promise(r => vid.oncanplay = r), 8000, "canplay timeout"); 35 assert_equals(vid.readyState, vid.HAVE_ENOUGH_DATA, 36 "readyState is HAVE_ENOUGH_DATA after \"canplay\""); 37 }, "Tests that loading a MediaStream in a media element eventually results in \"canplay\" even when not playing or autoplaying"); 38 39 promise_test(async t => { 40 const wait = ms => new Promise(r => t.step_timeout(r, ms)); 41 const timeout = (promise, time, msg) => Promise.race([ 42 promise, 43 wait(time).then(() => Promise.reject(new Error(msg))) 44 ]); 45 const unexpected = e => assert_unreached(`Got unexpected event ${e.type}`); 46 const stream = await navigator.mediaDevices.getUserMedia({video: true}); 47 t.add_cleanup(() => { 48 vid.ondurationchange = null; 49 stream.getTracks().forEach(track => track.stop()) 50 }); 51 vid.srcObject = stream; 52 53 vid.onloadstart = unexpected; 54 vid.ondurationchange = unexpected; 55 vid.onresize = unexpected; 56 vid.onloadedmetadata = unexpected; 57 vid.onloadeddata = unexpected; 58 vid.oncanplay = unexpected; 59 vid.oncanplaythrough = unexpected; 60 61 await timeout(new Promise(r => vid.onloadstart = r), 8000, 62 "loadstart timeout"); 63 vid.onloadstart = unexpected; 64 65 await timeout(new Promise(r => vid.ondurationchange = r), 8000, 66 "durationchange timeout"); 67 vid.ondurationchange = unexpected; 68 assert_equals(vid.duration, Infinity, "duration changes to Infinity"); 69 70 await timeout(new Promise(r => vid.onresize = r), 8000, 71 "resize timeout"); 72 vid.onresize = unexpected; 73 assert_not_equals(vid.videoWidth, 0, 74 "videoWidth is something after \"resize\""); 75 assert_not_equals(vid.videoHeight, 0, 76 "videoHeight is something after \"resize\""); 77 78 await timeout(new Promise(r => vid.onloadedmetadata = r), 8000, 79 "loadedmetadata timeout"); 80 vid.onloadedmetadata = unexpected; 81 assert_greater_than_equal(vid.readyState, vid.HAVE_METADATA, 82 "readyState is at least HAVE_METADATA after \"loadedmetadata\""); 83 84 await timeout(new Promise(r => vid.onloadeddata = r), 8000, 85 "loadeddata timeout"); 86 vid.onloadeddata = unexpected; 87 assert_equals(vid.readyState, vid.HAVE_ENOUGH_DATA, 88 "readyState is HAVE_ENOUGH_DATA after \"loadeddata\" since there's no buffering"); 89 90 await timeout(new Promise(r => vid.oncanplay = r), 8000, "canplay timeout"); 91 vid.oncanplay = unexpected; 92 assert_equals(vid.readyState, vid.HAVE_ENOUGH_DATA, 93 "readyState is HAVE_ENOUGH_DATA after \"canplay\" since there's no buffering"); 94 95 await timeout(new Promise(r => vid.oncanplaythrough = r), 8000, 96 "canplaythrough timeout"); 97 vid.oncanplaythrough = unexpected; 98 assert_equals(vid.readyState, vid.HAVE_ENOUGH_DATA, 99 "readyState is HAVE_ENOUGH_DATA after \"canplaythrough\""); 100 101 // Crank the event loop to see whether any more events are fired. 102 await wait(100); 103 }, "Tests that loading a MediaStream in a media element sees all the expected (deterministic) events even when not playing or autoplaying"); 104 </script> 105 </body> 106 </html>