test_peerConnection_captureStream_canvas_webgl.html (4298B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script type="application/javascript" src="pc.js"></script> 5 <script type="application/javascript" src="/tests/dom/canvas/test/captureStream_common.js"></script> 6 <script type="application/javascript" src="/tests/dom/canvas/test/webgl-mochitest/webgl-util.js"></script> 7 </head> 8 <body> 9 <pre id="test"> 10 <script id="v-shader" type="x-shader/x-vertex"> 11 attribute vec2 aPosition; 12 void main() { 13 gl_Position = vec4(aPosition, 0, 1); 14 } 15 </script> 16 <script id="f-shader" type="x-shader/x-fragment"> 17 precision mediump float; 18 uniform vec4 uColor; 19 void main() { gl_FragColor = uColor; } 20 </script> 21 <script type="application/javascript"> 22 createHTML({ 23 bug: "1032848", 24 title: "Canvas(WebGL)::CaptureStream as video-only input to peerconnection" 25 }); 26 27 runNetworkTest(async () => { 28 // [TODO] re-enable HW decoder after bug 1526207 is fixed. 29 if (navigator.userAgent.includes("Android")) { 30 await pushPrefs(["media.navigator.mediadatadecoder_vpx_enabled", false], 31 ["media.webrtc.hw.h264.enabled", false]); 32 } 33 34 var test = new PeerConnectionTest(); 35 var vremote; 36 var h = new CaptureStreamTestHelperWebGL(); 37 var canvas = document.createElement('canvas'); 38 canvas.id = 'source_canvas'; 39 canvas.width = canvas.height = 16; 40 canvas.style.display = 'none'; 41 document.getElementById('content').appendChild(canvas); 42 43 var gl = canvas.getContext('webgl'); 44 if (!gl) { 45 todo(false, "WebGL unavailable."); 46 networkTestFinished(); 47 return; 48 } 49 50 test.setMediaConstraints([{video: true}], []); 51 test.chain.replace("PC_LOCAL_GUM", [ 52 function WEBGL_SETUP(test) { 53 var program = WebGLUtil.createProgramByIds(gl, 'v-shader', 'f-shader'); 54 55 if (!program) { 56 ok(false, "Program should link"); 57 return Promise.reject("Program should link"); 58 } 59 gl.useProgram(program); 60 61 var uColorLocation = gl.getUniformLocation(program, "uColor"); 62 h.setFragmentColorLocation(uColorLocation); 63 64 var squareBuffer = gl.createBuffer(); 65 gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer); 66 67 var vertices = [ 0, 0, 68 -1, 0, 69 0, 1, 70 -1, 1 ]; 71 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 72 squareBuffer.itemSize = 2; 73 squareBuffer.numItems = 4; 74 75 program.aPosition = gl.getAttribLocation(program, "aPosition"); 76 gl.enableVertexAttribArray(program.aPosition); 77 gl.vertexAttribPointer(program.aPosition, squareBuffer.itemSize, gl.FLOAT, false, 0, 0); 78 }, 79 function PC_LOCAL_CANVAS_CAPTURESTREAM(test) { 80 h.drawColor(canvas, h.green); 81 test.pcLocal.canvasStream = canvas.captureStream(0.0); 82 is(test.pcLocal.canvasStream.canvas, canvas, "Canvas attribute is correct"); 83 test.pcLocal.attachLocalStream(test.pcLocal.canvasStream); 84 var i = 0; 85 return setInterval(function() { 86 try { 87 info("draw " + i ? "green" : "red"); 88 h.drawColor(canvas, i ? h.green : h.red); 89 i = 1 - i; 90 test.pcLocal.canvasStream.requestFrame(); 91 } catch (e) { 92 // ignore; stream might have shut down, and we don't bother clearing 93 // the setInterval. 94 } 95 }, 500); 96 } 97 ]); 98 test.chain.append([ 99 function FIND_REMOTE_VIDEO() { 100 vremote = test.pcRemote.remoteMediaElements[0]; 101 ok(!!vremote, "Should have remote video element for pcRemote"); 102 }, 103 function WAIT_FOR_REMOTE_GREEN() { 104 return h.pixelMustBecome(vremote, h.green, { 105 threshold: 128, 106 infoString: "pcRemote's remote should become green", 107 }); 108 }, 109 function REQUEST_FRAME(test) { 110 // After requesting a frame it will be captured at the time of next render. 111 // Next render will happen at next stable state, at the earliest, 112 // i.e., this order of `requestFrame(); draw();` should work. 113 test.pcLocal.canvasStream.requestFrame(); 114 }, 115 function DRAW_LOCAL_RED() { 116 h.drawColor(canvas, h.red); 117 }, 118 function WAIT_FOR_REMOTE_RED() { 119 return h.pixelMustBecome(vremote, h.red, { 120 threshold: 128, 121 infoString: "pcRemote's remote should become red", 122 }); 123 } 124 ]); 125 await test.run(); 126 }); 127 </script> 128 </pre> 129 </body> 130 </html>