MediaStreamTrack-MediaElement-disabled-video-is-black.https.html (4263B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>A disabled video track is rendered as blackness</title> 5 <link rel="author" title="Dominique Hazael-Massieux" href="mailto:dom@w3.org"/> 6 <link rel="help" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html#introduction"> 7 <link rel="help" href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html#mediastreams-as-media-elements"> 8 </head> 9 <body> 10 <p class="instructions">When prompted, accept to share your video stream.</p> 11 <h1 class="instructions">Description</h1> 12 <p class="instructions">This test checks that a disabled video track in a 13 MediaStream is handled correctly by HTMLVideoElement.</p> 14 <video id="vid"></video> 15 16 <div id='log'></div> 17 <script src=/resources/testharness.js></script> 18 <script src=/resources/testharnessreport.js></script> 19 <script src=/resources/testdriver.js></script> 20 <script src=/resources/testdriver-vendor.js></script> 21 <script src=permission-helper.js></script> 22 <script> 23 24 function assertVideoElementIsBlack(vid) { 25 const cv = document.createElement("canvas"); 26 cv.width = vid.videoWidth; 27 cv.height = vid.videoHeight; 28 const ctx = cv.getContext("2d"); 29 ctx.drawImage(vid,0,0); 30 const imageData = ctx.getImageData(0, 0, cv.width, cv.height); 31 for (let i = 0; i < imageData.data.length / 4; ++i) { 32 assert_equals(imageData.data[i * 4], 0, "No red component in pixel #" + i); 33 assert_equals(imageData.data[i * 4 + 1], 0, "No green component in pixel #" + i); 34 assert_equals(imageData.data[i * 4 + 2], 0, "No blue component in pixel #" + i); 35 } 36 } 37 38 promise_test(async t => { 39 const vid = document.getElementById("vid"); 40 await setMediaPermission("granted", ["camera"]); 41 const stream = await navigator.mediaDevices.getUserMedia({video: true}); 42 t.add_cleanup(() => { 43 for (let track of stream.getTracks()) { 44 track.stop(); 45 } 46 vid.srcObject = null; 47 }); 48 49 stream.getTracks()[0].enabled = false; 50 vid.srcObject = stream; 51 vid.play(); 52 await new Promise(r => vid.onloadeddata = r); 53 assertVideoElementIsBlack(vid); 54 }, "Tests that a disabled video track in a MediaStream is rendered as blackness"); 55 56 promise_test(async t => { 57 const vid = document.getElementById("vid"); 58 const cv = document.createElement("canvas"); 59 const ctx = cv.getContext("2d"); 60 ctx.fillStyle = "red"; 61 ctx.fillRect(0, 0, cv.width, cv.height); 62 const stream = cv.captureStream(); 63 t.add_cleanup(() => { 64 for (let track of stream.getTracks()) { 65 track.stop(); 66 } 67 vid.srcObject = null; 68 }); 69 70 stream.getTracks()[0].enabled = false; 71 vid.srcObject = stream; 72 vid.play(); 73 await new Promise(r => vid.onloadeddata = r); 74 75 assert_equals(vid.videoWidth, cv.width); 76 assert_equals(vid.videoHeight, cv.height); 77 }, "Test that a video element rendering a disabled video track reports correct intrinsic dimensions"); 78 79 promise_test(async t => { 80 const vid = document.getElementById("vid"); 81 const cv = document.createElement("canvas"); 82 const originalWidth = cv.width; 83 const originalHeight = cv.height; 84 85 const vid2 = document.createElement("video"); 86 const ctx = cv.getContext("2d"); 87 ctx.fillStyle = "red"; 88 ctx.fillRect(0, 0, cv.width, cv.height); 89 const stream = cv.captureStream(); 90 const stream2 = stream.clone(); 91 t.add_cleanup(() => { 92 for (let track of [...stream.getTracks(), ...stream2.getTracks()]) { 93 track.stop(); 94 } 95 vid.srcObject = null; 96 vid2.srcObject = null; 97 cv.width = originalWidth; 98 cv.height = originalHeight; 99 }); 100 101 stream.getTracks()[0].enabled = false; 102 103 vid.srcObject = stream; 104 vid2.srcObject = stream2; 105 vid.play(); 106 vid2.play(); 107 await Promise.all([ 108 new Promise(r => vid.onresize = r), 109 new Promise(r => vid2.onresize = r), 110 ]); 111 112 // Test "flow" of the disabled track by checking for "resize" events on a 113 // video element rendering that track. Any delivered frames must be black. 114 let resized = 0; 115 vid.addEventListener("resize", t.step_func(() => assertVideoElementIsBlack(vid))); 116 117 for (let i = 0; i < 2; ++i) { 118 cv.width = cv.width / 2; 119 cv.height = cv.height / 2; 120 ctx.fillRect(0, 0, cv.width, cv.height); 121 await new Promise(r => vid2.onresize = r); 122 } 123 }, "Test that frames are black for a disabled video track with an enabled clone"); 124 </script> 125 </body> 126 </html>