script-late-transform.https.html (3738B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src=/resources/testdriver.js></script> 8 <script src=/resources/testdriver-vendor.js></script> 9 <script src='../mediacapture-streams/permission-helper.js'></script> 10 </head> 11 <body> 12 <video controls id="video" autoplay></video> 13 <canvas id="canvas" width="640" height="480"></canvas> 14 <script src ="routines.js"></script> 15 <script> 16 function grabFrameData(x, y, w, h) 17 { 18 canvas.width = video.videoWidth; 19 canvas.height = video.videoHeight; 20 21 canvas.getContext('2d').drawImage(video, x, y, w, h, x, y, w, h); 22 return canvas.getContext('2d').getImageData(x, y, w, h).data; 23 } 24 25 function getCircleImageData() 26 { 27 return grabFrameData(450, 100, 150, 100); 28 } 29 30 async function checkVideoIsUpdated(test, shouldBeUpdated, count, referenceData) 31 { 32 if (count === undefined) 33 count = 0; 34 else if (count >= 20) 35 return Promise.reject("checkVideoIsUpdated timed out :" + shouldBeUpdated + " " + count); 36 37 if (referenceData === undefined) 38 referenceData = getCircleImageData(); 39 40 await waitFor(test, 200); 41 const newData = getCircleImageData(); 42 43 if (shouldBeUpdated === (JSON.stringify(referenceData) !== JSON.stringify(newData))) 44 return; 45 46 await checkVideoIsUpdated(test, shouldBeUpdated, ++count, newData); 47 } 48 49 promise_test(async (test) => { 50 await setMediaPermission("granted", ["camera"]); 51 const localStream = await navigator.mediaDevices.getUserMedia({video: true}); 52 const senderTransform = new SFrameTransform({ compatibilityMode: "H264" }); 53 const receiverTransform = new SFrameTransform({ compatibilityMode: "H264" }); 54 await crypto.subtle.importKey("raw", new Uint8Array([143, 77, 43, 10, 72, 19, 37, 67, 236, 219, 24, 93, 26, 165, 91, 178]), "HKDF", false, ["deriveBits", "deriveKey"]).then(key => { 55 senderTransform.setEncryptionKey(key); 56 receiverTransform.setEncryptionKey(key); 57 }); 58 59 let sender, receiver; 60 const stream = await new Promise((resolve, reject) => { 61 createConnections(test, (firstConnection) => { 62 pc1 = firstConnection; 63 sender = firstConnection.addTrack(localStream.getVideoTracks()[0], localStream); 64 sender.transform = senderTransform; 65 }, (secondConnection) => { 66 pc2 = secondConnection; 67 secondConnection.ontrack = (trackEvent) => { 68 receiver = trackEvent.receiver; 69 // we do not set the receiver transform here; 70 resolve(trackEvent.streams[0]); 71 }; 72 }, { 73 observeOffer : (offer) => { 74 const lines = offer.sdp.split('\r\n'); 75 const h264Lines = lines.filter(line => line.indexOf("a=fmtp") === 0 && line.indexOf("42e01f") !== -1); 76 const baselineNumber = h264Lines[0].substring(6).split(' ')[0]; 77 offer.sdp = lines.filter(line => { 78 return (line.indexOf('a=fmtp') === -1 && line.indexOf('a=rtcp-fb') === -1 && line.indexOf('a=rtpmap') === -1) || line.indexOf(baselineNumber) !== -1; 79 }).join('\r\n'); 80 } 81 }); 82 test.step_timeout(() => reject("Test timed out"), 5000); 83 }); 84 85 video.srcObject = stream; 86 video.play(); 87 88 // We set the receiver transform here so that the decoder probably tried to decode sframe content. 89 test.step_timeout(() => receiver.transform = receiverTransform, 50); 90 await checkVideoIsUpdated(test, true); 91 }, "video exchange with late receiver transform"); 92 </script> 93 </body> 94 </html>