MediaStreamTrackProcessor-video.https.html (3576B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>MediaStreamTrackProcessor</title> 5 <link rel="help" href="https://w3c.github.io/mediacapture-insertable-streams"> 6 </head> 7 <body> 8 <p class="instructions">When prompted, use the accept button to give permission to use your audio and video devices.</p> 9 <h1 class="instructions">Description</h1> 10 <p class="instructions">This test checks that MediaStreamTrackProcessor works as expected on video MediaStreamTracks.</p> 11 <script src=/resources/testharness.js></script> 12 <script src=/resources/testharnessreport.js></script> 13 <script src=/resources/testdriver.js></script> 14 <script src=/resources/testdriver-vendor.js></script> 15 <script src='/mediacapture-streams/permission-helper.js'></script> 16 <script> 17 promise_test(async t => { 18 await setMediaPermission("granted", ["camera"]); 19 const stream = await navigator.mediaDevices.getUserMedia({video: true}); 20 const track = stream.getTracks()[0]; 21 const processor = new MediaStreamTrackProcessor({track: track}); 22 const reader = processor.readable.getReader(); 23 const readResult = await reader.read(); 24 assert_false(readResult.done) 25 assert_true(readResult.value instanceof VideoFrame); 26 readResult.value.close(); 27 track.stop(); 28 return reader.closed; 29 }, "Tests that the reader of a video MediaStreamTrackProcessor produces video frames and is closed on track stop"); 30 31 promise_test(async t => { 32 const stream = await navigator.mediaDevices.getUserMedia({video: true}); 33 const track = stream.getTracks()[0]; 34 const processor = new MediaStreamTrackProcessor({track: track}); 35 const worker = new Worker('MediaStreamTrackProcessor-worker.js'); 36 const promise = new Promise(resolve => { 37 worker.onmessage = t.step_func(msg => { 38 if (msg.data instanceof VideoFrame) { 39 msg.data.close(); 40 track.stop(); 41 } else if (msg.data == 'closed') { 42 resolve(); 43 } else { 44 assert_unreached(); 45 } 46 }) 47 }); 48 worker.postMessage({readable: processor.readable}, 49 [processor.readable]); 50 return promise; 51 }, "Tests that the reader of a video MediaStreamTrackProcessor produces VideoFrame objects and is closed on track stop while running on a worker"); 52 53 function makeVideoFrame(timestamp) { 54 const canvas = new OffscreenCanvas(100, 100); 55 const ctx = canvas.getContext('2d'); 56 return new VideoFrame(canvas, {timestamp}); 57 } 58 59 promise_test(async t => { 60 // The generator will be used as the source for the processor to 61 // produce frames in a controlled manner. 62 const generator = new MediaStreamTrackGenerator('video'); 63 t.add_cleanup(() => generator.stop()); 64 // Use a larger maxBufferSize than the default to ensure no frames 65 // will be dropped. 66 const processor = new MediaStreamTrackProcessor({track: generator, maxBufferSize:10}); 67 const reader = processor.readable.getReader(); 68 const writer = generator.writable.getWriter(); 69 70 let numReads = 0; 71 let resolve = null; 72 const promise = new Promise(r => resolve = r); 73 74 const numOperations = 4; 75 // Issue reads without waiting for the frames to arrive. 76 for (let i = 0; i < numOperations; i++) { 77 reader.read().then(dv=> { 78 dv.value.close(); 79 if (++numReads == numOperations) 80 resolve(); 81 }); 82 } 83 84 // Write video frames in different tasks to "slowly" settle the pending read 85 // requests. 86 for (let i = 0; i<numOperations; i++) { 87 await writer.write(makeVideoFrame(i)); 88 await new Promise(r=>t.step_timeout(r,0)); 89 } 90 91 return promise; 92 93 }, "Tests that multiple read requests are eventually settled"); 94 95 </script> 96 </body> 97 </html>