RTCPeerConnection-relay-canvas.https.html (2951B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <meta name="timeout" content="long"> 4 <title>Relay canvas via PeerConnections</title> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script src="RTCPeerConnection-helper.js"></script> 8 <script> 9 'use strict'; 10 11 // This test checks that canvas capture works relayed between several peer connections. 12 13 function GreenFrameWebGL(width, height) { 14 const canvas = 15 Object.assign(document.createElement('canvas'), {width, height}); 16 const ctx = canvas.getContext('webgl'); 17 assert_not_equals(ctx, null, "webgl is a prerequisite for this test"); 18 requestAnimationFrame(function draw () { 19 ctx.clearColor(0.0, 1.0, 0.0, 1.0); 20 ctx.clear(ctx.COLOR_BUFFER_BIT); 21 requestAnimationFrame(draw); 22 }); 23 return canvas.captureStream(); 24 } 25 26 27 28 promise_test(async t => { 29 30 // Build a chain 31 // canvas -track-> pc1 -network-> pcRelayIn -track-> 32 // pcRelayOut -network-> pc2 -track-> video 33 const pc1 = new RTCPeerConnection(); 34 t.add_cleanup(() => pc1.close()); 35 const pcRelayIn = new RTCPeerConnection(); 36 t.add_cleanup(() => pcRelayIn.close()); 37 38 const pcRelayOut = new RTCPeerConnection(); 39 t.add_cleanup(() => pcRelayOut.close()); 40 const pc2 = new RTCPeerConnection(); 41 t.add_cleanup(() => pc2.close()); 42 43 // Attach canvas to pc1. 44 const stream = GreenFrameWebGL(640, 480); 45 const [track] = stream.getTracks(); 46 pc1.addTrack(track); 47 48 const v = document.createElement('video'); 49 v.autoplay = true; 50 51 // Setup pc1->pcRelayIn video stream. 52 const haveTrackEvent1 = new Promise(r => pcRelayIn.ontrack = r); 53 exchangeIceCandidates(pc1, pcRelayIn); 54 await pc1.setLocalDescription(); 55 await pcRelayIn.setRemoteDescription(pc1.localDescription); 56 await pcRelayIn.setLocalDescription(); 57 await pc1.setRemoteDescription(pcRelayIn.localDescription); 58 59 // Plug output of pcRelayIn to pcRelayOut. 60 pcRelayOut.addTrack((await haveTrackEvent1).track); 61 62 // Setup pcRelayOut->pc2 video stream. 63 const haveTrackEvent2 = new Promise(r => pc2.ontrack = r); 64 exchangeIceCandidates(pcRelayOut, pc2); 65 await pcRelayOut.setLocalDescription(); 66 await pc2.setRemoteDescription(pcRelayOut.localDescription); 67 await pc2.setLocalDescription(); 68 await pcRelayOut.setRemoteDescription(pc2.localDescription); 69 70 // Display pc2 received track in video element. 71 v.srcObject = new MediaStream([(await haveTrackEvent2).track]); 72 await new Promise(r => v.onloadedmetadata = r); 73 74 // Wait some time to ensure that frames got through. 75 await new Promise(resolve => t.step_timeout(resolve, 1000)); 76 77 // Uses Helper.js GetVideoSignal to query |v| pixel value at a certain position. 78 const pixelValue = getVideoSignal(v); 79 80 // Expected value computed based on GetVideoSignal code, which takes green pixel data 81 // with coefficient 0.72. 82 assert_approx_equals(pixelValue, 0.72*255, 3); 83 }, "Two PeerConnections relaying a canvas source"); 84 </script>